Use the “Package Method” to structure your React apps

I’ve been building large React apps since 2015, and over the years I’ve learned important lessons about what works and what doesn’t when structuring your apps.

First of all, throw out the Model View Controller nonsense you probably learned in school. That was useful in its time but these days leads to nothing but pain.

Instead, consider organizing your apps by feature — give each feature ownership of all the files it needs to work independently. Every component should ideally be structured such that you could drag a single folder out of your app and publish it as its own separate npm package.

Keep in mind that everyone does things differently — React’s flexibility is both a blessing and a curse. There’s no “right way”, but there are always “better ways”, and this is by far the best way that I’ve found:

This advice applies to React, React Native, and similar libraries like Vue. It also applies to most other programming frameworks, along with other structures like the organization of teams within a company.

Keep in mind that this is just a design pattern. It’s a tool; do what you want with it. Take the things you like and ignore the rest.

Some benefits you might notice when using the Package Method:

• It’s fun to add new components. Just use an existing one like a cookie cutter. Everything is self-contained, so just copy/paste an existing component and rename the top-level directory (MyComponent → MyNewComponent). Voila, that’s it. No fancy code generation needed.
• It’s simple to discover where logic is. Wondering what might be altering the state of a component? Every file that could possibly touch it is within one single folder.
• It’s wonderfully easy to delete old code. Just delete the MyComponent folder and it’s all gone.
• It feels awesome to publish new open-source packages simply by dragging a folder into its own repo and publishing it.

Libraries used in my example

• Create React App (optional; to handle boilerplate)
• Redux / MobX (optional; to manage complex state)
• Apollo with GraphQL (optional; for data fetching)

Useful related articles

• My original inspiration years ago
• Redux “ducks” pattern
• Jest snapshot testing
• Another similar project structure — quote below:

Each component, scene, or service (“feature”) has everything it needs to work on its own — its own styles, images, translations, set of actions as well as unit or integration tests. You can view a feature as an independent library you will use in your app (a bit like node_modules).

If you found this useful, please help by tapping the 👏 button as many times as you’d like so others can find it too.