There seems to be no one true answer for this. I just want to see how different people structure their apps :D.
PS: Also please mention the state management library you use.
I create folders by topics:
I also read a lot of ReactJS code to find new best practices.
So I think there is no right answer as the really good answer is the Kent Beck's answer: it depends.
Try to keep your src folder as clear as the next developer could understand easily what's going on. Code are 10 times more read than written, keeping clean code and clean structure is the key.
The state management library used is a detail of the implementation. But I use redux for now.
Sai Kishore Komanduri
Engineering an eGovernance Product | Hashnode Alumnus | I love pixel art
You’re true that is there no “one” answer for your question; and that is mainly due to the fact, apart from a few conventions on handling data, React doesn’t enforce anything on your part. You’re free to maintain whatever structure you want. While this might add significant cognitive stress of choice, especially if you’re beginning out, there are awesome pointers out to help you get started.
Do check out this excellent article by @bebraw on structuring your react apps. I will try to list down a couple of approaches, in context to how React code is structured at Hashnode.
Directory per concept: Here you have your code split up in to different folders based on what your code achieves.
The following is a peek into main Hashnode repo's directory structure. You can see the idea of “Directory per concept” in action here; the code is split up across different folders; all actions, constants, and stores, tests sit in their respective folders. Additionally, all components belonging to a single “concept” sit in their respective folders too (the
amaandcollectionsfolders for instance)├── src ├── actions │ ├── ... │ └── ... ├── components │ ├── ama │ ├── ... │ └── ... │ ├── collections │ ├── ... │ └── ... │ ├── Error404.jsx │ ├── Header.jsx │ └── ... ├── constants │ ├── ... │ └── ... ├── stores │ ├── ... │ └── ... ├── tests │ ├── ... │ └── ... ├── app.js │ ... └── ...Directory per component/"module": Here you have your code split across component folders, all related tests, and actions sit together in the same folder.
Hashnode is an alt-redux hybrid as far as state management is concerned; the redux part of our app is organised in this fashion.
├── src ├── redux │ ├── modules │ ├── App │ ├── components │ ├── App.js │ ├── App.less │ ├── AppActions.spec.js │ └── AppReducers.spec.js │ ├── __tests__ │ ├── AppActions.spec.js │ └── AppReducer.spec.js │ ├── ... │ ... └── ...Hope this gives you an idea, on how production level apps organise their React code. Do read @bebraw's article for a more comprehensive answer.