React Folder Structure
When we run the command
npx create-react-app react-appin our terminal to create react application the following initial project structure gets generated inside our project folder named hello-world as shown below
You can see that at the root level we have three folders and four files, to begin with, let’s start with
package.json
this file contains the dependencies and the scripts required for the project you can see that we are using react version sixteen point five and that is listed as a dependency we also have a few scripts to run the application build the application or even run tests now based on whether you have just NPM or yarn as a package manager you are going to see yarn lock or package lock files they simply ensure the consistent installation of your dependencies
node_modules
is the folder which contains all dependencies and sub-dependencies are installed specified in package.json used by React app.
public
this folder contains three files out of the three
manifest.json is concerned with progressive web apps which are out of scope for our discussion we have the
favicon.ico which you see in the browser tab and this is nothing react specifically so as a beginner you only have to concentrate on the
index.html files are considered as an entry point for the web application. You can import libraries such as CSS libraries and add meta tags in the HTML file.
src
This folder is the heart of React application as it contains JavaScript that must be processed by webpack. In this folder, there is a central component App.js, its related styles (App.css), and a test suite (App.test.js). index.js, and its style (index.css); which provides an entry point into the App. Lastly, it contains registerServiceWorker.js which takes care of caching and updating files for the end user. It helps in offline capability and faster page loading after the first visit.
.gitignore
This file is the standard file that is used by the source control tool git to identify which files and folders need to be ignored while committing the code. Until and unless this file exists, the create-react-app command will not create a git repo in this folder.
Advanced Folder Structure
How I structure my React projects
assets
The assets folder contains all images, CSS files, font files, etc. for your project. Pretty much anything that isn't code-related will be stored in this folder
components-
In components, the folder is further broken down into subfolders. These subfolders are useful since they help keep your components organized into different sections instead of just being one massive blob of components. In our example, we have a UI folder that contains all our UI components like buttons, modals, cards, etc. We also have a folder for form-specific controls like checkboxes, inputs, date pickers, etc.
hooks
The hooks folder contains every single custom hook in your entire project. This is a useful folder to have in any size project since almost every project will have multiple custom hooks so having a single place to put them all is useful.
redux
The reduce folder stores all your React slice files that are used across multiple pages. I find on larger projects you will have multiple slices you use across your application and having a single folder to store them is useful.
data
The data folder is similar to the assets folder, but this is for storing our data assets such as JSON files that contain information used in our code (store items, theme information, etc). This folder can also store a file that contains global constant variables. This is useful when you have lots of constants you use across your application, such as environment variables.
layouts
As the name says, it contains layouts available to the whole project like header, footer, etc. We can store the header, footer, or sidebar code here and call it.
pages
The files in the pages folder indicate the route of the react application. Each file in this folder contains its route. A page can contain its subfolder. Each page has its state and is usually used to call an async operation. It usually consists of various components grouped
Conclusion
Regardless of the size of your project, the folder structure is crucial. By adopting this way of structuring to fit your exact needs, you will be able to write better and cleaner code no matter what size project you have.
