While writing this article, I was thinking about Dua Lipa song, I have new rules I count them :D . So these are some of the best practices rules that can help you to use effeciently React js .
1 . Don’t use div unless you need to render multiple components then use this <> instead.
2 . Don’t Repeat Yourself : Avoid writing code that run the same logic. Maintaining DRY rule is very important to avoid unesserary maintenance time.
3. Code should be self-explanatory and empty of magic numbers: constants and components with good naming choice will do the task. Having a lot of comments in your code is usually a sign of smelly code. (Smelly cat, smelly cat who has feed you …).
4. Try to avoid deep nesting in your file scructure unless you have a good reason to do that. You can either choose to group your files with type or other convinient ways for you. Having deep nesting in your files structure make it difficult to keep up with the imports of the relative paths when you rename or remove a file.
5. Maybe this is the most important React rule: Using functional programing. Functional components are a blessing. Thanks to React hooks, you can also use functional components for stateful components as well. This means more readibility and less code typing.
6. Using Props desctructuring feature is very important for the readability as well. No need to use props.myAttribute to access myAttribute, you can directly use myAttribute.
7. Use CSS in Js when you have a large project, it just make life easier. There are libraries that promote this concept such as: EmotionJs, StyledComponent, Glamorous.
8. Use spread operator “…” when you need to include all elements from an object or array in a list of some kind. You can see usage examples.
9. Use && and ternary operator (?:) for dynamic rendering instead of inline if else. These operators can simplify the readiblity of complex code if they are used wisely.
