ReactJS doesn’t have a rigid architecture pattern. It allows us to make up a structure to suit our needs.
Though there is no "best project architecture" that fits any project, there are a few popular approaches.
The most common approaches to organizing a React project:
- grouping by features or routes;
- grouping by file type.
Below is an example of structuring the react project by grouping files by features.
my-app
├── build
├── node_modules
├── /public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── /src
│ ├── /assets
│ │ ├── fonts
│ │ ├── styles
│ │ └── images
│ ├── /components
│ │ ├── /forms
│ │ │ ├── /TextField
│ │ │ │ └── TextField.js
│ │ │ └── index.js
│ │ ├── /routing
│ │ │ └── /PrivateRoute
│ │ │ └── /PrivateRoute.js
│ │ └── /layout
│ │ └── /navigation
│ │ └── /NavBar
│ │ └── NavBar.js
│ ├── /services
│ ├── /store
│ ├── /utils
│ ├── /views
│ ├── index.js
│ └── App.js
├── .babelrc
├── .gitignore
├── package.json
├── webpack.config.js
└── README.md
Top-level directory structure of React project
src contains all application files, index.js is the entry point, and App.js sets up the authorization and routing.
Src folder might contain:
- assets - global assets (images, svgs, company logo, etc.);
- components - global shared/reusable components (layout (wrappers, navigation), form components, buttons);
- services (JavaScript modules);
- store (Redux store);
- utils (utilities, helpers, constants);
- views/pages (the majority of the app components).
Aliases
Having a custom Webpack to set up the system to use aliases customize the resolve configuration.
Anything within the components folder could be imported as @components, assets as @assets, etc.
module.exports = {
resolve: {
extensions: ['js', 'ts'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@assets': path.resolve(__dirname, 'src/components'),
'@components': path.resolve(__dirname, 'src/components'),
// ...etc
},
},
}
Now, instead of using relative paths when importing like so:
import TextField from '../../components/forms';
you can use the alias:
import TextField from '@components/forms';
Components
The components folder contains folders for global shared components (forms, tables, buttons, layout, etc.).
Inside each component folder would be a file for the component itself, the styles, the tests.
- Component.js - The actual React component
- Component.styles.js - The Styled Components file for the component
- Component.test.js - The tests
- Component.stories.js - The Storybook file
An index.js file in the components/forms directory can be an index of all the forms.
src/components/forms/index.js
import { TextField } from './TextField/TextField'
import { Select } from './Select/Select'
import { Radio } from './Radio/Radio'
export { TextField, Select, Radio }
Then the components can be easily imported:
import { TextField, Select, Radio } from '@components/forms'
Store
The global data store - Redux.
.
└── /src
└── /store
├── /authentication
│ └── /authentication.slice.js
├── /books
│ └── /books.slice.js
├── rootReducer.js
└── index.js
The rootReducer imports all your slices and combine them with combineReducers, and index.js services to configure the store.
Utils
.
└── src
└── /utils
├── /constants
│ └── books.constants.js
└── /helpers
└── validation.helpers.js
Views
A view is a specific view that only is used at the /specific route. It might include not global specific forms, modals, buttons, any component.
.
└── /src
└── /views
├── /Authors
│ └── /AuthorsPage
│ └── AuthorsPage.js
└── /Login
├── LoginPage
│ └── LoginPage.js
└── LoginForm
└── LoginForm.js
References and further reading on React Architecture
Is there a recommended way to structure React projects?
React Architecture: How to Structure and Organize a React Application by Tania Rascia
React Tutorial: The Top 10 React Best Practices in 2021
React Clean Architecture
5 React Architecture Best Practices for 2021 by Sebastian Deutsch
React Project Structure: Best Practices by Akash Joshi
React Project Structure: Best Practices for Scalable Application by Syakir Rahman
React Folder Structure in 5 Steps by Robin Wieruch
A recommended folder structure for React.js projects by Mehran Hajirajabi
Guidelines to improve your React folder structure by Max Rozen
Understanding ReactJs Project Structure and Folder Setups by Navdeep Singh Gill
4 folder structures to organize your React & React Native project by Toni Mas