Skip to main content

ReactJS Project Structure

DOCUMENTS ARE UNDER CONSTRUCTION...

These documents are highly unstructured and aren't really well-formed. For any further clarification, or (understandable) ranting, please contact us at phongnguyen.itengineer@gmail.com.

Overview​

A typical structure project looks like the below:

App Root
├── Dockerfile
├── README.md
├── __tests__
├── babel.config.js
├── coverage
├── cypress
├── cypress.json
├── docs
├── jest.config.js
├── package.json
├── public
├── reports
├── scripts
├── serve.json
├── .env
├── src
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

Source​

A typical source (/src) folder looks like the below:

Source Folder
├── config
├── pages
│   ├── global
│   ├── products
│   ├── cart
│   ├── home
│   ├── ...
├── reduxs
│   ├── home
│   ├── cart
│   ├── products
│   ├── cache
│   ├── ...
├── routers
├── services
│   ├── client                    # in client app (function support)
│   ├── external                  # third party
│   ├── api-service-1
│   └── api-service-2
│   └── api-service-...
├── shared
│   ├── assets
│   ├── components
│   ├── containers
│   ├── styles
│   └── utils
├── statics
└── stories
    ├── components
    ├── containers
    └── examples