React is a lightweight JavaScript library created by Facebook that has become popular in recent years, as it allows you to build beautiful UIs for your web apps using isolated and reusable building blocks called components.
React also has a large ecosystem largely created by third-party developers, including some tools, component libraries, IDEs, extensions for code editors and web browsers, boilerplates, and more. In today post, I’ve have collected these 10 excellent tools and resources for both beginners and experienced React developers.
1. React Toolbox
React Toolbox is a set of React components that implements Google Material Design specification. Its built on top of some of the advanced frontend technologies like CSS Modules, Webpack, and ES6. The library integrates with Webpack workflow, and it’s easily customisable and very flexible.
2. React Style Guide
With the React Style Guide Generator, you can easily generate an easy-to-use and well-organised style guide for React projects. You will 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.
3. React Boilerplate
This is great React starter kit that allows you to quickly set up a new project. This React Boilerplate can be an outstanding solution for you as it focuses on offline development, high scalability, and performance.
This boilerplate also makes use of React best practices and next generation JavaScript that enables you to use the latest features.
4. React Developer Tools for Firefox
React Developer Tools is a tool for Firefox that allows you to inspect a React tree, including the component hierarchy, props, state, and more. Once you’ve added this to Firefox, just open the devtools and switch to the React tab.
5. React Developer Tools for Chrome
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
In Chrome you will see a new tab called React in your Chrome DevTools. This shows you the root React components that were rendered on the page, as well as the sub-components that they ended up rendering.
6. Rekit
Rekit is a toolkit for building scalable, testable web applications with React, Redux and React-router. It’s an all-in-one solution for creating modern React apps.
Rekit helps you focus on business logic rather than dealing with massive libraries, patterns, configurations etc.
7. Reactide
Reactide is a cross-platform application that offers a custom simulator, making build-tool and server configuration unnecessary. Reactide brings development back to the days where opening a single file instantly renders the project in the browser.
With Reactide, developers can achieve the same simplicity with a single React JSX file while still utilising the power of React.
8. React Studio
React Studio is a excellent 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. Also this tool has built-in drawing tools, a mobile viewer, and even lets you import your files from Sketch.
9. React Slingshot
React Slingshot is second boilerplate on this list as this boilerplate lets you use React with Redux. It provides you access to features like hot reloading, automated testing, linting, automated production builds, and others.
React Slingshot uses 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.
10. React Belle
React Belle is a configurable React component library including extremely useful components such as Button, Card, DatePicker, Rating, Toggle and others.
Belle has components have customisable styles, support the ARIA accessibility standards, and look great on all devices. If you don’t want to configure your own styles where you can choose from three pre designed themes: Belle, Belle with default focus behaviour and Bootstrap.
