• 原文 标 题 : 6 inquiries I Have As a React Developer
  • Original article by Mohammad Faisal
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • By Zhuzilin, Zenblo and Ivocin

React is a great tool for us to learn. It allows us to write our own code to get things done. But even as powerful as it is, it has its limitations.

For new developers, there are no clear guidelines as to which tool is best for a given scenario. This leaves every problem with a variety of solutions, and I’ve also fallen into the trap of adopting other best practices.

Today I’m going to share my top six things I should have started doing early in my React development journey.

1. The test

Testing has long been my weakness. I didn’t write test samples for the React component, and as expected, I often had to debug because of some type error.

But even though testing may seem scary, testing in React is pretty easy (for the most part).

It only takes two minutes to write a simple test, but this could save us a lot of time in the future. Here is an example of testing whether the Title component renders correctly:

it('checks if the title component is in the document'.() = > {
    expect(screen.getByText('Title')).toBeInTheDocument()
})
Copy the code

If you use the create-react-app command to create your React app, the command itself sets up the test suite for you correctly. Just start writing the test code as early as possible.

2. Use the correct folder structure

I think the biggest mistake I made when I was new to React was not using the right folder structure. I basically categorize the documents by their categories:

|-store
  |--actions
    |---UserAction.js
    |---ProductAction.js
    |---OrderAction.js
  |--reducers
    |---UserReducer.js
    |---ProductReducer.js
    |---OrderReducer.js
Copy the code

But as the project grew larger, I found it much more difficult to find files.

So I finally started sorting by file characteristics, meaning that all similar files would be in the same folder, such as:

|-store
  |--user
    |---UserAction.js
    |---UserReducer.js
  |--product    
    |---ProductAction.js
    |---ProductReducer.js
  |--order    
    |---OrderAction.js
    |---OrderReducer.js
Copy the code

Now it’s much easier for me to navigate the file system to the file I want to see!

3. Use styled components

I started out using CSS files to add styles to my components, but as time went on and the project grew, this became really confusing.

After a while I got to know and learn about SASS, and it was awesome! But even though it provides some syntactic sugar on top of the original CSS, it’s really hard to style my components, especially if I reuse certain styles — I always forget that I’ve already written a style in my stylesheet.

/ / JSX
<button className="btn-submit">

<button/>


// inside css files
.btn-submit {

}
Copy the code

Also, personally, I don’t like the className attribute of JSX.

After a while, I found a library called Styled – Components that could save me. Now I just have to define my styles for different components, and my code is much cleaner and much more comfortable and easy to read.

Also, this component supports the props property, which helps me greatly reduce the need for special styles under certain conditions.

const Button = styled.button` font-size: 1em; margin: 1em; Padding: 0.25 em 1 em; border-radius: 3px; `;
Copy the code

4. Switch to functional components early

At first, I learned React through class-Components. For a year or so, I only used class components.

When I switched to using function components, I saw their huge benefits. I think react-hooks are the best thing since React.

But now there is almost no reason for people to try using class-based components.

Now, I’m trying to rewrite all the components as function components.

The React function component is another way to define the React component. Both methods can be used to define a component, but a function component is simpler and easier to use than a class component. It returns an element directly

const Hello = () = > {
    return <div>Hello Word</div>
}
Copy the code

5. Use the form processing library

Processing forms is probably one of the most common features in any application, but when I spent a lot of time with the native onChange method trying to use it for form processing, I realized that processing data and validation using this feature is really painful!

Until I found outFormik 和 react-hook-form.

Using these two libraries makes form processing easier and cleaner. On top of that, form validation is currently extremely easy for me to do with a simple one or two sentence statement.

6. Use Linter and Formatter

For a long time, manually formatting my code was a hassle. I like my code to be neat and clean, so every time I need to:

  • Delete unused variables
  • Delete unused onesfunction
  • Delete unused onesimport
  • Use appropriate indentation

I had to do it manually until I met Eslint and Prettier. These two libraries make the painful task of formatting a lot easier!

So, these are the top six libraries I’d like to start using early in my career, what are your thoughts?

Thanks for reading, and have a beautiful day. Ow!

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.