Welcome to React Sceleto
React Sceleto is the directory structure that I use in my React projects.
Directory structure
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
Files and Folders
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 |
Credits
- Linting - ESLint
- Javascript specs - Airbnb JavaScript Style Guide
- IDE coding style - EditorConfig
- Logo skeleton - made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Contributing
Want to contribute? All contributions are welcome. Read the contributing guide.
Questions
If you have questions tweet me at @sandro_m_m or open an issue.
License
This project is licensed under the MIT License - see the LICENSE file for details
**~ sharing is caring ~**