Structuring code

Project Structure

The react code structure starts from the src folder. The first file we encounter is App.jsx. It is the root of all the files. Then we logically divide components in the components folder. Each folder can have an index.jsx file. The index file is considered as the starting of the folder even though it's not mandatory to always have an index file.

From the root we have folders

1. apis - All the backends calls are to be made from the apis folder. We can have multiple files specific to each component.
2. common - All the commonly used helpers can be written in the common folder.
3. utils - All the utilities which are reused across the project can be written here.
4. components - This folder contains all the react components.
5. contexts - The data which is globally required across the components can stored here. It will be useful in case of storing the user details after authentication.

• All these folders should be of lower case.
• There could be more folders depending on the requirement.

Example src folder

1├── App.jsx
2├── apis
3│   ├── authentication.js
4│   ├── axios.js
5│   └── notes.js
6├── common
7│   └── logger.js
8├── utils
9│   ├── string.js
10│   └── storage.js
11├── components
12│   ├── Authentication
13│   │   ├── Login.jsx
14│   │   ├── ResetPassword.jsx
15│   │   └── Signup.jsx
16│   ├── Common
17│   │   ├── EmptyState.jsx
18│   │   ├── Navbar.jsx
19│   │   └── PrivateRoute.jsx
20│   ├── Dashboard
21│   │   ├── Account
22│   │   │   ├── Password
23│   │   │   │   ├── Create.jsx
24│   │   │   │   └── Edit.jsx
25│   │   │   └── Profile.jsx
26│   │   ├── Notes
27│   │   │   ├── NewPane.jsx
28│   │   │   ├── Table.jsx
29│   │   │   ├── SubHeading.jsx
30│   │   │   └── index.jsx
31│   │   └── index.jsx
32│   └── Main.jsx
33└── contexts
34    ├── auth.js
35    └── user.js
36 

Component Structure

All the components should be inside the components folder. We should logically group the components into folders according to the requirement.

• All the folder name should start with upper case.
• All the React files should start with upper case except for index file.

Example Customer folder

1├── ActionSidebar
2│   ├── Activities.jsx
3│   ├── Detail.jsx
4│   ├── Tag.jsx
5│   └── index.jsx
6├── Form
7│   ├── Email.jsx
8│   ├── Link.jsx
9│   ├── Phone.jsx
10│   ├── index.jsx
11│   └── validator.jsx
12├── Pane
13│   ├── Create.jsx
14│   ├── Edit.jsx
15│   └── Password.jsx
16├── Table.jsx
17├── Details.jsx
18├── constants.js
19└── index.jsx

• Code starts from index file
• If there are multiple panes, it can be grouped into a folder.
• If there multiple forms, it can be grouped into a folder.
• Constants file can be used to store initial values, default values, etc.

Common mistakes done

Instead of this:

1└── Form
2    ├── CreateForm.jsx
3    └── EditForm.jsx

It should be written like this:

1└── Form
2    ├── Create.jsx
3    └── Edit.jsx

It is understood from the folder name that the Create and Edit are Form components and we don't have append it in the name. This can be taken as example in all the cases.