React coding Standards and Practices

The best coding practices and standards for react web development. These are not hard and fast rules but common practices to write clean and consistent code. Most of them hold good for all frontend frameworks and not really specific to React.

Here are some coding practices which you can follow in your react project:

Folderize Your Components (all related files in one folder). Below is the folder structure with naming conventions to be used.

Let's start with the naming conventions

1. React UI component’s names should be PascalCase.

Example: LoginScreen.js

2. All other helper files should be camelCase. (non-component files)

Example: commonUtils.js

3. All the folder names should be camelCase. Example: components

4. CSS files should be named the same as the component PascalCase. Global CSS which applies to all components should be placed in global.css and should be named in camelCase

Example: LoginScreen.css(for components), global.css(for global styles)

5. CSS class names should use a standard naming convention (personally use kebab-case because it's used by most of the CSS framework classes) or any standard practice. Document with several conventions: CSS naming conventions.

6. Test files should be named the same as the component or non-component file.

 Example: LoginScreen.test.js
 commonUtils.test.js

Some common basic rules to be kept in mind to write clean code

1. Use the DRY principle (Don't repeat yourself).
2. Create multiple files instead of writing a big file. (Componentization of code: fix to small functionality for each file)
3. Place all your CSS files in one common folder.
4. Avoid Inline CSS as and when possible (a CSS class should be created when there are more than 2 CSS attributes).
5. Use a linter to make your code easier to review. Follow strict linting rules. This in turn helps you write clean, consistent code.
6. Review your code before creating a pull request.
7. Split your code into multiple smaller functions. Each with a single responsibility.
8. Create many utility files that can help you remove duplicate code from multiple files.
9. Separate all your service calls into a separate file. If it’s a big project try to split the services into multiple files. (name convention module_name.service.js).
10. Name your files logically according to the job that they perform.
11. Clean code is self-commenting(using the right variable names and function names). Use comments only to explain complex functions.
12. Always write test cases for your code. Keep tests files in sync with the files they are testing.
13. Destructuring your props is a good way to help make your coder cleaner and more maintainable.
    For example (async function authenticate({ user_id, token }) {})
14. Use useReducer when useState becomes complex.
15. Putting imports in an order
    a. React import
    b. Library imports (Alphabetical order)
    c. Absolute imports from the project (Alphabetical order)
    d. Relative imports (Alphabetical order)
    e. Import * as
    f. Import ‘./<some file>.<some extension>
    Each kind should be separated by an empty line. This makes your imports clean and easy to understand for all the components, 3rd-party libraries, and etc.
16. Use index.js for each folder to export (Avoid repeating names on the imports)

These are some of the common practices and standards which will make your code more readable and cleaner. Remember writing unit tests is not just a good idea, it become almost mandatory. Writing testcase increases your coding time but helps you provide a bug free code.

Bye-bye