React Application Folder/Directory Structure

React_App_Directory_Structure.md

React App Folder/Directory Structure

move files around until it feels right

-- Dan Abramov

My directory structure

├── bin         - shell scripts for CI and other project maintenance
├── config      - configurations
├── dist        - build folder
├── docker      - docker files (development | stagging | production )
├── docs        - generated documentation
├── scripts     - scripts running with npm or yarn
├── server      - backend
├── src         - project source files
│   ├── assets
│   │   ├── styles
│   │   ├── images
│   │   └── fonts
│   ├── components
│   │   ├── UI
│   │   └── other directories using Components Folder Pattern
│   ├── variables - constants and other variables
│   ├── langs     - languages and messages
│   ├── layouts   - design layouts
│   ├── libs      - my libraries and functions (this name does not feel right)
│   ├── pages     - also "screens" or "views"
│   ├── routes    - routing
│   └── app.js
├── static      - static files distributed by server
└── tests       - maybe should be in namespace of source files like "__tests__" in every folder

Best Sources

• Folder Structure in React Apps - And How to Make Them Scale
• Structure by CreativeTimOfficial
• Structuring projects and naming components in React
• Writing Scalable React Apps with the Component Folder Pattern

Feel free to comment. I would like to know how do you structure React Apps.

Helpful , Thank you