My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

React project folder structure

Akash's photo
Akash
·Sep 29, 2020·

2 min read

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 run npm install , npm creates this folder. Same as diet 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 for package-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.