The Way I Think is the Good Way To Write React Code

So as you can see the title I am not going to say that these are the best ways to write code but I am going to give my experience and what all I have learnt along the way in developing React Web Applications.

1. Having Smaller Components

One mistake that I used to when I was newbie was to write a feature as one big piece of code.

So what is the problem ?

There is technically no problem in writing a component with 1000 lines of code in it. But what happens when you write a big component instead of smaller components is that we miss the opportunity to reuse the components. So let’s say if we break the big component into smaller components for a feature then what will happen is that you start seeing that at-least some of the small components are almost similar to other components in other features that you have , then you will get an idea that you can reuse some of it instead of writing it again and again. One way that you can do is to use the HOC (Higher-Order Components) pattern in our react development project.

Why to reuse?

We should always follow the DRY principle which is “Do Not Repeat Yourself” because one of the main reasons is that not only we reduce the number of lines in our codebase but also will increase the readability of our codebase and will it make it easier for anyone to understand it which will in turn help us in the long term development of our project and speed up our development process.

2. Having a Scoped CSS

I had first started my web development journey in college writing in Vue.js which is a similar framework which was developed by Evan You. Its a very simple framework which does not have much of deep learning curve compared to React or Angular. So one of the cool features they had is the scoped CSS that is the CSS that we writes is only available for the particular component and not shared to the others.

Why is Scoped CSS useful ?

So when I had started my react journey, I had not opted for scoped CSS and the problems that followed was that we always had to find a unique name for the CSS class. This might seem not to be a big problem for a single developer but when there is a team of developers we might not be able remember or communicate with each other all the CSS class names we have used in our components which will eventually lead to breaking of our peer developer components. So that’s when I understood why Scoped CSS is very important in large scale applications and I started using it in my react development journey.

Some ways that we can achieve Scoped CSS in our react applications are CSS Modules or Styled Components.

3. Using props wisely or having to face prop drilling

We should never go ahead and use props when we have to share between multiple components back and fro.

Why?

One of the main reason it makes it very difficult for us to handle props drilling and the other one is that we need to take care of the re-rendering of the components by ourselves. This is not ideal for a large scale project. There are lot of packages which will take care of all this and also help you to write code easier and neater.

Some of them are Redux Toolkit, Jotai, Rematch, Zustand, Recoil. But one of the best things that you can do is combine any one of those with React Query which helps in data fetching and caching the data making your application faster.

4. Having a good folder structure

During the initial planning for the react development , the first and foremost thing that we have to spend a lot of time is folder structure.

Why?

One of the main reasons is that if we have improper folder structure then it will be very difficult for us to track the code belongs to which feature and this will drag you down as it will be very difficult to reuse the components and will make it very difficult for any newcomer to understand the code that has been written.

So we always have to come up with a suitable folder structure which will fit our project needs. One of the places that you can refer is here (Credits to alan2207 ).

5. Having a script that can create that will create you all the folder structure required for the feature

I had worked on Angular so one of the good and cool feature that I have seen is that you can create a component using the command line.

Why?

The reason behind is that when we have a large group of developers working on a single react project then we would have our own ways of naming the features but if we have a script which has a common and a generic naming conventions that we have decided upon ourselves then it would make it easier for the newcomer or anyone to create a new feature or component without having any trouble by just running the custom scripts. This will also avoid the trouble of inconsistent names for the components and its folders.

6. Using TypeScript

Depending upon the size and the backend that we are using its better to go on using TypeScript during our React development.

Why?

JavaScipt is a weakly typed language that means it can automatically convert between types, which may lead to type-related bugs.So using typeScript it helps to catch type errors at compile-time, reducing runtime errors and improving code quality and also helps in code readability and its maintenance. If you are using a strongly typed language as your backend then its best to use TypeScript as it will help you to find errors easily.

7. Avoid using Inline Style CSS

We should never go ahead and use inline style CSS in our codebase even though its easier to do so and we should always stick to one way of doing our styles and not mix it all up.

Why?

One of the main reasons of not using inline styles is that it will make it very difficult to maintain and reuse our CSS. The other drawback of using multiple ways of defining our styles is that inline styles have higher specificity than styles defined in a stylesheet. This makes them hard to override with other CSS rules, which can cause unexpected behaviours when trying to apply new styles through classes or external stylesheets. The best practise is to have separate stylesheet for your component and use classnames to integrate your CSS to your component. The benefit of using classnames is that tomorrow when you have a similar component with the similar styles then you can reuse the classnames.

8. Avoid Technical Debt

Technical debt is those things that we know how to write it better and improve, but we set aside, and we take shortcuts to do it faster, convincing ourselves that we can address them later.

So what is the problem?

The problem that we face is not immediate but as the development goes on longer and longer we would find it very difficult to expand or write new code without breaking the old ones. The best way we can avoid is that whenever we write code we should always aim to do our best and understand why we are writing the particular piece of code. The other reason is that we would never come back again to rewrite the code and if we have reached a place where there requires a lot of refactoring to be done then we would feel little hesitant to do all that. So always make sure that we write the code that makes us feel happy and satisfied.

Last of all….Have fun developing and keep on learning and reading more and more. :)

If you liked this article, kindly click on that clap button & drop a comment below. Keep coding!!