If you have already worked with ReactJS before, you know that there are a lot of tools and resources making our life easier as front-end developers. However, not everyone is working with the same tools or know all the great resources out there that can boost a ReactJS project.
Hence, I've decided to create this post in order to share with you my top tools and resources that I use every time I'm working on ReactJS projects.
🔖Bookmark this post and share it with your developer friends! I hope you will enjoy it.
In case you want to learn more about ReactJS and improve your Javascript skills, have a look at my ReactJS online course here. No prior experience in ReactJS needed. You will learn how to build a real-world application step-by-step using modern ReactJS.
Table of Contents
- create-react-app
- React Developer Tools
- styled-components
- Storybook
- CodeSandbox
- The Most Definite React Hooks Cheat Sheet
- React Router
- Redux
- Jest
- Enzyme
- GraphQL
create-react-app
This is my go-to command every time I'm starting a new ReactJS project. It's quick and easy. No build configuration needed. With only one command line, you are up and running to start working on your web application.
npx create-react-app my-app
You don’t need to install or configure any tools like webpack or Babel as they are already preconfigured and hidden. All you have to do is focus on your code.
React Developer Tools
This is one of the most known tools in this list when it comes to debugging a React application. React DevTools is a built-in extension for Chrome and Firefox browsers. It works for React and React Native.
If you haven't installed it yet, I highly recommend doing so. It will ease your life at developing React application.
styled-components
If you want to style your React components with no stress, this is the library you must use. There are a lot of other ways and libraries to style your app, but styled-components is the one I recommend. Why?
It integrates smoothly into your React components as it uses ES6 and CSS to style them with no hassle. Plus, it is a popular library with great documentation. Styling React components has never been so easy thanks to this awesome library.
Storybook
Have you ever wanted to build your React components without being disturbed by your application logic and the surrounding components and stuff?
If yes, Storybook is the solution you need. It is a user interface development environment and playground for UI components. Thanks to this tool you can create components independently and showcase components interactively in an isolated development environment. It works outside your main React application so that you do not have to worry about app-specific dependencies and requirements.
Plus, it comes with a bunch of addons to enable advanced functionality and bring your development experience to a whole new level.
CodeSandbox
CodeSandbox is an online code editor that lets you prototype and build web applications from the comfort of your browser.
It comes with a bunch of templates to use in order to easily and quickly set up a modern web application with React, Angular, Vue, Node, and much more.
Furthermore, there are a lot of public CodeSandbox projects and examples shared by the community. Have a look at it as there is a ton of great stuff out there.
The Most Definite React Hooks Cheat Sheet
This one is from me. I've written a visual cheatsheet for you to master React Hooks. Actually, it is more than just a basic single-page cheat sheet. Indeed, I've included some real-world examples for each individual React hooks so that you can really understand how and where to use them. Have a look at it here and let me know what you think.
Myself, I'm using the cheat sheet on a daily basis when I need to refresh my memory on how to use a specific React hook. I highly suggest you download the PDF version so that you can have it wherever and whenever you need it.
React Router
In single-page applications (SPA), we are using the same HTML page to render differently based on the navigation. React does not come with a built-in router, but we can easily achieve routing with the react-router library.
React Router conditionally renders certain components to display depending on the route being used in the URL. So, if you want to easily navigate around a React app, forget about the traditional anchor tags and add React Router to your project.
This is a must-have library for any of your React single-page applications.
Redux
In a ReactJS application, there is a bunch of methods to handle state. However, when you are working on a large application with a complex state logic, I highly suggest you use the Redux library for React.
Redux is a state container and is designed to work well with React's component model. You just need to define how to extract the values your component needs from Redux, and your component receives them as props.
It is making it easy to centralize your application's state and logic.
Jest
Jest is a testing framework that works pretty well with React. Indeed, it is included when creating a React app with the create-react-app command.
Jest works out of the box and does not need any configuration. It has a feature-rich API that makes testing a piece of cake. It is commonly used as a test runner and also to make assertions in test cases.
Enzyme
Enzyme can be used within Jest to render components, to access the DOM, and to make assertions based on the DOM. Enzyme works perfectly with Jest. It can cover unit and integration tests, whereas Jest is mainly used for snapshot tests.
Along with Jest, it makes it effortless to test React components. It is a testing library by Airbnb which you should highly consider adding to your next React projects.
GraphQL
In all front-end applications, you need to get data from external resources through API calls. GraphQL does just that. This is a query language to make requests to APIs a breeze. It replaces REST as an API design paradigm and is becoming the new standard for exposing the data and functionality of a server.
By writing GraphQL queries, you are only requesting the data you need from your API. It makes your code much easier to maintain and can speed up your application development.
Furthermore, an interesting feature from GraphQL which is worth mentioning is the ability to fetch data from multiple resources in a single request.
So, if you are still using REST for fetching data from your API, you should have a look at GraphQL.
Conclusion
If you liked this post, do not forget to bookmark it and share it with your friends. If you have any questions, feel free to comment below.
Top comments (6)
I'm not sure how I feel about Redux. On the one hand, it does allow me to share the parts of my app's state with whichever component needs it, but also, to add a new property to the state, I have to add a lot of code: set up the new property in the initial state, add actions, action creators and finally, the reducer. Only then can I add usual wire-up to connect() the component to the state. It seems like a lot hassle. Why do people say it is better for enterprise level apps, when you need to app more code for it to work?
Hello there! @gdangelo is completely right! From my experience Redux can do the work! Let's imagine React form with dozens of fields eg. 80, with some crazy business logic where changing one field have impact on state of several other components. Doing this kind of app in 'pure' React would be a problematic. Thanks to Redux, you can retrieve value direct from Store without concern of components hierarchy.
Thanks. The application I'm working on is not that big so maybe that is why it feels a bit cumbersome. I do agree that Redux CAN do the work.
Hey @OmarC! Thanks for your comment. Redux is a great tool when you have a large application that needs to handle complex state logic. In case, you are working on a smaller application, there is a bunch of other alternatives like using the new useReducer hook combine with the React Context.
Where's Ant Design? It has lots of pre-made components (of enterprise quality) that are fully customizable.
Hey @Aleksandr! Thanks for sharing. I'm aware that there is a lot of tools not included in this post, but I wanted to share the ones I'm using the most with my ReactJS projects. Feel free to include in the comments other tools you think could benefit others.
Greg