Becoming proficient with tools to up your front-end game is an investment with a solid payoff. Before checking out some of the best React tools, let’s first explore why these tools will make your life easier and your apps stronger.
What are React Developer Tools?
React is a component-based library for creating UIs with a variety of developer tools supporting it: libraries, frameworks, and extensions made to simplify React development. From code generators, like Create React App, that help you avoid writing boilerplate code to testing utilities like Jest and Enzyme, these tools provide you with ways to fortify your code while saving setup time. Although they all have React in common, these tools differ in many ways. Finding the tools that suit you best will depend on your programming style and preferences.
List of React Developer Tools
This list focuses on tools that improve the developer experience. In this article, we’re excluding many component libraries, editors, and editor plugins in favor of libraries that simplify setting up, styling, inspecting, and testing your app.
Create React App
Undoubtedly one of the most well-known React tools, Create React App (CRA) is the quickest way to start developing a React project. With a single command, you’re able to bootstrap an entire React project, folder structure and all.
To begin with, you’ll need to have Node.js installed on your system. Beyond that, if you have npm installed, you won’t have to install anything else — the tool will bring in all the support modules it requires. You only need to run the following command:
npx create-react-app <name>
(If you’re not a fan of npx, you can go with the equivalent options for the npm or yarn commands instead.)
Like CRA, many of the other tools covered in this article expect you to follow a standard project structure for them to work effectively. This is one way CRA shines: the configuration it gives you is a clean, solid structure that will work with all other React developer tools.
For those that prefer to keep your JavaScript strongly typed, you can easily use CRA to create a TypeScript project without having to manually add the language into an already existing project. Just add the –template typescript option when creating your project:
npx create-react-app <name> –template typescript
You’re now ready to start your server and develop your app. Just run npm start in your app directory. This will start up a local server that reloads your code whenever you edit it. There’s a lot of cool things to learn about this tool, so check out the full documentation.
Enzyme
With tools like Enzyme, even the most complacent React developer will find it easy to follow best practices for testing. Enzyme is a utility created by Airbnb for exclusively testing React applications. Its strength lies in the methods it provides for rendering components and for finding and interacting with elements. Enzyme isn’t included in the app structure generated by create-react-app and must be installed separately.
Enzyme also needs a test runner, as it’s meant to provide additional functionality that simplifies asserting, manipulating, and traversing your components’ output. We recommend pairing Enzyme with Jest, the unit test runner covered below. While some developers think of the two tools as competitors, they’re designed to complement one another — here’s a Medium article on the topic.
We’d also like to call attention to Chai, an assertion library for Node and a browser that can be used with Enzyme to test React apps. What’s the benefit of adding another library when Enzyme is so thorough on its own? The answer is simple: using the chai-enzyme library makes assertions more readable. Here’s the full documentation for the library.
react-i13n
Developed by Yahoo!, react-i13n simplifies and scales instrumentation code or code that handles event-based functionality such as tracking. Without react-i13n, you’d have to explicitly add instrumentation code throughout your application. When using the utility, you can define the data model you want to track and the tool handles the beaconing for you.
The big value-add of react-i13n is an instrumentation tree with an architecture that mirrors your app’s React component hierarchy. This tree allows you to define your instrumentation data and get all the information you need in memory instead of relying on DOM manipulation. If you define your plugin for your preferred instrumentation librarie, all you have to do is leverage react-i13n with an existing component to designate which components trigger which tracking events.
Jest
While Enzyme is great for supplementary testing, as noted above we need a test runner, a tool that executes files with unit tests and writes their results to the console. Jest is a unit testing framework created by Facebook to test JavaScript services and React applications. Besides its function as a test runner similar to mocha, it’s also an assertion library and mocking library: it can verify the results of a test and a component’s relationship to its dependencies.
Jest’s ease of use, speed, and modern features make it an easy choice when ensuring functionality doesn’t break as you add new features. Let’s examine one of these spiffy features: snapshot testing. Jest can save a rendered snapshot of a component and compare it to a previous one saved in an auto-generated folder. To ensure that the initial snapshot reflects the intended outcome, the test will fail if the two don’t match.
While both Jest and Enzyme were specifically designed to test React applications, Jest can also be used with any other Javascript app. Jest can be used in React without Enzyme to render components and test with snapshots, but we recommend using the two together. Here are some best practices when testing React apps.
And if you use CRA, here’s some good news: It comes bundled with Jest, so you don’t need to install it separately.
react-inspector
While Chrome’s extension React DevTools is incredibly powerful, it’s only designed for the browser. Most React apps would benefit from the same functionality, and that’s just what react-inspector provides: the power of Chrome DevTools’ inspectors without the need for the browser. Check out their storybook to get started with this tool.
react-json-inspector
As its name suggests, react-json-inspector is a React-based JSON inspector featuring tree expansion and fast search. It’s a great choice if you don’t like dealing with JSON objects or arrays and want to simplify inspecting their properties. Here’s a live example to test it out. It’s simple to use, but you’ll need to include json-inspector.css in your stylesheet.
React Styleguidist
Ever dream about an environment for rapid UI development in React? React Styleguidist is an interactive tool that takes your React code and generates a UI that makes visualization a breeze. After creating a UI, you can use it not only for showcasing, but also for testing and editing by changing the code on the rendered version.
If you created your project with CRA, just install Styleguidist and start your server. The commands for doing so can be found in their documentation. And check out React Styleguideist’s demo page for visuals of how their tool works.
JavaScript Standard Style
Those who dread styling, indenting, and formatting will find a friend in Standard. It’s more than a React developer tool: it’s a JavaScript style guide, linter, and a formatter that auto-formats code using a simple command, standard –fix. It also catches errors early on — no more triple-checking. We recommend it as the easiest way to enforce code quality in your project.
React Sight
For visual developers, generating a UI is great for seeing what a particular component looks like, but how do you keep track of your app’s component hierarchy? React Sight lets you visualize your React apps by presenting you with a live hierarchy tree for your entire app. You can hover over its nodes, which link to components and let you see their relationship to the rest of the tree.
Designed for the react library, React Sight also supports related libraries like react-router and react-redux. In conjunction with React DevTools, React Sight helps the visually inclined inspect their components in black and white.
To use React Sight, you’ll need to install it as a Chrome extension after installing React DevTools. If you’re using local file URLs, make sure to enable “Allow access to file URLs” in the extension settings for React Dev Tools and React Sight. After that, you can run your application or open any website running React.
Beyond React
Besides developer tools made specifically for React, there are many libraries and services out there for continuous integration and deployment, exception tracking, collection of metrics, dashboards, and more.
We’ve already mentioned React DevTools, which is just one extension among the numerous Chrome DevTools for in-browser development, and that’s where we suggest starting if you’re a JavaScript developer wanting to apply tools across frameworks. We also recommend educating yourself on in-app tools like Jest that can be applied elsewhere in the JavaScript ecosystem.
Summary
In this article, we provided a general overview of React development tools and described several tried-and-true ones across a broad range of development stages.
If developing with React sounds interesting to you, and you like the idea of using modern tools to become a more proficient and efficient developer, we suggest taking a professional course to deepen your skills while sticking to best practices. The React Nanodegree program is a great choice should you be looking to make a career change or even to just start building projects as a side hobby. Happy coding!
