Tony Nguyen · · 4 min read

Web Development · React · Programming

React Project Structure 2024

Before web discuss this article. I would like to mention a few things. All of these structure folder will inside “src” folder. Besides, you should be know react basics.

What is React?

It is a Javascript library created by Facebook. It is used to build user interface, and an tool for building UI components. Almost all the time, we use the create-react-app to create an application react. In this article, we will build an our boilerplate for an application react with the vite.

How to Structure React application?

We have read many articles that every article explains the boilerplate, and we can get confused about which one is best approach.

There structure will go in order from the simplest to the most complex, but don’t just jump to the most advanced/complex structure because depending on your project size. So you can use some parts or all of them for your project.

Folder structure

Folder structure react

What is the Folder Structure React?

It looks like this.

  • styles folder
  • assets folder
  • components folder
  • configs folder
  • context folder
  • layouts folder
  • helpers folder
  • hooks folder
  • services folder
  • types folder
  • states folder
  • pages folder


The styles folder contains style css of the project. Here we can store component-based custom styles.

styles folder react structure 2024


The assets folder contains all images, css files, font files, etc… for your project.

assets folder react structure 2024


The contexts folder stores all your React context files that used to share states between components each other. There are large projects you will have multiple context you use across your application. If you are using a different state manage such as Redux, you can replace this folder for share states.

contexts folder react structure 2024


The configs folder contains config files where we store environment variables. We will use this folder to setup configurations in your application. Besides you can use it to stores constant variables, then we just change a place, and they will apply for all placed that used.

configs folder react structure 2024


The layouts folder contains dynamic layout that you want display based on your client’s information. This would be things like a sidebar, navbar, etc… If your application only has a layout then you can just place it in the components folder, but if you have multiple different layouts used across your application this is a great place to store them.

layouts folder react structure 2024


The helpers folder contains utilities functions. You should be store pure functions on this folder. This mean is each function will have its own responsibilities.

helpers folder react structure 2024


The hooks folder contains the hooks function to can reuse code logic for all components, and it uses to separate between code logic and your components. So your component just simple show render UI.

hooks folder react structure 2024


The services folder contains all your code for interface with any external API. On large projects you will have many different APIs you need to access and this folder is the place to put the code that interact with those APIs.

services folder react structure 2024


If your applications created by react typescript. You can use this folder to contains interfaces, types that you use to define on components. This folder easy uses to share interfaces across components.

types folder react structure 2024


The states folder will be added if you use redux in your project. There are 2 folders named actions, reducers to manage states. They will be called in almost all the pages, so create actions, reduces according to pages name.

states folder react structure 2024


This folder is very important in your project. Components are the building blocks of any react project. This folder contains collections UI components like button, card, modal, input, etc…, that can be used across various files in the project.

components folder react structure 2024


The final folder that the pages folder indicate the route of the react application. Each file in this folder contains its route. A page can contain its sub folder. And every sub folder represent its own route. This folder is confused for yourself when you identify which components are in the pages folder, or in the feature folder. So, I propose we can reference ways the NextJS framework using app router to separate components.

pages folder react structure 2024

We will create index file which used to export or import named components. We won’t write code login into the index file. That will help us find component name more easily.

pages folder react structure 2024


This is one of the most used architecture. As I have already mentioned, no one best architecture will suit evert project. So we ourselves will decide parts into our project and always remember to maintain a folder structure so every project is simple and easily understood by any developer.

Back to Blog