Yet another way to structure React Project.

I adopted the structure recommended by React and improved it a little bit. At least, I think it was improved :)

The improved structure.

./src
├── App.css
├── App.js
├── App.test.js
├── README.md
├── apps
│   └── account
│       ├── components
│       │   ├── SignInDialog
│       │   │   └── index.js
│       │   ├── SignInForm
│       │   │   └── index.js
│       ├── hooks
│       │   └── useCreateUserWithEmailAndPassword.js
│       ├── pages
│       │   ├── SingIn
│       │   │   ├── index.js
│       │   │   └── styles.js
│       │   └── User
│       │       └── index.js
│       └── routes.js
├── index.js
└── routes.js

I am going to locate together pages that are related to some entities in a project.
In the example above:

• account - is the project entity
• components - components that are common for pages in this entity
• hook - custom hook for encapsulating some business logic
• pages - components that are used in React Router Route
• routes.js - route config for account entity.

The routes.js in the root ./src directory is the main URLs config containing all apps' routes. Read more details about URL config.

This structure will be easy to scale by adding new project entities in the apps directory.
The above structure does not represent the entire project structure. A project can contain a lot more directories for shared components, hooks, assets, and others.

Feedback is welcome!