20 essential parts of any large-scale React application
Over the years, I’ve been fortunate enough to work on some large-scale projects written in React. Today I will put together the important things to consider when creating a new project or expanding the functionality of any large-scale application. We’ll start with the very basics and then go deeper. So buckle up!
1. Project structure
When I started working with React, I intuitively stored files by type. But since I had the privilege of working on some large projects, I realized how difficult it can be to navigate files as the project gets bigger.
Take time to find the best project structure.
In most cases, I’ve found that the domain driven folder structure template scales well. For example, you should keep all your user-related files in one folder and your authentication-related files in another. This way you can easily find a specific file.
Here is my project structure. You can choose and customize the structure as you like.
2. Global repository
Having a global store is very important for any large scale ReactJS application. While there are many options, Redux is still a very good and safe option for large projects:
The Redux ecosystem is also rich enough to cover most use cases. Here are some redux helper libraries:
redux-persist: to save data locally;
redux-thunk: for asynchronous operations;
reselect: library of selectors to optimize storage access;
react-redux: Integration with React.
With the advent of redux-toolkit it has become much less verbose and clean.
3. Routing
React does not provide an official client-side routing library. But react-router-dom is by far the best choice for most projects:
In addition, there are some helper libraries that play well with the react-router ecosystem;
history: tracking the history of visited pages;
connected-react-router: helps to bind your route to redux state.
4. Multiple environments in the project
Any large project will have multiple environments, and as a developer, you need to know how to work with that. There can be multiple environments, for example:
-
development;
-
staging;
-
production.
To do this, you must maintain separate environment files. To achieve this goal, you can add .env files, .env.development, .env.staging, etc.
You can read more about .env in react at this link:
Working with multiple environments in React is a simple and elegant solution
5. Form processing
Forms are an essential part of almost any web application, and manually processing them in their pure form can be challenging.
For enterprise grade applications, you can use some popular libraries such as:
They will take care of most of your component’s boilerplate logic and provide validation and other cool functionality.
6. Styling
You can use plain old CSS for your component, but nowadays to style your components better you have to use sass:
If you want something more modern, you might like styled-components. In fact, this is my favorite library right now. This helps me to use styles as independent components and get rid of the className property:
7.UI Libraries
If you design all your components by hand, this is not necessary. Chances are, you should choose your component library wisely:
These are some of the options that you should look out for.
Also, for some specific use cases, you can use other libraries like react-loader-spinner or react-spinner for loading animation. Consider react-table for tables – it can be powerful in your case.
8. HTTP requests
Fetching data from a remote server is one of the most common tasks for dynamic applications in react. Axios is perfect for standard CRUD operations:
If you need something more powerful, you can use response-query with caching out of the box:
9. Documentation
For large projects, documentation is very important. There are many libraries for documenting, but in my opinion the simplest and best option is react-styleguidist:
You can find out more about her here:
Document your React apps properly. Step by step introduction Guidemedium.com
10. Localization
For large-scale international projects, it is often necessary to add localization. It is best to do this at the beginning of the project.
It works best with the react-i18next and i18next libraries. You can read more about it here:
Implement multilingual support in ReactIn. 6 easy steps. Medium.com
11. Animation library
Animation helps make your app more responsive and fun to use. The right amount of animation can go a long way. But don’t overdo it! You can create your own animations or use powerful libraries like react-awesome-detect, react-spring, or react-transition-group.
thank Alex chanI found out about another great library called Framer motion from his comment. That’s cool!
12. EsLint and Prettier
Getting all developers to follow the same coding style across large projects can be tricky. You can take advantage of the two awesome libraries eslint and prettier:
-
EsLint acts as a linter and static type checker for your project.
-
Prettier helps you achieve consistent coding style.
You can read more about them here:
14. Typescript
Customizing TypeScript can greatly increase your productivity and the productivity of your team.
It can take a while to get used to, but for large projects it’s a great investment. It can save you a lot of time in the future.
Even if you are currently working on a project using javascript, you can gradually add typescript to your project as typescript is a superset of javascript.
15. Analytics
For enterprise applications analytics – one of the most important parts. With it, you can track who is using your application and how:
-
react-ga: The official Google Analytics implementation for React.
16. Testing
It is very important for an application to have a certain test coverage. The testing environment must be properly configured. You get it automatically using the create-react-app. The most requested libraries for me are:
-
react-testing-library: for testing react components;
-
jest: for javascript unit testing;
-
cypress: e2e testing.
Here’s an introductory guide for you:
17. Redux Dev Tools
You should use redux-devtoolsto get the most out of any react-redux based project. These tools will help you debug your application faster and greatly improve your developer interactions.
If you are using redux-toolkit, it will automatically tune for you.
18. Utilities
In any project, we need to do some common operations, and in this we need the help of external libraries. Some of the most common ones are:
19. Docker
This is not a very important part, but you need to know well how to dockerize your react application. You can really benefit from dockerization.
Docker offers mobility and efficiency. So consider installing it in your project. You can read the following article to get an idea of how to dockerize your react application efficiently.
How I reduced the size of a Docker image from 1.43 GB to 22.4 MB in 5 easy steps
20. Continuous integration
In the world of automation, you don’t have to worry about deploying your application every time you change something.
Therefore, when you create an application, remember to set up continuous integration. In most cases, this is DevOps work, but knowing the process will help you understand the big picture.
Conclusion
Please let me know if I missed something. Thanks for reading this long post.
Find out the detailshow to get a Level Up in skills and salary or an in-demand profession from scratch by taking SkillFactory online courses with a 40% discount and a promotional code HABR, which will give another + 10% discount on training.
Other professions and courses
PROFESSION
COURSES
