Let's discuss some great tools that can make React developers more productive and improve the quality of their work.
Usually, when I start a new project, I use my own template for the tools that I added to this list. I also work with other tools like Material UI. I studied them, created several applications with their help and implemented a couple of small projects, after which I decided to share the results.
So let's take a look at the final list.
ESLint
ESLint has a lot to change for any JavaScript developer, including React fans. The service offers smart algorithms that quickly analyze the code, looking for possible bugs.
In addition, it allows you to automatically fix found problems without syntax changes.
To get started, I would recommend using the configuration suggested by the developers at Airbnb. It contains:
- Built-in support for the React library (for example, support for rules for using hooks).
- Focus on best practices.
ESLint is a must-have for any project, and the Airbnb configuration is one of my favorites. I added something to it, but 90% is left from the initial configuration.
Bit
Bit provides something React developers need as a collaboration platform. It allows teams to work together on individual components.
It is a command line utility that allows you to write reusable code. Bit is completely open source and this is one of the reasons for its popularity.
Most of the functionality is related to the creation of atomic components, so they can be easily shared with other developers. In addition, there is also the ability to check the dependencies of components, testing them separately from the main project.
Create React App
As a React developer, you know very well how long it takes to start a new project. To save time, Facebook developers suggested Create React App .
This is an initial "builder" that allows you to focus on developing, not customizing, React. All you need to do is run the npx create-react-app my-app command. Then you have a fully configured application for the project.
Create React App will greatly increase your efficiency if you are working as a React freelancer for multiple clients at the same time.
React Cosmos
React Cosmos is a developer environment designed to create scalable, high-quality user interfaces.
The service makes it possible to easily engage in prototyping and testing of individual interface components. In addition, you can iterate with it without fear of breaking your code. It facilitates the debugging process by isolating the components.
React Cosmos is best used for working with enterprise-grade applications. Dividing a project into small, reusable components makes it possible to write quality code that is easy to maintain.
React Toolbox
At the beginning of this article, I mentioned that I use Material UI for most projects. There is a reason for that: I love Material Design and Material UI is what suits me completely.
But there are also alternatives. One of them is React Toolbox . This is a collection of commonly used components developed using Material Design. It uses CSS Modules for more flexibility.
At the time of this writing, React Toolbox includes 28 components. Some of them are Application Drawer, Date Picker, Switcher, and Snack Bar.
React Bootstrap
Mobile-friendly website is a modern standard. Users expect your site to perform well on any device. Sites with responsive design make even search engines stand out.
Many developers use Bootstrap to create responsive, scalable websites with professional designs. The problem is Bootstrap comes with native components that are not integrated with React.
The solution is the open source React Bootstrap package . All of its Bootstrap components have been modified specifically for React developers.
React Slingshot
Want to speed up your React app development? Try to evaluate React Slingshot . It is a template that combines React, Redux and Babel.
The most important feature of Slingshot that sets it apart from other tools is its fast feedback. This feature automates the linting, unit tests, and hot reload process every time the application is updated. This way, you can focus on business logic rather than extraneous tasks.
Reactide
They say a developer is as good as his editor is. Maybe this is not entirely true, but the editor is very helpful in our work. Personally, I am a big fan of JetBrains and WebStorm. My choice is IDE, but I try alternatives from time to time.
For example, I found Reactide is an IDE for React. I was very surprised by this find and tried the tool.
It turned out that it has interesting features. For example, you can render the components of your project right in the IDE. There is also a built-in Node.js server that is integrated with the browser simulator.
An interesting tool, although I don't think I will completely switch to it. But this is a good option for those who are working with or learning React and do not want to run into problems even during the configuration phase.
React Testing Library
"Tests first!" - what I repeat constantly.
In other words, having a set of testing tools is important. The React Testing Library is a small library. It allows you to test your React code without too much trouble. The library is easy to use and adds capabilities to standard libraries like react-dom and react-dom / test-utils.
Great documentation with some good examples will get you up and running quickly.
Storybook
Storybook provides an interactive development environment in which you can create new components, test them, or select existing components from a library.
Storybook is flexible enough to work with any major JavaScript framework. For example React, Vue.js, Angular, Svelte, Marko and even raw HTML.
The best thing about Storybook is that it comes with various add-ons. Here are a number of additions that I find interesting:
- google-analytics (adds Google Analytics support for components);
- jest ;
- storyshots (checking components using snapshots);
- viewport (change markup for responsive components)
I hope you will appreciate this list. If you use other cool tools that are not mentioned in the text, write about them in the comments!