Last Updated on
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.
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.
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.
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’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.
And if you use CRA, here’s some good news: It comes bundled with Jest, so you don’t need to install it separately.
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.
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.
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.
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.
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.
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!