How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React. In this blog post, I'll share the structure I use across all my current projects, including this blog.

Delightful React File/Directory Structure

Link to this heading Interactive file explorer

Link to this heading Something on the horizon

Link to this heading Bonus: Exploring the FileViewer component

Components, hooks and helpers are layers, you will have scale problems with per-layer approach. Per-feature or vertical approach will work much better (when features are as self-contained you can ship independently, you can work without too much context of the whole app and more), and yeah, you kinda showed it later with a FileViewer

Lovely article, and great you mention refactoring is key.
We have many things starting as feature specific structure, but quickly seem to turn into global wide-used abstractions.
It all comes down to your needs now and in the future, generally would suggest where possible try to abstract as far as possible (you might need it one day, and then you’ll be ready for it)

Love these examples and explanation! Have been structuring my apps by features for a while (and separating anything thats shared into common, utils, helpers, types, etc folders) And its worked best for me