Folder Structure in React Apps

And How to Make Them Scale

React’s Recommendations

If you navigate to the File Structure section of React’s website, the very first sentence states:

Grouping By Feature or Route

The first suggested folder pattern is grouping by features or by routes. For example, if I have an application with a home page and an about page, I might have two folders, home/ and about/ that contain the components, tests, and styles for those routes. Now, let’s say that my home page has a feed feature that I might want to reuse in a different part of my application (such as a blog portion). I might choose to have a section outside of the home/ folder called feed/. This can be a way to organize your application by function and to easily be able to find which part of the application you’re looking for.

Grouping by File Type

The second suggestion is grouping your application by file type. Grouping files by file type can be helpful when navigating your applications. If you’re looking for the Avatar component, it’s going to be under the components folder. However, if you have over 50 components, that folder is going to be large. A way to manage the abundance of files, is to nest the components into categorical folders based on the components’ role in the application. This practice could be based off of something like Brad Frost’s Atomic Design.

Redux’s Recommendations

When you add in state management, like Redux, you add more files, folders, and complexity to the architecture of your application. Especially if you accidentally end up following this Redux anti-pattern by creating an action and reducer for each corresponding view. So how do we avoid this anti-pattern and structure our Redux actions and reducers in a way that’s scalable? Here’s what Redux recommends.


Redux’s first recommendation is that your architect your applications similar to how Ruby on Rail’s applications are structured: with a separate folder for actions, constants, reducers, containers, and components. Similar to the grouping by file type approach, your application would be structured by the purpose that each file serves in your application. You could also use Brad Frost’s Atomic Design principles to break subfolders down in a similar fashion.


Redux Ducks is a system that was proposed by Erik Rasmussen (github, medium) and has gained popularity as being a viable solution to scaling Redux applications. Ducks proposes that instead of keeping actions, action types, and reducers in their own separate files per components, these necessities of Redux should be modularized in a way that they can be self contained. This alleviates the pain of having an actions.js, actionTypes.js, and reducer.js file within each component’s domain.

So What’s the Right Solution?

There is no right solution.

Don’t Overthink It

Pick a folder structure that works for your application. If you’re spending a massive amount of time organizing and reorganizing components, containers, styles, reducers, sagas (if you’re using redux-saga, which you should), you’re doing it wrong.

Dan’s tweet regarding React file structure
Dan’s solution



Software Engineer 👩‍💻 Coffee enthusiast ☕ Gamer 👾 @KatiaKWheeler |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Katia Wheeler

Software Engineer 👩‍💻 Coffee enthusiast ☕ Gamer 👾 @KatiaKWheeler |