How to Properly Structure Your React App

These are the recommended best practices for organizing your React app, based on my experience working with React over the years.

There are more ways to organize a React app’s codebase than you can count. But what is a “proper” way of organizing it so that you, your co-developers and any future hands working on the code can find the app’s structure intuitive?

That’s what we will cover here.

First, remember that all of the code you will be writing will be inside the “src” folder of your app.

But, how do you organize that “src” folder’s contents?

Here’s how …

Start with thinking about the different parts that your app needs to run: components, API calls, styles, etc.

Then, create a folder for each of these.

Then, put the individual code files in their respective folders.

So, essentially, your “src” folder will contain sub-folders for your app’s:

• Components: Typically named components, this folder will contain the files for your app’s components. If your app is more complex, you can organize your components into sub-folders.
  
  For examples, if you are creating a blogging app and will need to have a couple of components for users (`NewUser`,`UserDetail`,`UserList`, etc.), you can put these inside the `components/users` sub-folder. 

• You will then have another “components/posts” sub-folder to hold all your blogpost-related components (such as `NewPost`,`PostDetail`,`PostList`, etc.) And so on.
  
  
• API Calls: Even some of the simplest apps you will be creating will require you to make some API calls to some backend server(s). To better organize your app, create an “api” folder and keep all the files for your API objects there. You can do this whether you are using a library like Axios or the Fetch API.
  
  
• Global State: If you are using an app-wide/global state manager (such as Redux or the Context API) for your React app, you should create a separate folder in your “src” directory to hold the app’s global state. So, for example, you could create a src/appContext folder which would have these sub-folders:
  
  
  • appContext/actions/ : which holds the files for the global state’s action types and action creators.
  • appContext/reducers/: This will contain the reducer files for the parts of the app’s global state
    
    
• Custom Styles: If you are going to create a lot of custom CSS styles for your app, you can create a src/css folder and put all your custom stylesheet files in it.
  
  You can then import these stylesheets into your app’s root App.js file so that it is available globally throughout your app’s components. Or you can just import the stylesheets into only the specific components that need them (instead of importing them into the root App.js file.)
  
  
• Tests: You can create a src/__tests__ folder to hold the files for your app’s tests. You can then create further components , api, and so on files to hold the individual test files for each component or API service.
  
  Or, you can just put the individual test files directly inside the src/__tests__/ folder without having to create sub-folders to organize the types of tests. (That’s a matter of preference.)

For an example of how I implemented this in my own React projects, please, see the “frontend” app of my MediaLite repo on Github. (It is two years and may be a bit “rusty”, but it helps make the points expounded in this article.)

There are other best practices (and preferences) that vary from one organization or developer to another. But with the above structure, you will score at least a point each for modularity (and code organization) and sanity (for you, your co-developers and your future self).

If have questions or would like to share your insights on this topic, please, feel welcome to do so in the comments below. Otherwise, please, pass the knowledge forward to other developers, both aspiring and practicing.

Thank you for investing your time and sharing in this learning journey.