Some best practice for beginner react developer

React is a javascript library which introduced in 2013. It's a library for user interface or UI components design. There are so many ways to implement a react application whereas there is some best practice to use this library effectively. Here are some of the best practices of React that a beginner should know before creating a react application.

1. Build small components and function-specific

It's not ideal to make components large and make your code more complex rather than one should try to keep components smaller so that they can be easily handled by the developer himself and other developers who might be work on this project later. Every component should correspond to one function. Then the application becomes easier to maintain and test. A smaller component is easy to optimize for the best performance. You can create as many components as you want so that you can find a perfect end result.

2. Make your component reusable

Reusability is one of the core functionality of React that every developer should maintain properly. If you make a small component it will be easier and effective to reuse your component wherever you want. You don't need to create the same component again and again. But in the case of a large component, you might not able to reuse your component because of its complexity. Your components should be abstract enough, but shouldn’t be overly complex.

3. DRY-Don’t repeat yourself

In programming, it's a common rule that a good developer should not repeat the same code again and again. For better and optimized performance one should not repeat code when building an application. If you are rewriting the same code again and again and you feel there is a scope that you can remove the duplication by using a common function or simply rewriting the code in a simple manner to make your code more concise. It's a concept called DRY in the programming world. Every programmer should maintain this for creating better results out of React library.

4. CSS in JavaScript

It's not always best practice to put all the CSS styles in a single SCSS file. Because, when your project scales up, this solution may not be feasible. Sometimes you need to use CSS on your JS file also. There are so many libraries you can use for CSS such as styled-components and styled-jsx and many more. You need to install them in your application first and then use them precisely on components.

5. Name the component after its functionality

The naming of your component is very important to understand your application effectively and also for the purpose of reusability. After a while, you need to go through the whole code if you need to understand what functionality this component contains. If you name your component after the function or functionality you using on this particular component it will be easier and to reuse and also useful to the community.

6. Use necessary comments

Use comments in your code when necessary for understanding and keep your code visually clutter-free. Other team members and developers could easily understand your code. It is also important for reusability also so that after a while you can easily understand and reuse your code whenever you want. But you should avoid unnecessary comment which will make your code complex and will create difficulties others to understand your code.

7. Use capitals for naming components

Using an uppercase letter at the beginning of a component name is important so that JSX can differentiate between Html tags and your component name. For instance, you’ll name components as SelectButton instead of selectbutton, or Menu instead of menu. You can use lowercase letters but it will reduce the option of reusability of your code in your application and will confuse you. So use uppercase at the beginning of the component name is the best practice.

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

All files including CSS files of a component should be in a single folder so that the whole project maintains a structure. For the case of a small component, you cant avoid creating any folder but for the large component, you need to accommodate all files related to this component in a single folder. This will create a hierarchy which easily understandable and maintainable for you and others in your community.

8. Use snippet libraries

You can use the code snippets library to easily construct a particular syntax. And they also help your codes to be bug-free. All integrated development environment (IDE) contains extensions for code snippets which you can use. It will create common code syntax easily. Some of the most commonly used code snippets extensions for React are ES7 React, Redux, JS Snippets, etc.

9. File naming conventions

In React we use JSX where JSX stands for JavaScript XML. There are naming conventions for writing JSX Files. You need to use the upper camel case where the first word of every word starts with an uppercase letter. If you want to create a function that submits a form, you should name it SubmitForm in upper camel case, rather than submitForm, submit_form, or submit_form. This upper camel case also called the Pascal case.

10. Write tests for all code

It is necessary to write tests for your code so that you can ensure that new code added to your application working perfectly with the existing code. As a decent practice, you ought to make a __Test__ directory inside your component’s directory to store every applicable test. You should test your components individually and also finally test your whole application. After the final test, your application will be ready to deploy.