Demystifying the Folder Structure of a React App

Photo by Ferenc Almasi on Unsplash

If you are reading this, you probably know what ReactJs is and might have already used it. However, you might be wondering why am I reading about folder structure? Can’t I just stuff all my files in the src folder. Well technically you could do that and React wouldn’t complain about it. But as your project becomes larger, it will become pretty impossible for you to maintain your files and keep your src folder clean. Also if you are going to work in a team a folder structure would be followed and we are going to talk about the most widely used folder structure here.

Here is an obligatory introduction to ReactJs.

ReactJs is a frontend library for building User Interfaces.

React creates Single Page Applications or SPAs. In a traditional website, you would have a different html files being served for separate endpoints. A website ( SPA ) built using React contains only one html file and the rest is handled by Javascript. You can build any and every kind of website using React Js.

React is all about Components. Components refer to small independent parts of your app pertaining to a specific functionality and UI [ not necessarily ] that can be re-used throughout your app. For example, Button , Header and Footer Components. Components can be divided into two categories:- Containers/Stateful Components and Presentational/Stateless Components.

It is important to note that a Container contains one or more Presentational Components or, sometimes a Container as its children. However, A Presentational Component can contain only other Presentational Components as its children.

Containers/Stateful Components are the components which have a direct subscription to the state of the app, likely a store. These components have access to the values in the state and can trigger changes to the state.

Presentational/Stateless Components are the components who have an indirect access/subscription to the state of the app. They are used only to display information passed through props and cannot trigger any change to the state directly.

But what if we need to trigger a state change when we click a button in the Presentational Component? We pass the function that triggers the state changes as a prop from the container and call the function inside the Presentational Component.

If you are just getting started with React, you are probably using create-react-app as your toolchain. Create react App gives you the following folder structure.

Create React App Folder Structure

We are going to discuss about the src folder. The most common src folder looks somewhat like this:

Common src folder structure

Now, let’s go over the folders one by one and the and understand the motivation behind them and the type of files you would store in them:

1. Assets: This folder contains all the media assets, such as images, videos, json files, etc..
2. Components: This folder contains all the Presentational/Stateless Components as discussed above.
3. Containers: The name is pretty self-explanatory. It contains all the Stateful Components as discussed above.

For each component or container, you would create a subfolder and then name it with the same name as the component and inside that create the js/jsx file for your component. Here’s what it would look like:

Components and Containers

Here you see two ways you can name your files. You can either use index or name the file as the name of the component. The only major difference it would make is in the import statements. Suppose you want to use the Footer component in Home, then the two imports , respectively, would be:-

import Footer from ‘../components/Footer

and

import Footer from ‘../components/Footer/Footer

3. Context: This folder contains all your context files if you are working with the Context API. These files can be directly added to the context folder without wrapping in a subfolder but you could also do that. Learn more about the Context API here.

4. Hoc: Higher Order Components or HOCs are special type of Components which wrap your conventional Components/Containers to add some features or functionality to the Wrapped Components. HOCs, like any other Component can be reused. HOCs are widely used for a variety of functionality and is something you definitely want to get used to. These files could also be directly added in the hoc folder without wrapping in a subfolder but you could do that as well. Learn more about HOCs here.

5. Store: In large applications where there is a lot of information to be stored and managed in state, it is preferable to use global state or a store. This provides an efficient way of state management in your React App. The most popular State Management Tool for React is React-Redux.

Typically a store consists of three major parts: Actions, Reducers and Types.

I would like to discuss two ways you can structure your store folder. There might be other ways you can structure your store folder but I think these two ways are the most efficient:

a.

Structure One of Store

You have an actions folder containing all your actions. The index file in the actions folder exports all the actions you would likely dispatch from your components. Similarly, you have a reducers folder which contains the reducer files for every type of state. The index file in the reducers folder returns the root reducer. All the action types are declared in the types file. The index file in the store folder returns the store.

b.

Structure Two of Store

In this format, you have a subfolder for every type of state. In each of these folders you have the respective actions ,reducers and types. The store folder contains two files — the store and the dispatchable actions file, which contains all the actions from every type of state dispatchable from your UI.

So after summing everything a clean folder structure would look something like this:

SO …… Hopefully you understood how to setup a clean, efficient and maintainable folder structure for your React Apps. The structure discussed in this article is not the only way you can structure your Apps. Structuring a React App is highly un-opinionated. There is no “official” way to structure your apps. You can definitely choose your own structure as long as it is maintainable and clean. You can keep changing the structure throughout the development of the project as well ( but try to avoid major changes or complete restructuring ). One idea would be to decide upon the structure during the planning phase. Keep playing with it until you find something that you feel comfortable with.

If you wanna know more about React visit their official docs. If you have any questions do drop them below and until next time! ❤👋

Support

Hey !! If you liked the article, do follow and clap 👏🏻 for it and if this article helped you do consider supporting me by buying me a coffee . It will help me to write more such articles related to tech and coding and keep giving back to the community