Best File Structure for React Application

Hello peeps,

After a long I am back with another article, what are you guys thinking we are focusing on clean code right from the earlier and this article both are based on writing clean code.

In my development journey had developed large scale react application where your file structure is very important.

Before Start why file structure is important?

1. Helps you to find your files quickly in future.
2. Other developers can understand your files and don’t face much difficulty
3. Easy for debugging
4. More importantly clean code, because it allows you to clearly communicate with the next person who works with what you’ve written.

Let’s start with the react application

Step: 1 Create React Application

npx create-react-app catalysts
cd catalysts

You will be end up a basic react structure which consists of basic file structure we are going to modify it.

step: 2 Delete the unwanted things

when you create a react application using create react app you

For now sake we dont need

in src

• App.test.js
• logo.svg
• reportWebVitals.js
• setupTests.js

In App.js delete every prewritten code, you will end up with a app.js like given below

Step: 3 Create folders for better file structure

For better user experience and easy access of any file for large scale development we have to create best folder structure.

by creating different folder for different things like

1. pages

Segregate the pages a folders which again holds js and css/scss file of that perticular page

2. components

This folder contains folder of js and css/scss of perticular component of the react application

3. router

This folder hold the file required for routing basically it holds router.js and routerConfig.js, routerConfig.js basically holds the paths of pages which can be used globally

4. assets

Holds various assets required for project separated by folder based on type of the asset whether it is image, video, font etc..,

5. utils

This again contains any constants to saved which are used in many pages for example api constants, localStorage constants etc…,

6. hooks

sometime occurs where you have to create your own hook, which all accessed globally if we create as a separate file. For Ex: useLocalStorage()

7. helpers

In this folder we store the helper funcitons which can be used in react application

8. scss (optional)

If you are using scss for you project you have to create a folder named scss which holds variables and mixins which may help to control your properties of application from a single place.

After segregating files based on folder you react application should look like this

step: 4 setup router.js and routerConfig.js

create a exportable object named ROUTES and add path of different page in into a variable for global access and changing path name at single page which will reflect at all pages where it is being imported

you routerConfig.js file will looks like this after the completion setup of this file

export const ROUTES = {
Home:'/home',
About:'/about'
}

and coming to router.js

before setup install react router dom here we used react-router-dom v6

npm i react-router-dom

Then your router.js holds

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from '../pages/About/About';
import Home from '../pages/Home/Home';
import { ROUTES } from './RouterConfig';
const Router = () => {

const RouteWithRole = ({ Element }) => {
return (
<>
  <Element/>
</>        
);}   
return ( 
   
<div>   
     
  <Routes> 
           
    <Route exact path={ROUTES.Home} element={<RouteWithRole 
     Element={Home} />}></Route>     
       
    <Route exact path={ROUTES.About} element={<RouteWithRole
     Element={About} />}></Route>  
      
   </Routes>  
  
</div>  
)} 

export default Router

step 5: Start using your application

you can start using the application by running

npm start

before the end if you want my file structure it is already created and it is been open sourced under catalysts organisation github one of repositories with tailwind and Redux.

click here to go to the repository.

Follow if you find this article helpfull.