[BASICS] REACT.JS BEST PRACTICES IN PLAIN ENGLISH.

1 . Component name must start with capitals letters.

2 . All the component must be small and function-specific.

3 . All the component must have small description

/** * * Author: {...} * Description: {...} * Dependencies: {...} * **/ const SampleComponent = () => { return ( <div> Sample Component ! </div>  ); } export default SampleComponent; 

4 . All code must follow es6 coding standards.

5 . For variables that are NOT constants or constructors, multi-word variables and functions SHOULD be lowerCamelCased.

6 . Constants:- Pre-defined constants SHOULD be all-uppercase, and words separated by underscores: UPPER_UNDERSCORED.

7 . Typeof:- In type comparisons, the value tested MUST NOT be wrapped in parenthesis and use triple equals to.

if (typeof myVariable === 'string') { // ... } 

8 . In simple condition, Ternary operator should be used instead of if else statement.

// If-else Statement if(condition) { //... } else { //... } // Ternary operator let myVariable = condition ? exprIfTrue : exprIfFalse 

9 . fragments should be used instead of container div.

 render() { return ( <Fragment> Some text. <h2>A heading</h2>  More text. <h2>Another heading</h2>  Even more text. </Fragment>  ); } 

10 . All files related to any one component should be in a single folder

11 . Functional components should be favored if we do not need to make use of React state.

12 . Anonymous functions should not be used as handlers.

13 . Inline styles should not be used inside component.

14 . For a component to hide itself return null from render.

15 . Higher Order Components should be used for cross-cutting concerns.

16 . Prefer state initialization in class member variable declaration over constructor

17 . Index should not be used as a key

18 . Short-Circuit evaluation should be used in jsx

// Avoid const sampleComponent = () => { return isTrue ? <p>True!</p> : null }; // Recommended: short-circuit evaluation const sampleComponent = () => { return isTrue && <p>True!</p> }; 

Would love to hear from you guys if you could add up practices in my above list.
Comment down below 👇