This article is translated and published by Grape City Technology team

The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.

JavaScript comes out with a lot of frameworks and tools every day, and React is another popular framework in addition to Vue and Ember we mentioned last time. But with new tools appearing every day, developers are often overwhelmed when trying them out.

So when choosing the right IDE, the right visualizer, and even the right style for your new React project, you have a lot of choices. How do you choose the right one? This is a worrying thing.

In this article, I’ll introduce 11 React development tools to help you choose and show you how to use them to get the most out of the framework.

1. React Developer tools

We’ll start with one of the most popular Tools for React developers, Chrome React Dev Tools, a Chrome extension that recently released its V4 version.

Once installed, open Chrome’s Developer Tools and you’ll see the Components and Profiler tabs. The Components TAB allows you to view a list of Components on the screen as well as subcomponents derived from other Components. You can optionally check and even edit the status and properties of Components. Using the Profiler TAB, you can also evaluate the performance of your application.

Both options can be found on the Chrome DevTools TAB. To get a better feel for the functionality and features of the plugin, you can use this online site.

2. React Sight

In addition to the above extensions, we need to mention another Chrome extension called React Sight, which helps you check React applications.

After installing DevTools, after you’ve enabled the “Allow access to file urls” option in the React DevTools and React Sight extension Settings, you’ll find a new TAB called “React Sight” in the DevTools folder. When you run the native application, React Sight allows you to view and create different components in a visual tree, which allows you to easily understand how they are connected and see their current state and properties when you hover over them.

3. React Extension Pack (for VS Studio)

By far, Visual Studio is probably one of the favorite ides for JavaScript developers. I’m talking about one here, not the only one, because there are plenty of other great ides out there, such as Sublime, IntelliJ, and Vim.

But we won’t expand on it here, which is why VS is mentioned here, because there is a strong community behind VS, so let’s look at the React Extension Pack.

Essentially, it’s a set of extensions for React related tasks. VS does a great job of parsing and doing generic JS requirements in general, but this gadget suite takes it to a whole new level. In this bag, you will find:

  • ReactJS snippets: It provides 40 React snippets, which can satisfy all your general needs and 34 propTypes specific snippets. It prevents you from wasting a lot of time reinventing the wheel and improves your daily productivity.
  • ES Lint: Added support for command-line tools. It integrates into your IDE and helps you improve your syntax, set your own coding styles, and even automatically fix errors for you in some cases.
  • NPM: When you need to install a new plug-in, restart the server, or run some NPM-specific commands, you have to jump from the IDE to the terminal, which can be a bit tiring, so this extension adds the ability to run NPM commands directly from the IDE.
  • JS ES6 snippets: This plugin will contain over 40 snippets of code, which will be absolutely necessary for you to improve your development efficiency.
  • Search node_modules: With this extension, you can easily find modules and open them in the editor.
  • NPM IntelliSense: With this module, you can easily list all installed modules, quickly search for them, and insert the correct code snippets to import into your code.
  • Path intelliSense: Finally, inline with the last extension, it becomes very difficult and cumbersome to remember all the paths and file names when you are not the only one working on a large project. This extension will help you automatically complete the path for local imports.

There are 7 extensions in total, each of which provides some value to the project. To install this extension pack, you can easily install it from VS’s command panel using the following command (CTRL + P to open it) :

ext install jawandarajbir.react-vscode-extension-pack

4. Storybook

React is designed to help you write your UI in a very intuitive way. But it’s not really natural to have to write code to create visual components, which is why we usually jump from code to the browser and then back to code.

Storybook is an open source tool that you can use to develop your own UI components. More than just a code base, their online UI editor allows you to develop, examine, and ultimately present your work in an interactive manner (which is critical when developing visual components).

To install Storybook into your existing React project, all you need to do is:

$ npx -p @storybook/cli sb init

This command will examine the structure of your project and try to understand which view layer you are using (since Storybook supports other view layers besides React, such as Vue, Angular, etc.).

Once the command is complete, you can run the Storybook by running the following command:

$ npm run storybook

5. React Styleguideist

This is another interesting interactive tool that lets you create and present your UI components.

Take a closer look at the image above. On the right, you can see the actual code, which generates the UI on the left. You can present the UI this way, and you can even test and edit the UI by changing the code directly on the displayed interface.

To include it in your React project, all you need to do (assuming you have WebPack installed and you created the project using the Create React App) is:

$ npm install –save-dev react-styleguidist

Then run the following command to start your style server:

$ npx styleguidist server

If you want to learn more about using Styleguideist on your projects, check out the documentation and demos.

6. Create React App

The standard project structure is the basis for using many React tools, which is where Facebook’s Create React App comes in. In fact, the tool is so easy to use that you can create a whole new React project with a single command, without having to think about what structure is best or which modules to add to the project correctly. This tool will do all the work for you.

If you already have NPX installed, you don’t need to install anything, just the following line:

$ npx create-react-app my-app

Or, if you don’t like NPX, you can also use NPM or YARN:

$ npm init react-app my-app

or

$ yarn create react-app my-app

Either way, you need to have Node.js (8.16.0 or 10.16.0 or later) installed on your system.

Using one of these commands, you will get a folder structure like this:

My-app ├── ├ me.md ├── Package. json ├── Public │ ├─ FavIcon. Ico │ ├─ index.html │ └ ─ ─ the manifest. Json └ ─ ─ the SRC ├ ─ ─ App. CSS ├ ─ ─ App. Js ├ ─ ─ App. Test, js ├ ─ ─ index. The CSS ├ ─ ─ index. The js ├ ─ ─ logo. The SVG └ ─ ─ serviceWorker.js

With this structure in place, you can start the server with the following command:

NPM start # Use YARN start as desired

Once running, you can access the newly created app at http://localhost:3000.

7. React Bootstrap

Have you heard of Bootstrap? This is a popular CSS framework. It provides a set of CSS classes and JavaScript functions that make it easy to create beautiful and responsive UIs.

Now the authors of React Bootstrap have rewritten the JS part of the code to make it React compatible. So you can now use the React component just as you would use the React component:

To add it to your project, you can use NPM

$ npm install react-bootstrap bootstrap

When you are ready, you can add the desired stylesheets to the project app.js or SRC /index.js file.

{/* The following line can be included in your src/index.js or App.js file*/}

import ‘bootstrap/dist/css/bootstrap.min.css’;

8. React-Proto

If you’re less interested in code and more interested in visual design, then perhaps React-Proto is the tool for you. With it, you can use drag and drop to create UI prototypes without having to write code for them.

You can use this tool to tag all possible components, giving them names, properties, and hierarchy Settings, starting with the design that the designer provides you. Once you’re done, you can export them to actual auto-generated code, which you can then customize.

If you are about to start a new project, this tool will save you a lot of time during the initial phase of the project.

9. Why did you render

Why Did You Render is a tool that tests whether React components need to be rerendered. If it does not, it consoles out the component’s properties, states, and recommendations for developers to make adjustments.

You can install it using the following simple method:

$ npm install @ welldone-software / why-did-you-render –save

You can then include it in your project using the following lines:

import React from ‘react’;

if (process.env.NODE_ENV ! == ‘production’) { const whyDidYouRender = require(‘@welldone-software/why-did-you-render’); whyDidYouRender(React); }

After that, all that remains is to mark the component you want to notify, as follows:

class BigListPureComponent extends React.PureComponent { static whyDidYouRender = true render(){ return ( //some heavy render you want to ensure doesn’t happen if its not neceserry ) } }

With everything in place, you can expect the following output:

10. Proton Native

Finally, for the last tool, I’d like to introduce a way to create desktop applications using React, because after all, projects like Electron have been doing this in JavaScript for some time.

Now, with Proton Native, you can do React as well. You can define GUI elements by defining the React component, and the tool is compatible with all Node.js modules, Redux, and because of Proton, it’s completely cross-platform!

To install it on your system, all you need to do is go through NPM and execute the following command:

$ npm install -g create-proton-app

Note, however, that if you are using Linux, you will need to install the following dependencies first:

libgtk-3-dev build-essential python2 pkg-config

Finally, to create the application, simply do the following:

CD my-app # run app $NPM run start

They already have a working example for you to look at, and feel free to check out its full documentation if you want to see how to use it for your own projects.

conclusion

These are 11 React related tools. Not all of them are Web, not all of them are visual, and not all of them are designed to help you write code. But the point here is that many of them can be used together and complement each other.