React is a lightweight JavaScript library created by Facebook that has become extremely popular in recent years. React allows you to build beautiful UIs for your web apps using isolated and reusable building blocks called components.
React also has a huge eco-system largely created by third-party developers, including tools, IDEs, component libraries, extensions for code editors, browsers, boilerplates and more.
On the 20th July 2018, I had posted 10 Great Tools for React Development (you can see the original post here), so for this post, I’ve gone back and collected ten more tools and resources for beginners and experienced React developers.
1. Facebook’s Create React App
Really didn’t know why I didn’t add this to the first round of React post on SomeWhat Creative, but any way this React resource takes some time to set-up an environment for a new React project with all the requirements you may need.
To help, Facebook released this 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 optimises your app for production. It works with zero configuration and you can use it with any backend language.
2. React Bits
React Bits is an 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.
3. React Cosmos
React Cosmos is a developer tool that helps you build reusable React components. React Cosmos scans your React projects for components and let’s you render them with any combination of props, context and state.
React Cosmos 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 realtime.
4. React Proto
React Proto aims to give developers and designers the tools necessary for creating clean, organized, and intentional code from the beginning of the development process. Defining your components, their hierarchy, and how they interact via state and props, can alleviate the need for refactoring, and unnecessary code as your application scales.
5. Nuclide
Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.
6. Reactotron
Inspecting apps is now as easy as it was always meant to be. Effortlessly inspect React JS and React Native mobile apps with Reactotron, a free desktop application by Infinite Red.
7. Reacto
Reacto is a IDE for React.js. It is not in any way a replacement tool but more something that could be an alternative for anyone out there. Reacto is still a work in progress. That means it’s extremely likely that you’ll encounter issues. Always consider it.
8. Electrode
Electrode is a platform for building small to large scale universal ReactJS/NodeJS web applications with a standardized structure, best practices, and modern technologies baked in. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud providers—so you can focus on what makes your app unique
9. Bit
Bt works with Git and NPM to improve the workflow around code-sharing. It detects and isolates components from existing source code and organises components in visual catalogs for your team to choose from. It makes all your components available to discover, develop and sync from any project in your codebase.
While code sharing speeds your development, it can also generate a lot of overhead when you have to split your repositories and work hard to make changes between them. Bit eliminates this overhead by making it painless to share reusable code, collaborate on shared components and sync changes from multiple repositories and projects.
10. React Developer Tools
React Developer Tools lets you inspect the React component hierarchy, including component props and state.It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).