The 100% correct way to structure a React app (or why there’s no such thing)

When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code with the least amount of effort.

In this post, I’d like to tell you how I structure my React apps, and what drove my decisions. Along the way I’ll mention some options I don’t use because they don’t suit me, but that might serve you well.

I’d also like to hear how you do things and what you’ve found works well down in the comments.

What works for you

Maybe this was always obvious to you, but it’s only just clicked for me: the structure of an app has nothing to do with computers.

Imagine for a moment an app with only one file for all your components, reducers, the store, utilities, everything.

A terrible idea, of course. Now, have a think about why the above would be a bad thing.

We both know you didn’t really stop and ponder, so I’ll just tell you what I think. The problem with this giant file is that it’s going to be difficult to navigate. But what if you could have bookmarks for each area of the code, maybe one bookmark per function. Maybe the ability to have nested bookmarks. How about a table of contents for all of these bookmarks?

This might seem like a daft thought experiment, but I think it’s worth establishing that the only thing you’re trying to do when deciding on a file…