Sample file structure for React projects
MIT License
React Sceleto is the directory structure that I use in my React projects.
To start a new project based on this template, follow these steps:
your-react-app/
├── public/
│ ├── ...
│
├── src/
│ ├── pages/
│ │ ├── index.js
│ │ ├── [SomePage]/
│ │ | ├── index.js
│ │ | ├── [SomePage].js
│ │ | └── [SomePage].scss
│ │ |
│ │ ├── [OtherPage]/
│ │ | ├── index.js
│ │ | ├── [OtherPage].js
│ │ | └── [OtherPage].scss
│ │ |
│ │ ├── ...
│ │
│ ├── components/
│ │ ├── index.js
│ │ ├── [SomeComponent]/
│ │ | ├── index.js
│ │ | ├── [SomeComponent].js
│ │ | └── [SomeComponent].scss
│ │ |
│ │ ├── [OtherComponent]/
│ │ | ├── index.js
│ │ | ├── [OtherComponent].js
│ │ | └── [OtherComponent].scss
│ │ ├── ...
│ │
│ ├── appComponents/
│ │ ├── index.js
│ │ ├── [SomeComponent]/
│ │ | ├── index.js
│ │ | ├── [SomeComponent].js
│ │ | └── [SomeComponent].scss
│ │ |
│ │ ├── [OtherComponent]/
│ │ | ├── index.js
│ │ | ├── [OtherComponent].js
│ │ | └── [OtherComponent].scss
│ │ ├── ...
│ │
│ ├── hooks/
│ │ ├── index.js
│ │ ├── use[SomeHook].js
│ │ ├── ...
│ │
│ ├── config/
│ │ ├── routes.js
│ │ ├── ...
│ │
│ ├── context/
│ │ ├── [someContext]/
│ │ ├── ...
│ │
│ ├── assets/
| │ ├── images/
| │ │ ├── index.js
| │ │ ├── [some-image].png
| │ │ ├── [some-image].svg
| │ │ ├── ...
| │ │
| │ └── styles/
| │ ├── theme.css
| │ └── shared.module.scss
│ │
│ ├── utils/
│ │ ├── [someUtil].js
│ │ ├── ...
│ │
│ └── index.js
│
├── .gitignore
├── .editorconfig
├── .eslintrc.js
├── package.json
├── LICENSE
├── README.md
├── yarn.lock
└── AppRoutes.js
Overview of files and folders.
File/Folder | Description |
---|---|
public/ | Build output folder |
src/ | The source code of the application |
src/pages/ | Application pages |
src/pages/index.js | Exports all pages |
src/pages/SomePage/ | Example folder for an application page |
src/pages/SomePage/index.js | Re-exports the component |
src/pages/SomePage/SomePage.js | Example file for an application page |
src/pages/SomePage/SomePage.scss | CSS file for SomePage.js |
src/components/ | Reusable React components |
src/components/index.js | Exports all components |
src/components/SomeComponent/ | Example folder for a React component |
src/components/SomeComponent/index.js | Re-exports the component |
src/components/SomeComponent/SomeComponent.js | Example file for a React component |
src/components/SomeComponent/SomeComponent.scss | CSS file for SomeComponent.js |
src/appComponents/ | Application-specific React components |
src/appComponents/index.js | Exports all components |
src/appComponents/SomeComponent/ | Example folder for an application-specific component |
src/appComponents/SomeComponent/index.js | Re-exports the component |
src/appComponents/SomeComponent/SomeComponent.js | Example file for an application-specific component |
src/appComponents/SomeComponent/SomeComponent.scss | CSS file for SomeComponent.js |
src/hooks/ | Custom hooks |
src/hooks/index.js | Exports all custom hooks |
src/hooks/useSomeHook.js | Example custom hook |
src/config/ | Configurations |
src/config/routes.js | React Router routes |
src/context/ | Global state management for React app |
src/context/someContext | Example folder for specific context management |
src/assets/ | Static resources (e.g. images, PDFs, stylesheets, etc) |
src/assets/images/index.js | Exports all images |
src/assets/images/some-image.png | Example image file |
src/assets/styles/ | CSS styles |
src/assets/styles/theme.css | Application-wide theme configuration. |
src/assets/styles/shared.module.scss | Shared styles across components |
src/utils/ | Helper files (e.g. error handlers, formatters, etc) |
src/utils/someUtil.js | Example utility file |
src/index.js | JavaScript entry point for the application |
.gitignore | Files and directories that Git should ignore |
.editorconfig | IDE coding style |
.eslintrc.js | ESLint configuration |
package.json | Package configuration |
LICENSE | License document |
README.md | This document |
yarn.lock | Dependencies information for Yarn |
AppRoutes.js | Application routes |
Want to contribute? All contributions are welcome. Read the contributing guide.
If you have questions tweet me at @sandro_m_m or open an issue.
This project is licensed under the MIT License - see the LICENSE file for details
**~ sharing is caring ~**