Member-only story
6 Regrets I Have As a React Developer
Things I wish I did earlier
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
