What you need to know about react project structure

Why does it matter

Common structures

Presentational / Container

Grouping by features

General abstractions

  • Static files are usually under a single “assets” / “public” / “static” folder which lives at the root of the project.
  • These functions might do not have a direct correlation to the project and might be of general use. An example of this would be a date formatter or a currency converter function. These usually go under a “utils” folder.
  • It’s very common for react projects to depend on other popular technologies. About half of react project use redux (at the time of writing this). In this example redux uses reducers and actions which will probably take a lot of space. Some people like to create a “store” folder with “reducers” and “actions” as subfolders. This concept is not exclusive to redux. Any other technology that introduces lot’s of new concepts is usually handled this way.

Dont’s

  • Try to avoid nesting. No one likes opening multiple folders to find one thing, this is actually counter productive.
  • Don’t overthink it. When starting out, it doesn’t really matter what you choose (unless you start out as a big team). When the time comes abstraction will start to feel natural or even a necessity.

Conclusion

--

--

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