React project: how to structure?

how to organize React project to ensure maintainability?

1. separate configuration - instead of putting all in your "normal" files (e.g. files with React components), it's better to put "configurable" things in separate file. What's are configurable things? E.g. urls for API endpoints, route names, translations etc.
2. dev mode - it's useful also separate your configuration for debugging or testing from the production one. You could also have some feature flags somewhere in your app to enable devs to comfortable debugging e.g. special buttons for doing something useful for programmer, that has no sense whatsoever in production mode. Sometimes it's useful to have some "sandbox" views.
3. separate components into files - rule of thumb can be thought as "each component in different file" but this has not always to be true. Sometimes you could put multiple smaller components in one file if they are related/part of one bigger component. Sometimes it's better to have whole folder for one component etc.
4. separate hooks - similar rule. Maybe each hook needs separate file, maybe you could group multiple related hooks into one file etc.
5. separate business logic from the UI - common mistake is to put logic of your app directly in React components. I think this is partly because React somewhat encourages you to put too many things in components, especially by giving your tools like state, effects or event handling. And look, I'm not saying that using useState or useEffect is bad. I'm just saying that these things are for keeping UI state, not app state or business logic. These are not the same. UI state is internal state of your components (e.g. whether something is open/closed, shown/hidden etc.). This is not the same as app state (e.g. name of user which is currently logged in; list of todo items; some cached data from server etc.) nor business logic (e.g. creation of new todos, checking todo as done etc.). Common mistake is to put business logic directly in components event handlers.
6. extract testable things - it's often hard to test UI so if you separate business/app logic from the UI itself, like in previous point, you could write tests for this easier. Sometimes it's not reallistic to write tests for all your app, so extracting easily testable parts can me tremendous help. Think - instead of testing React components, you'd just test your functions, classes etc. (I'm not saying that you shouldn't test your React components also. I only say that it can be tricky and not always worth an effort).
7. reexport - sometimes it's useful to create files that will import from external libraries and reexport them. This way you limit your direct dependencies of external libraries. Most files could import library from your internal file. This is not always needed but it's worth considering because it could make wrapping/switching libraries easier.