Skip to content

Instantly share code, notes, and snippets.

@literat
Last active November 5, 2022 13:24
Show Gist options
  • Save literat/4f7c8a4a9b9d113886df77fa34228623 to your computer and use it in GitHub Desktop.
Save literat/4f7c8a4a9b9d113886df77fa34228623 to your computer and use it in GitHub Desktop.
React Application Folder/Directory Structure

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

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

@OfficialSiddharthBisht
Copy link

Helpful , Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment