React is a lightweight JavaScript library created by Facebook that has become highly popular in the recent years. It allows you to build beautiful UIs for your web apps using isolated and reusable building blocks called components.
React also has a huge ecosystem mainly created by third-party developers, including several tools, component libraries, IDEs, extensions for code editors and web browsers, boilerplates, and more. In this article, we have collected the 20 best tools and resources for both beginners and experienced React developers.
01. Reactide
Reactide is a dedicated IDE (integrated development environment) for React application development. It’s a cross-platform tool that allows you to render React components without any build or server configuration. Reactide runs an integrated Node server and a custom browser simulator. It makes state flow visualization possible as well.
02. React Studio
React Studio is a great tool if you are a designer who wants to build React apps without any coding knowledge. It’s a visual design tool that allows you to create React components and app flows based on your designs. React Studio also has built-in drawing tools, a mobile viewer, and even lets you import your files from Sketch.
03. Facebook’s Create React App
It takes some time to set up an environment for a new React project with all the requirements. To help developers, Facebook released its Create React App project on Github. It’s a single command-line tool with which you can quickly get a new React app up and running. It provides you with a frontend build pipeline, sets up a developer environment, and optimizes your app for production. It works with zero configuration and you can use it with any backend language.
04. Storybook
Storybook is a UI development environment for React components, used in production by companies like Coursera, Squarespace, and Lonely Planet. It lets you develop and test React components interactively and you can also build your own component library. With Storybook, you can view the different states of each component and develop it in isolation from your app, which results in better reusability.
05. React Styleguidist
React Styleguidist is another interactive environment for isolated React component development. It lets you focus on building one component at once but also comes with a hot reloaded dev server that allows you to see all your components in one place. It works out of the box with the aforementioned Create React App and supports ES6, Flow, and TypeScript, too.
06. React Developer Tools for Chrome
React Developer Tools is a Google Chrome extension created by the Facebook team. It allows you to inspect the React component hierarchy right inside your browser, including component props and state. The extension adds a new tab called “React” to your Chrome DevTools and you can see how the changes of a component affect other components in order to help you design a proper component structure.
07. React Developer Tools for Firefox
Facebook also released React Developer Tools as a Firefox extension. It has the same functionalities as the Chrome extension mentioned before. After installing it, you can get access to the React tools within your Firefox Developer Tools in the new “React” tab.
08. React Sight
React Sight is a React visualization tool that provides you with the visual representation of the structure of your React app. It requires the aforementioned React Developer Tools for Chrome. You need to install React Sight as a Chrome extension, too. It adds a new “React Sight” panel to your Chrome DevTools. React Sight comes with support for React Router and Redux as well.
09. React Cosmos
React Cosmos is a developer tool that helps you build reusable React components. It scans your React projects for components and lets you render them with any combination of props, context, and state. React Cosmos also makes it possible to mock any external dependency such as API responses or localStorage so that you can see the state of your app in real-time.
10. CodeSandbox for React
CodeSandbox is an online code editor and live playground created and fine-tuned specifically for web app development. The tool aims to enable developers to start building React apps in their browsers within a sandbox available by a single URL. CodeSandbox is not only for React, they also provide you with online editors for Angular, Vue, and Preact.
11. React Bits
If you want an easy-to-use collection of React patterns, techniques, tips, and tricks you need to look no more. React Bits is an awesome compilation of all the information you may need. It’s an online documentation where you can quickly access design patterns and techniques, antipatterns, UX variations, styling, and other React-related tips.
12. React Boilerplate
If you are looking for a React starter kit that allows you to quickly set up a new project React Boilerplate can be an excellent solution for you. It focuses on offline development, high scalability, and performance. It also makes use of React best practices and next-generation JavaScript that enables you to use the latest features such as template strings and arrow functions.
13. React Slingshot
React Slingshot is another boilerplate that lets you use React with Redux. It gives you access to features like hot reloading, automated testing, linting, automated production builds, and others. React Slingshot uses popular libraries and tools such as Babel, Webpack, ESLint, Sass, and PostCSS. Besides, you can find a working example app in the starter kit as well.
14. React Style Guide Generator
With the React Style Guide Generator, you can generate an easy-to-use and well-organized style guide for your React project. You need to create a separate file for the style guide, then add some documentation in JavaScript, using some pre-defined rules. The style guide generator is well-documented and you can use the ES6 syntax as well.
15. React Extension Pack for Visual Studio Code
If your go-to code editor is Visual Studio Code you can make use of the React Extension Pack to speed up your React development process. It’s not only one extension but seven, packaged as one. The extension pack includes React code snippets, ESLint, an integrated npm, ES6 snippets, a search feature for node_modules, and IntelliSense for npm modules and file paths. If you have this extension added to your VS Code you will truly feel like having superpowers.
16. Atom React Plugin
If you are an Atom user you can take your React development to the next level by using the Atom React Plugin. It adds a JSX syntax highlighter, automatic indentation, and code folding to your Atom editor to help you write React code faster and with fewer mistakes. It also includes React code snippets and an HTML to JSX converter with which you can port your old HTML files to JSX.
17. React-Bootstrap
Bootstrap is currently the most popular frontend framework. Thanks to the React-Bootstrap component library, you can keep using it with React as well. It provides you with components for the whole Bootstrap framework so that you can build React apps with Bootstraps’s well-known look and feel. Currently, they have components for Bootstrap 3 but they are actively working on supporting Bootstrap 4, too.
18. React Toolbox
React Toolbox is a collection of React components built according to the principles of Google’s Material Design. The components make use of advanced frontend technologies such as CSS Modules, Webpack, and ES6. Therefore, you can easily add React Toolbox’s components to your Webpack workflow but you can use any other module bundler as well. React Toolbox also has an online playground where you can check out how the components look like live.
19. Semantic UI React
If you want to use Semantic UI with React then Semantic UI React is probably the best solution for you. Semantic UI is a popular frontend framework that lets you create responsive, user-friendly layouts. Semantic UI React is the official React integration and it’s used by companies like Amazon, Netflix, and Microsoft. It’s jQuery-free and comes with a declarative API, shorthand props, sub-components, and other awesome features.
20. React Belle
React Belle is a configurable React component library including highly useful components such as Toggle, Rating, DatePicker, Button, Card, Select, and others. Belle components have customizable styles, support the ARIA accessibility standards, and look great on mobile devices, too. If you don’t want to configure your own styles you can choose from two pre-designed themes: “Belle” and “Bootstrap 3”.
Next Steps
Finding the right tools can help you build better React apps faster. If you haven’t yet used React take a look at our introduction to the React.js library first. To dig deeper, also don’t miss out our tutorial on how to use Facebook’s Create React App.
To stay updated with the latest web development news, tips, and tutorials, follow DeveloperDrive on Facebook and Twitter, too.
