Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the skills of the scalable React project". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Learn how to organize states between local and global states

React is a library that manages UI based on the current state of UI. As a developer, your job is to organize the locations that make up the state of your application. Some developers prefer to keep each data in redux store to track all available status. But do you really need to send an action to your status manager in order to open or close a simple drop-down menu?

Instead of using Redux to track every state within your application, keep some state locally to avoid overdesigning your application.

Based on experience, you can ask the following questions:

Does the rest of the application care about this data?

Do you need to be able to create other derived data based on this raw data?

Do you use the same data to drive multiple components?

Is it valuable for you to be able to restore this state to a given point in time?

Do you want to cache data (for example, using an existing state instead of a rerequest)?

Do you want to maintain the consistency of this data when hot-reloading UI components (you may lose their internal state during exchange)?

Components that use local states are more independent and predictable.

two。 Learn the benefits of testing and do it from the start

The problem with writing automated tests is that, to a certain extent, it is impossible not to spend a lot of time and resources manually testing your React project.

When you start a project, because your code base is relatively small, it's easy to find reasons to skip writing test code. If you have only 5 to 10 components in your React application, writing automation does feel like a chore with no obvious benefits. But when you have more than 50 components and you have multiple high-level components, it can take a whole day to manually test your project, and even so, bug may sneak in unnoticed.

Yes, writing test code will help you make your code more modularized. it will help you find errors faster and prevent crashes in production. However, when manual tests can no longer verify that the code is working as expected, the ultimate goal of automated testing is to help you extend the project.

But you can't suddenly write test code when you're not used to it, which is why you have to start from scratch. If you don't know where to start, start with integration testing, because the most important part of testing is to verify that your components are working properly.

3. Use tools to help you expand

Usually, you don't need to add many tools to your React project at the beginning of the application. But since we are talking about extending React applications to a large code base, what I want to say is that you need to use all the good tools to help you.

To provide consistent code patterns among team members and to reduce syntax errors, you need to use Prettier and ESLint. Powerful utility libraries such as React Router, date-fns, and response-hook-form are all good choices.

Adding TypeScript and Redux may be delayed until your application is prone to type errors, and parts of your application need to use the same state repeatedly, and you need to make it available globally.

It is not necessary to implement state management from the beginning, because React itself has come up with the best way to manage state.

Bit (Github) to manage and share your components as independent components. This means that you test and render each component in isolation. This will make it easier to maintain and reuse in the future.

You can also use Next.js instead of Create React App to start your project.

These tools will help you maintain a large React code base, but be aware that each tool you add increases the complexity of your project. Please do some research before you decide to use this tool.

4. Organize project files well

One of the best tips I've learned in extending React applications is that organizing your project files and naming them can speed up your progress. Some developers prefer to write index.js as the master file in the component directory, as follows:

This seems reasonable because when you import the component into another file, the statement will look like this:

Import Button from'.. / components/Button'

But consider opening them side by side in the code editor:

To be honest, all these index.js will confuse anyone. But if you rename those index.js files to component names, your import statements will look a little ugly.

Import Button from'.. / components/Button/Button'

My team finally decided that there should be both a file named after the component and an index.js file that exported the component.

We also put the CSS and unit test files in the component directory. In this way, each component directory can become a separate component.

5. Build your UI / logical component library

You should not wait until your project is very large to build a component library, you can share components anytime, anywhere. Whenever a new component is built, use Bit to track it and share it with your team's collection of components on Bit.dev, or on your own server.

As mentioned earlier, stand-alone components are easy to maintain and easy to reuse when sharing and recording documents.

Component libraries are not only applicable to UI components. Logic should also be included-in the case of React, as a custom hook (in general).

6. Use hooks to separate logic from components

As the project evolves, you may notice that the logic of some of your components seems to be reused. In order to share the logic of the component, you need to write a custom hook.

Hooks are functions that simply return certain values to their callers, which is why you can implement the same pattern to reuse logic between components.

This is the end of the content of "what are the skills of the Extensible React Project". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.