├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── assets
├── fonts
│ └── .gitkeep
├── images
│ └── .gitkeep
└── videos
│ └── .gitkeep
├── components
└── .gitkeep
├── config
└── .gitkeep
├── containers
└── .gitkeep
├── context
└── .gitkeep
├── helpers
└── .gitkeep
├── hooks
└── .gitkeep
├── i18n
├── ar
│ └── .gitkeep
├── en
│ └── .gitkeep
└── fr
│ └── .gitkeep
├── index.css
├── index.js
├── layouts
└── .gitkeep
├── logo.svg
├── pages
└── .gitkeep
├── reportWebVitals.js
├── services
└── .gitkeep
├── setupTests.js
└── validations
└── .gitkeep
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
7 | "parserOptions": {
8 | "ecmaFeatures": {
9 | "jsx": true
10 | },
11 | "ecmaVersion": "latest",
12 | "sourceType": "module"
13 | },
14 | "plugins": ["airbnb", "prettier"],
15 | "rules": {}
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "tabWidth": 2,
4 | "printWidth": 100,
5 | "singleQuote": true,
6 | "trailingComma": "none",
7 | "jsxBracketSameLine": true
8 | }
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ⚛ ReactJS folders structure boilerplate .
2 |
3 | ReactJS application with intermediate folder structure.
4 | Here is a full article where i explain all folders and their roles. [" Here "](https://yacouri.medium.com/reactjs-folder-structure-boilerplate-92d5dace5b7d)
5 |
6 |
7 |
8 |
9 | - Structure:
10 | ```
11 | src/
12 | ├─ assets/
13 | │ ├─ fonts/
14 | │ ├─ images/
15 | │ ├─ videos/
16 | ├─ components/
17 | ├─ config/
18 | ├─ containers/
19 | ├─ context/
20 | ├─ hooks/
21 | ├─ helpers/
22 | ├─ i18n/
23 | │ ├─ en/
24 | │ ├─ fr/
25 | │ ├─ ar/
26 | ├─ layouts/
27 | ├─ pages/
28 | ├─ services/
29 | ├─ validations/
30 | ```
31 |
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactjs-folders-boilerplate",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.4",
7 | "@testing-library/react": "^12.1.4",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^18.0.0",
10 | "react-dom": "^18.0.0",
11 | "react-scripts": "5.0.0",
12 | "web-vitals": "^2.1.4"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "react-app",
23 | "react-app/jest"
24 | ]
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | },
38 | "devDependencies": {
39 | "eslint": "^8.2.0",
40 | "eslint-config-airbnb": "^19.0.4",
41 | "eslint-config-prettier": "^8.5.0",
42 | "eslint-plugin-import": "^2.25.3",
43 | "eslint-plugin-jsx-a11y": "^6.5.1",
44 | "eslint-plugin-prettier": "^4.0.0",
45 | "eslint-plugin-react": "^7.28.0",
46 | "eslint-plugin-react-hooks": "^4.3.0",
47 | "prettier": "^2.6.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import logo from './logo.svg';
2 | import './App.css';
3 |
4 | function App() {
5 | return (
6 |
21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/assets/fonts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/assets/fonts/.gitkeep
--------------------------------------------------------------------------------
/src/assets/images/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/assets/images/.gitkeep
--------------------------------------------------------------------------------
/src/assets/videos/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/assets/videos/.gitkeep
--------------------------------------------------------------------------------
/src/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/components/.gitkeep
--------------------------------------------------------------------------------
/src/config/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/config/.gitkeep
--------------------------------------------------------------------------------
/src/containers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/containers/.gitkeep
--------------------------------------------------------------------------------
/src/context/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/context/.gitkeep
--------------------------------------------------------------------------------
/src/helpers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/helpers/.gitkeep
--------------------------------------------------------------------------------
/src/hooks/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/hooks/.gitkeep
--------------------------------------------------------------------------------
/src/i18n/ar/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/i18n/ar/.gitkeep
--------------------------------------------------------------------------------
/src/i18n/en/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/i18n/en/.gitkeep
--------------------------------------------------------------------------------
/src/i18n/fr/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/i18n/fr/.gitkeep
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/layouts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/layouts/.gitkeep
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/pages/.gitkeep
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/services/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/services/.gitkeep
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/validations/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yacouri/reactjs-folders-boilerplate/787fcf323d84dca2d80cf9c7ed3b8da91018d7c8/src/validations/.gitkeep
--------------------------------------------------------------------------------