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:

  1. grouping by features or routes;
  2. 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

Webpack Resolve