DEV Community

Cover image for React practices for Beginners
Haris#
Haris#

Posted on

React practices for Beginners

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.

Conclusion

So this wraps up my personal picks for the best Practices for beginners starting out with React Framework. Let me know your favorites!

Happy Developing!

Discussion (5)

Collapse
nayaabh profile image
Abhilash Nayak

Nice collection. However simple code examples for each of these could have made it more beginner friendly.

Collapse
spandyboss profile image
SpandyBoss

Nice and well explained.
Good post
Keep it up !
Good luck

Collapse
serwer20 profile image
pmioduszewski

yes.

Collapse
gurjeetsinghvirdee profile image
Gurjeet Singh Virdee

Well Explained🚀

Collapse
carxl profile image
Andrés Parra

Great post. Maybe show basic examples in each topic.