You got to keep your home organized to find things when you’re in need. That’s also correct for programming too. Are you putting your socks into the correct drawer? Let’s find it out.

When we use create-react-app it gives us the following file structure

└── src

└── App.css

└── App.js

└── App.test.js

└── index.css

└── index.js

└── logo.svg

└── registerServiceWorker.js

In this case, you have to define all of your components in the App.js file. If the application you are building is tiny, your approach is perfectly okay.

However, if you’re going to build a bigger application, you would eventually need to separate your components into different files.

So how should you organize these files now?

By File Type

90% of the React/Redux applications choose this simple directory structure:

files are organized by their kinds (actions, components,containers and reducers.)

└── src

└── actions

└── group.js

└── user.js

└── components

└── group-list.js

└── group-item.js

└── user-avatar.js

└── user-box.js

└── user-item.js

└── containers

└── App.js

└── group.js

└── user.js

└── reducers

└── group.js

└── group-members.js

└── user.js

└── index.js

└── Routes.js

The Redux examples by Dan Abramov is following this pattern too. I think this is great for learning a new framework or library because you just need to answer that simple question: What is the type of this file?

It is okay to start building your application with this structure. On the other hand, I can say that we haven’t found the best possible architecture, yet.

Things Get Hairy

└── src

└── actions

└── a hundred actions...

└── components

└── one thousand components...

└── containers

└── you get the point...

...

Despite the fact that organizing your files by type is decreasing the time to find your files, it becomes troublesome to maintain as your application grows. When you understand the problem it’s already too late and you’re afraid of changing it to not broke things up. Then it becomes costly and hard to maintain too and you feel dissatisfied with your life and asking why did you choose this career path instead of becoming a tour guide in Florence where you have a possibility to live your life with the mesmerizing beauty of art but now you’re dealing with this hairy code you build and have to maintain while you have two mouths to feed and now you know you’ll never have a time to attend the salsa courses that you’ve always dreamed of too. ❤

By Features

We can also group files by their domain.

└── src

└── app

└── layout

└── footer.js

└── header.js

└── App.js

└── index.js

└── Routes.js

└── groups

└── actions/

└── components/

└── constants/

└── containers/

└── reducers/

└── users

└── actions/

└── components/

└── constants/

└── containers/

└── reducers/

Everything about users stay in the corresponding users folder. Each folder below is well structured without any confusion. Thus, one can easily understand which files to edit when implementing a new feature.

This helps a lot on dividing the task between individual teams. A team can work with users folder while the other one with groups. Moreover this comes especially handy when a new developer joins to your team. He/She doesn’t have to ask you so much; the files are organized by itself.

You can also group similar features together under another one like the layout folder. If you have more than two components under header.js then you can translate it to a folder too.

Eventually you’ll have a common folder for the global components which are re-used along the project like buttons or dialog-boxes.

However, as your application grows you’ll have directories which are very deep and you’ll lose your way in the jungle.

└── src

└── user

└── components

└── important-user-component.js

└── components

└── important-user-component-has-component.js

└── some-where-over-the-rainbow.js

Best React File Organization Method

We have seen two different approaches to organize your files and none of them satisfied us. So what’s the best way to organize your React files?

I found this best practices article and I think the file layout suggested here is gratifying.

The achievement of this organization is basically it separates the concerns of data-handling from view-centric-layouts.

All Routes have different views that are generated by containers(smart components). Containers are responsible for fetching the data and creating your dumb components(components).

In order to fetch the data from your backend, you call actions from your smart components(containers) and your reducers are tied to your actions too.

So you are recommended to separate actions with view-centric-layouts

└── src

└── modules

└── reducers.js

└── users

└── constants.js

└── actions

└── user_fetch.js

└── user_login.js

└── permissions_fetch.js

└── reducers

└── index.js

└── user.js

└── permission.js

└──projects/

└── routes

└── login

└── index.js

└── containers

└── login.js

└── components

└── login.js

└── logged_in/

└── project_list/

└── project_view/

In here modules directory holds data-related files. Again we divided the files by their kind like action and reducers.

What are the benefits of this layout and how can we use it correctly?

Create different modules and import them into your project with npm. It’s better to separate your app into different modules in order to solve scaling problems.

Use reducers/index.js file to produce your store. Import every other reducers to that file. Again what we are trying to achieve here is to separating the files into as little chunks as possible.

Routes directory is for view-related-files. This is the focus point for you to create views. Also the index.js file is the correct place to define your route.

To Sum Up

Of course there isn’t a best way to organize your files, but there are some ways which are better than others. I found this structure is more gratifying than others and I’d like to emphasize the points why it is better than others and what you have to pay attention too.

Thank you for reading and I hope you enjoyed it. I’d like to know if you have something to add to this endless discussion and I’d be very happy to learn from you too. Please feel free to leave up comments. Cheers!