This video is available to students only

Project structure

There are many different ways to structure your apps' code. This lesson introduces some different approaches, including how I structure my projects and suggestions from the Facebook team themselves.

React project structure#

There is a ‘good not perfect’ axiom that I think is key when thinking about your project structure. Again, it’s a weirdly overly-thought-about subject, but you’d be surprised at how difficult it can be to be presented with a completely blank canvas and asked to start adding files and folders to it.

In this lesson, we’ll take a look at some common approaches to structuring your React projects.

React’s own base project structure#

We’ve created several projects using the Create React App tool so far, so let’s start by looking at a brand new Create React App project structure and go from there:

Create React App folder structure

You can see that it’s quite flat by design. There’s no complex nested structure and indeed the React team advises against nesting more than three levels deep. React, being so unopinionated understandably provides a really unopinionated project structure with its Create React App projects.

However, rather than looking at it from a ‘we don’t want to push any ways of doing it on you’ angle, I prefer to think about it as a great starting point that gives you just enough structure for you to get going, without adding in complexity or pushing you down a set route from the start.

My common structure#

I like to start with this clean approach that’s quite flat and then have a number of different top-level folders to suit different areas of responsibility:

  • /components - this houses all the smaller components or presentational ones. I may add additional folders that group some related components together, such as form fields.

  • /containers - because I like the split between presentation and logic, I put my management components that look after logic and data handling in the containers folder.

  • /lib - anything that’s functional but not directly React related, such as data handlers, API fetchers, or utility files get held in here.

  • /reducers - if I’m using Redux, then I like to keep my reducers and action creators in this folder.

  • /layout - although still holding components, for more complex layouts within apps, I find it helpful to have a dedicated layouts folder for these structural UI components.

  • /data - this usually holds any static data such as initial state or json files.

  • /assets - this folder houses CSS files, SCSS files, images or other similar files.

 

This page is a preview of Beginner's Guide to Real World React

No discussions yet