11 Top React Developer Tools for 2020

React developer tools you should add to your toolbox

JavaScript is famous for the number of frameworks and tools that are created around it every week, and React, being one of the most popular of those frameworks as of late, “suffers” a similar fate, causing new developers to get overwhelmed when they attempt to start delving into the technology.

So when it comes to picking the right IDE, the right visualizer or even the right stylesheet for your new React project, there are many options out there. Picking the right ones? That’s easier said than done.

In this article, I will be covering 11 (yes, you read right) tools around React to help you understand what your options are and how you can leverage them to help you get the most out of the framework itself.

1. React Developers Tools

We’ll start with the obvious pick, one of the most popular tools for React dev, React Dev Tools for Chrome that has recently released its 4th version :rocket:

Looking at the dev tools, the components tabs will show you the list of components rendered on screen as well as the subcomponents spawning from others. You’ll be able to select them and inspect or even edit their state and props. With the profiler tab, you’ll also be able to measure app performance.

Both options are available on the standard tabs already included on the DevTools, however, they’re meant for vanilla JS, which means you won’t have the same amount of details and capabilities compared to the specialized ones added by the extension.

If you’re serious about your react-related development, this is a must-have extension.

To get make sure you’re not missing any hidden feature, try practicing with this interactive tutorial .

2. React Sight

In conjunction with the above extension, React Sight is yet another Chrome extension you can install to help you in your react-inspection related endeavors.

Let me explain:

Once you’ve installed React DevTools, you can go back to the list of extensions and look for React Sight . Install it just like with all extensions, use the big blue button.

After that, if you are running local file URLs, make sure to enable “Allow access to file URLs” in the extension settings for both React Dev Tools and React Sight. You can now run your React application, or open any website running React. Easy install process.

To use it you’ll find a new tab as part of the DevTools like before, called “React Sight”.

With this tool, you’re able to visualize the different components you’ve created in a tree-like fashion. This allows you to understand how they’re all connected, and by hovering over them, you can see their current state and props.

3. Bit

I’ve covered Bit ( Github ) with React in more detail inanother article, but it’s part of this list because it’s definitely one of the best options available when it comes to creating and sharing your React components.

Without getting too much into it again, Bit provides a CLI tool and an online platform where you can both, publish your React components (after they’ve been isolated by Bit) and share them with others. It also allows you to search for components created and published by 3rd parties. Think of it as NPM meets Git, but for React Components.

Their 3rd party store allows you to browse through a full “marketplace” of components. These are even rendered for your own benefit, so you don’t have to just read some code to understand what they’re supposed to be doing:

React components in bit.dev

You can even get a detailed view of each one, where you’re free to edit the code used to render the preview and make sure the component fits your needs before deciding to download it and add it to your project (or importing it using ‘bit import’, to further develop it on your local environment)

Example: Bit’s live playground

And if you’re interested in publishing rather than importing other’s work, you get a very simple command-line tool that allows you to individually track changes on each component without needing to have a separate project for each one.Click here if you want to know more about bits and how you can use it to create your own components library.

4. React Extension Pack (for VS Studio)

Visual Studio is probably one of the most popular IDEs for JavaScript developers as of late. True, you don’t really have to be using it to be a successful developer, there are great alternatives such as Sublime, IntelliJ and even Vim (big Vim fan right here folks!).

That being said, because of the strong community behind VS, I thought I’d share a few words about its React Extension Pack .

Essentially, this is a bundle of extensions designed to help you in your react-related tasks. By default VS does an amazing job in parsing and providing little tools and snippets for your generic JS needs, but this takes it to the next level. In this pack you’ll find: