Today we are going to discuss some great and promising tools to improve React developers` productivity and enhance the overall development workflow.
Usually when I need to start working on a new project (at least for personal projects, at work is a bit different) I use my own template which comes with the tools that I love, some of which made it to this list, but also with tools that I’m just ok with, like Material UI. After doing some research and building some sample apps and small projects with some other popular tools I decided to share some of my findings with the rest of you through this article.
Without further ado, let’s have a look at these hand-picked React productivity tools.
1. ESLint
ESLint can be a real game-changer for any JavaScript developer, including React lovers. Basically, it is packed with intelligent algorithms that can quickly analyze your code for possible bugs.
It even offers us the ability to automatically fix any issues without breaking the syntax.
To get started, I recommend using the ESLint configuration created by the developers at Airbnb. Some of its major plus points include:-
- Built-in support for React library (such as linting rules for hooks).
- Focus on the best practices.
This tool is a must-have for any project, and the Airbnb configuration is among my favorites, I do however add some personal touch to it, but 90% comes from their package.
2. Bit
Bit has introduced a much-needed collaborative platform for React developers. It enables teams to work together on individual components.
It’s nothing but a command-line utility that enables us to write reusable code. Bit is completely open-source and that’s the main reason behind its massive popularity.
Most of its features are focused on building atomic components. So that they can easily be shared with others. You can even validate whether a component has any dependency or not by testing it separately from the project.
3. Create React App
As a React developer, you might have noticed how time-consuming it is to set up a new React project. So to minimize this issue, Facebook developers came up with an outstanding “Create React App” project.
It’s like a starter kit that helps you stay focused on coding your application instead of configuring the React instance. You just need to execute npx create-react-app my-app and that’s it. A fully configured app is now available for you to build upon your next project.
It can significantly boost your efficiency if you work as a freelance React developer for multiple clients.
4. React Cosmos
React Cosmos is a development environment focused on building scalable, high-quality user interfaces by allowing us to prototype, test, and iterate quickly on each component of our application.
It makes it easy to prototype a single component. You can then iterate it without breaking any code. It even eases the process of debugging an issue by isolating components.
It is more suitable when you work with enterprise-level applications. The reason is that it helps us maintain high-quality code by dividing the project into small reusable components.
5. React Toolbox
When I started the post I mentioned that I use Material UI for most of my projects, and it’s for a reason, I love Material Design, and Material UI looked like the way to go, however, there are other alternatives, like React Toolbox. Which is a collection of frequently used components that are all designed with Material Design.
It uses concepts like CSS Modules to have better flexibility.
At the time of writing this article, React Toolbox is packed with 28 components. Some of them include “App Bar”, “Date Picker”, “Switch”, and “Snackbar”.
6. React Bootstrap
Having a mobile-friendly website is like a standard these days. People expect that your website will work seamlessly on any device. Even search engines prefer a responsive website in their result pages.
Many developers rely on Bootstrap to design responsive, scalable, and professional-looking websites. But, the problem is that Bootstrap comes with its own components that are not integrated with React.
So, to fill this gap we have an open-source package called “React Bootstrap". It has all Bootstrap components that are specifically rebuilt for React developers.
7. React Slingshot
Want to speed up React application development?
Just have a look at React Slingshot. It is a boilerplate that consists of React, Redux, and Babel.
The most important feature of Slingshot that makes it stand out from the rest of the tools is Rapid feedback. Basically, it automates the process of linting, unit tests, and hot reload whenever you update your app.
This way you can spend more time coding actual business logic instead of doing non-productive tasks.
8. Reactide
A developer is as good as its editor, or maybe not, but the editor does help a lot with our daily development activities. I’m a big fan of Jetbrains, and WebStorm is my IDE of choice, however from time to time I try a few things as I did with VS Code, and now I wanted to look what other options are out there.
Something interesting which I found is Reactide, which is an IDE built for React. It really surprised me to find an IDE built for it, sure I found many plugging for other IDEs or text editors, but a full-blown IDE got my attention, so I gave it a try.
It has some interesting features, for example, you can visualize your project’s components right inside this IDE. It also has a built-in Node.js server that is integrated with a browser simulator. However interesting, I won’t probably switch, but I think it’s a good alternative to keep in mind, especially if you only do React or if you want to learn React and you want to remove away some of the hurdles of tuning your code editor to even get started.
9. React Testing Library
Testing, testing, testing. Testing first, it’s what I always say! And having the right tools for testing is important. React Testing Library is a small library that allows you to test your React code in a way that encourages best practices. It is simple to use and extends on top of standard libraries like react-dom and react-dom/test-utils.
The documentation is good, and they provided some good examples to get you started.
10. Storybook
Storybook provides an interactive development environment where you can create new components, test them, or pick existing ones from the available component library.
It is flexible enough to work with any major JavaScript frontend framework. For example, you can use it with React, Vue.js, Angular, Svelte, Marko, and even raw HTML.
The best thing about Storybook is that it comes with a variety of addons. Some of its addons that I find interesting are as follows:-
- google-analytics (add support for support Google Analytics in components)
- jest (unit testing)
- storyshots (test components using snapshots)
- viewport (change layouts for responsive components)
Storybook has a great design and is really promising, I’d love to build more apps using this library in the future.
Conclusion
React is one of the most popular front-end frameworks today, and because of its popularity, there’s a huge number of projects which go around React and building apps with React.
When choosing which tools you are going to use for your new project is very easy to just use what you know, but sometimes it’s good to explore which other options exist, if you are like me, you’ll be surprised by the number of options, high quality and great options out there.
I hope you like this list, if you have any suggestions or favorites, please let me know, I’d be more than happy to try it out.
Thanks for reading!
If you like the story, please don't forget to subscribe to our free weekly newsletter so we can stay connected: https://livecodestream.dev/subscribe
Top comments (1)
Good job bro. I am considering storybook, bit and eslint