When you first run
create-react-app, youâ€™ll end up with a folder like this:
All of the code you write will live under the
src folder. You can organize into subfolders as you see fit. But how should you organize it?
For this, you have a multitude of options, which is why itâ€™s such a paralyzing thing. If you screw this up, the project could be doomed right from the beginning! At least, it feels that way.
Let me assure you right here and right now: there is no â€œone true wayâ€ to organize your files. Even better, you can completely screw it up â€“ and through the magic of the
mv command and a little work changing some
import statements, your project will be just fine.
Donâ€™t worry so much.
But I can tell. You donâ€™t buy any of that. Youâ€™re still wondering what the best organization method is. Fine.
Before we go on, make sure youâ€™re familiar with the idea of Presentational vs Container components (aka Smart vs Dumb).
Hereâ€™s the folder structure I recommend starting with, and itâ€™s the one I always start with myself:
You can make this more granular over time, and move things around as you see fit, but letâ€™s go over whatâ€™s here.
src/api.js– Youâ€™ll probably need to make calls to a backend API at some point. Put all that code here. If it gets too unwieldy in one file, make a
src/apidirectory and put the area-specific API files under there â€“ like
src/components– All your Presentational (aka Dumb) components go here. These are the simple stateless ones that just take props.
src/containers– The Container components go here. These are the stateful ones, and the ones that make the API calls. If youâ€™re using Redux, these are the ones that are connected to the store. Notice that CSS and tests are in the same folder as their respective components.
src/images– Put the images in one place to start with.
src/index.js– This is where you initialize the app and call ReactDOM.render, so it makes sense to keep this at the top level.
src/utils– Youâ€™ll probably end up with miscellaneous utility functions â€“ error handlers, formatters, and the like. I usually put them in a file inside utils so I can access them easily.
My favorite thing about this structure is that itâ€™s simple. I donâ€™t have to think very hard about where to find a component, or where to put a new file. Itâ€™s amazing how much time you can save when the only decision you have to make at the time you create a file is whether itâ€™s a presentational or container component.
If your current level of comfort with React leads you to read articles about how to best organize your project, you probably do not need Redux yet. Learn React by itself first. It doesnâ€™t have to be a full-on Semester of Study or anything â€“ take a few days to learn React, and then go learn Redux.
When you add Redux to your project, start off with something like this:
src/redux/actions– Create a file for each set of related actions, like
productActions.js, etc. I like to bundle action creators and the related action constants in the same file.
src/redux/reducers– Create a file for each reducer, and an
index.jsin here to contain the â€œrootâ€ reducer.
src/redux/configureStore.js– Create and configure the store here. You can just
import rootReducer from './reducers'.
If you hate having to jump between files to create an action, check out the Ducks pattern where a reducer + related actions + types are all contained in a single file.
An alternative is to organize files by â€œfunctional areaâ€ rather than â€œkindâ€, with folders like
users folder might contain
This organization style starts off deceptively simple. Inevitably you end up with a folder like
common to hold the
Icon.js. And then you might want
common/components. At some point it grows out of control, with directories 3 levels deep, and now whenever you have to create a new file you break out into a full sweat. WHERE SHOULD IT GO?!!
Simple is better. Start simple. Keep it simple, if you can.
- To start off, organize your project something like the screenshot above
- Tweak it as you need to (donâ€™t stress about getting it perfect on day one)
- Err on the side of fewer folders and fewer levels of nesting until the flat structure becomes a problem.