React is a well known open-source JavaScript library that is used to create unique and innovative applications. It was created by Facebook and allows integration with many exciting components, libraries and frameworks. Also, developers can make their own components. Developing an app with React is not as simple as it looks. Knowing the react best practices will help you to develop an effective app within less time. Still, if you are not aware of the react best practices, then this blog is for you. Let us see the React best practices.

Know the reasons to use React for app development at- Why you should build your app with react native?

React Best Practices To Follow In 2021-

1. Project Structure-
1.1 Folder layout-
Architecture mainly focuses on reusable components of react developer architecture so as to share the design pattern among multiple internal projects. So the component-centric file structure should be used that means all the files related to a different component (Javascript, assets, CSS etc.) should be kept under a single folder.

Components
|
--Login
|
--tests--
--Login.test.js
--Login.jsx
--Login.scss
--LoginAPI.js
This one is another approach used in grouping the file types. In this, the same type of files is kept under one folder. Here, same type of files is kept under one folder. For instance,

APIs
|
--LoginAPI
--ProfileAPI
--UserAPI

Components
|

--Login.jsx
--Login.test.js
--Profile.jsx
--Profile.test.js
--User.jsx
Above structure is the basic example. The folders can be further nested based on requirements.

1.2 Css in JS-
In huge projects, theming and styling can be challenging tasks like maintaining nig scss files. Hence, the concept of CSS-in-JS solutions comes into focus. Following libraries are based on it-

EmotionJS
Styled Components
Glamorous
Among those libraries, you can use as per your requirement such as, for complicated themes, you can select styled-components or Glamorous.

2. Coding Style Best Practices-
2.1 Naming Conventions-
When you work with React, generally you are using JSX(Javascript extensions) files. A component that you create for React should be named in Pascal case, or upper camel case. This translates to names without spaces and capitalizing the first letter of every word. If you have to create a function that submits a form, you should name it SubmitForm in upper camel case, instead of SubmitForm, submit_form. Generally, Upper camel case is called the Pascal case.

For globally used Constant fields in the application, try to use only capital letters. For example, PI = “3.14”;

2.2 Avoid unnecessary DIV-
When there is a single component to be returned, no need to use

.

Know more at- [https://solaceinfotech.com/blog/react-best-practices-to-follow-in-2021/]