React is a frontend library or framework it is developed and maintained by facebook. React has become popular because of its great performance and reusability. You can build your frontend of your website with react fast and efficiently.
Today I am going to tell you the react project folder structure. This react project folder structure will make your project more cleaner and managable.
I will tell what each file in react does what is the importance and how to organise your code so read this article till the end. This react project folder structure works with redux and context api.
React Project folder structure
Contents
So before starting you should have a little basic knowledge of react for understanding what I am saying. So first to start your react project you will go to your folder and open terminal and type npx create-react-app app-name.
This will install react and install necessary files and a setup of a basic react application you can run the app by typing npm start in the terminal after that you will have a basic react project folder then add all this folders in your app and let me explain all of them.
If you want to get folder icons for vs code than you can install these extension Material Icon Theme
If you want to become a frontend developer than read this article – Roadmap to become a frontend developer.
public – Since react is a single page application the main index.html file is stored in the public folder this is the only html file in the app. There are other files like manifest.json, favicon and others. The app code is pushed in the index.html file by the index.js file in the src folder.
Folders inside src folder
src – src is the main folder of the application. All the source code of the application is stored in the src folder this folder contains the styles, assets, pages and components. So lets take a look at the files and folders in the src folder.
index.js – index.js is the entry point of the application. This file renders all the app or website code in the index.html.
App.js – App.js is a component file where all the screens or pages are imported and rendered. All the routing is done in the App.js file then this file is imported in the index.js file and is rendered in index.html file.
screens – In screens folder all the website pages or screens file are stored. The screens are imported in the App.js file and rendered according to their routes.
components – React is used to make component based website which helps in reusablity of code and enables faster development. All the components of the application like the header or any template is stored here. This components are used by pages or screens.
styles – All the css files of your pages or screens and components are stored in the styles folder and are named after their page or screen.
assets – All the images, fonts and icons are stored in the assets folder
hooks – React has many builtin hooks like useState, useEffect and many others. You can create your custom hooks and use it your project. So all the custom hooks are stored in the hooks folder.
constants – constant is a folder where you put your constant variables which are not to be changed and used by many pages or components.
redux – If you are using redux in your application for state management or if you are not then skip this part. If you are using than you can create a seperate folder called redux and put all the redux code in it.
Folders inside redux folder
store.js – store.js file contains all the reducers of redux and connects it to the store. You can then connect the app with redux store.
reducers – In reducers folder you store all your reducers which are used to change the state of the application. You have to import all the reducers in the store.js file.
actions – Actions are functions which are dispatched and then the reducers changes the state according to the actions. So all the actions are stored in the actions folder.
contexts – If you are not using redux then you must be using context api for state management. It is more simpler than redux. All your contexts will be stored in this folder.
package.json – This files are outside the src folder. Then we have package.json file generated by node js. this file has all the react project dependencies if you ever delete your node modules than you can use npm install to install them back node will look into package.json for required modules.
node_modules – This is the place where all your installed libraries files go. You should never edit or change any file in the node_modules folder.
Summary
So this was the react project folder structure this was very short article I hope you found what you were looking for if you loved this do subscribe to our newsletter and comment down if you loved this react project folder structure thank you.
- If you want a node js folder structure than read these – Node js project folder structure
- If you want to become a full stack web developer than read this article – Roadmap to become a full stack web developer.
