_To read more articles like this, visit my blog
_

React is a great tool to learn. It allows us to do things in our own way. It's both powerful and limiting at the same time.

For new developers, there’s no clear guideline on which tool is best for which use case, and as a result there are multiple solutions to every problem. And sure enough, I also fell into this mistake and was late to adopt some best practices.

Today I am sharing the top 6 things that I should have started doing earlier in my React development journey.

1. Testing

For a long time testing was my weakness. I didn’t write tests for my components and, as expected, often I had to debug typos.

But as daunting as it may look, testing in React is really easy (For most use-cases).

Adding a very basic test that takes two minutes to write can save hours in the long run. Here’s a test that checks if the Title component will render correctly:

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

If you are using create-react-app you already have the testing setup in place. Just start writing tests as much (and as early) as possible.

2. Using the Correct Folder Structure

I think as a beginner in React my biggest mistake was not using the correct folder structure. Essentially what I did was group files according to their type:

    |-store

      |--actions
        |---UserAction.js
        |---ProductAction.js
        |---OrderAction.js

      |--reducers
        |---UserReducer.js
        |---ProductReducer.js
        |---OrderReducer.js

But as the project grew bigger it was getting tougher to find any file.

So finally I started to organize my files by feature. That means all the similar files are now put in the same folder:

    |-store

      |--user
        |---UserAction.js
        |---UserReducer.js

      |--product    
        |---ProductAction.js
        |---ProductReducer.js

      |--order    
        |---OrderAction.js
        |---OrderReducer.js

Now it’s much easier for me to navigate through the file system to find anything.

3. Using Styled Components

I started using css files at the beginning to style my components but as time went on it got really messy.

After some time I learned sass and it was great! But although it provided some syntactic sugar over vanilla css it was really hard to style any component. Reusing any style was especially hard as I often forgot that a particular style was already there.

// inside jsx
<button className="btn-submit">

<button/>


// inside css files
.btn-submit {

}

Also, personally, I don’t like using className property inside JSX.

After some time I found a library called styled-components which rescued for me. Now I just declare my styles as separate components and my code is more clean and easy to the eye.

Also styled-components accepts props, which helped me to reduce conditional styling in my components by a lot!

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

4. Switching to Functional Components Early

In the beginning, I was introduced to React through class-components and for around a year I only worked with class components.

After I switched to functional components their enormous benefits became clear. I think react-hooks is the single best thing that’s happened since React has been in the picture.

There are very few reasons that anyone in 2021 would try to use class-based components.

Now I’m trying to rewrite all my components to functional components.

5. Using a Form Handling Library

The handling form is maybe one of the most common features of any application. I used the vanilla onChange method for a good amount of time. Handling data and validation was big pain!

Until I discovered Formik and react-hook-form

Using these two libraries, form handling has become so much easier and cleaner. On top of that, form validation is now declarative and easy for me.

6. Using a Linter and Formatter

For a long time formatting my code manually was a great hassle. I like my code tidy and clean so every time I needed to:

• Remove an unused variable

• Remove an unused function

• Remove unused imports

• Use proper indentation

I had to do it manually. Until I came across Eslint and Prettier — two libraries that make the painful work of formatting easy!

So, those are the top 6 libraries I wish I started using earlier in my career. What about you?

Related Libraries:

Testing: react-testing-library, jest
Styling: styled-components
Form: react-hook-form
Tools: EsLint and Prettier

Have a Great Day! Here is another piece if you liked this one :D

Get in touch with me via LinkedIn or my Personal Website.