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 best tools and resources for both beginners and experienced React developers.

1. Create React App

This incredible project is FB’s official start-kit for React, which lets you set up a modern web application by running one command with no build configurations (you don’t need to install and configure Webpack or Babel!). V.2 was recently released with full support for Babel 7, Webpack 4, new styling options, and more integrations into our favorite workflows.

The philosophy of the project is based on a few precepts, such as having only one build dependency: It uses Webpack, Babel, ESLint and more, but offers a cohesive experience while no configuration is required. At the end of the day, this is the quickest and most efficient way to get the job done for most use cases, especially for web-based applications.

facebook/create-react-app

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…github.com

2. React Boilerplate

This 22K starts library by Max Stoiber is a highly scalable, offline-first React setup with a strong emphasis on developer experience and application performance. Its DX orientation is felt in features like letting your saved changes to the CSS and JS be reflected without refreshing the page. Preserve application state even when you update something in the underlying code. It even automates the creation of components, containers, routes, selectors and sagas — and their tests — right from the CLI. And there’s more.

While not as fast to set & go as create-react-app, it’s a developer friendly and powerful alternative to those who favor their dev workflow and performance.

3. React PWA

An upgradable boilerplate for Progressive web applications (PWA) with server-side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

Using ReactPWA you can create Progressive web application with simple knowledge of React.JS. As we all know, Progressive Apps are not supported everywhere, but we have added support for Safari & Chrome so your application can work as standalone applications when added to the home screen or saved as a desktop app.

Atyantik/react-pwa

An upgradable boilerplate for Progressive web applications (PWA) with server-side rendering, build with SEO in mind and…github.com

4. 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.

5. 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.

6. 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.

7. React Slingshot

This wonderful project by Cory House is a React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and more.

Much like React Boilerplate, this starter-kit focuses on the developer experience for rapid development. Every time you hit “save”, changes are hot-reloaded and automated tests are being run.

The project even includes an example app so you can start working without having to read too much through the docs.

Also check out simple-react-app which is explained in this post.