Search
⌘K
    to navigateEnterto select Escto close

    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.

    Previous
    Next