React project folder structure
There are many ways to create a react project folder structure. The best folder structure is the one which suits your team’s requirement. I am going to share the folder structure which we use in our organisation.
- dist
- node_modules
- src
- assets
- js
- app
- App.jsx
- modules
- index.js
- styles
- index.html
- webpack
- package.json
- package-lock.json
dist
is the location where final production-build code is present. Files under it should not be changed under any circumstances. This folder along with its content is automatically generated by webpack. This folder is also included the.gitignore
so that no one commits this folder to git.node_modules
is the directory where all kinds of dependency packages are being stored. Whenever you runnpm install
, npm creates this folder. Same asdiet
there is no need to change the content of any file in this directory.package.json
contains information regarding our project and all the packages used in out project.- Whenever we do
npm install
, npm searches forpackage-lock.json
(yarn.lock if you are using yarn) to install the dependencies. This file contains a json of all dependencies. This also contains all dependencies for the packages being used in the project. Ex. Suppose we are using a package called A. A may contain B and C as it’s dependencies.package-lock.json
has all the information regarding packages and its corresponding dependencies.
Coming to the main part, all logics (or codes) are written in src
folder. It contains:
* assets
* js
* styles
As the names imply, assets
and styles
contains images and css files. The files may vary according to what you are going to use in the project. styles
can contain css_scss_sass or combination of those. Same goes for assets
js
directory is further divided into app
and modules
.
app
directory contains all common components, constants, app context or services.
- app
- components
- constants
- context
- routes
- services
- Same folder structure is followed for each module. Each module can have its own context i.e. Any component has access to app level context and its module level context.
At the end of the day, there is no correct way for a folder structure. Like Dan Abranov said keep moving around until you feel it right.