React practices for Beginners

#webdev #beginners #productivity #codenewbie

React is arguably one of the most used Frameworks out there today and everyday people are opting this framework for its UI first approach. It's safe to say that the React Library and the whole ecosystem has matured over the years and is still growing. So here are some practices that you can opt and avoid while getting comfortable in the React bubble.

1. Importing Order ++

Code readability is something that every developer should take care of and importing everything in order can help a lot with this. Usually its a good practice to import in the following order:
Built-in
Internal
External

2. JSX without Parentheses --

Always wrap a component in parentheses if it crosses more than one line.

3. Ternary Operators ++

To reduce the amount of lines in your code, you can opt for Ternary operators if the condition involves two values.

4. Function inside Render --

The best practice would be to keep the logic inside the renderer to a bare minimum and avoid defining a function in there as well.

5. Fragment ++

In order to save the Virtual DOM from creating unnecessary nodes, always go for a Fragment instead of Div. Just remove div from <div> and you’re left with a fragment i.e <>

6. Reserved Prop Naming –

Avoid the use of DOM component prop names when you have to pass props between as these names might not be expected by the others.

#7. Memo ++
To help the compiler avoid unnecessary rendering, you can go with Memo and React.PureComponent. It will drastically improve the overall performance of your application.

8. CSS outside Javascript --

Most of the developers know that organizing CSS is harder than Javascript so its best to avoid the use of raw Javascript during the development phase of React Apps.

9. Template Literals ++

For a nice and clean code, try using template literals for large strings. It can also reduce the string concentration in your code.

10. Explicit return --

Prioritize writing beautiful and easy to understand code. Instead of adding {return}, you can use Javascript’s implicit return to format your code in a nice way.