React Folder Structure Deep Dive

The folder structure matters in many ways; it eases understanding, refactoring, and sustainability. In this article, I’ll show how we should manage ours react app’s folder struct.

“If you have the guts to keep making mistakes, your wisdom and intelligence leap forward with huge momentum.” -Holly Near

Firstly when we create react app it provides us with a basic struct. See the below picture which is taken from the official site.

https://create-react-app.dev/docs/folder-structure

When we start a project, we may not be able to predict the project will how sophisticated or what we will need. After a lot of time and work, we’ll realize the project is a mess because our code snippets are not in the right places and we’re repeating ourselves uncountable.

There is a way to prevent happening all of the things I mentioned before. The proper folder structure!

Firstly we need a scenario.

Imagine that you got a freelance job. And your employer wants an application where users can criticize each other, comment and vote on posts, sign in up, and after all, can make money from posts with blockchain. The employer says that API is ready to use.

Let’s start to create.

All folders will be in the ‘src’ folder.

PAGES — Obviously, we’ll have pages in this app. So our first folder will be pages. In this folder, we keep our pages. It depends on how you control your styling but I prefer module CSS, so I keep all my pages in separate folders. For example home page’s path looks like ‘./src/pages/Home/Home.jsx’. Add other pages same as this one.

COMPONENTS — In the page, we’ll use components. So we can keep components in this folder. This can contain several folders like;

| — UI Keeps your UI items like buttons, cards, checkboxes, etc.

| — layout In the layout page, we can keep components which not change and use several pages. Wrapping the app.js file with <Layout> </Layout> we settled on the layout with children prop. Look at this link for further information.

ASSETS — We need icons, gifs, fonts, images, and styles in the app. We can keep our files in these.

API — Keeps files related to API.

MODULES — Keeps global modules.

CONTEXT — In the app, we need to keep some data at a global state, if you decide to use context you need this folder.

STORE — If you preferred redux, this folder will be handy. Subfolders can be added. There are multiple patterns for this area. For more information look at this beautiful article

| — ACTIONS

| — REDUCERS

TYPES — Presume that we are selecting typescript for this project, this folder keeps types in it.

UTILS — Every project needs utils. This folder is a tool bag for our project. For example parsers, constants, language files, etc.

| — CONSTANTS

| — HOOKS

| — LANGS

TEST — Keeps test files.

That’s it. You can add other folders to keep the app sustainable. But avoid too much nesting. Read official documentation.

Eventually, the folder struct will look like this.

react-app/
├─ node_modules/
├─ public/
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ robots.txt
├─ src/
│ ├─ api/
│ │ ├─ services/
│ ├─ assets/
│ │ ├─ gifs/
│ │ ├─ images/
│ │ ├─ styles/
│ │ ├─ icons/
│ ├─ components/
│ │ ├─ ui/
│ │ ├─ layout/
│ ├─ modules/
│ ├─ pages/
│ │ ├─ Home/
│ │ ├─ Profile/
│ ├─ context/
│ ├─ store/
│ │ ├─ actions/
│ │ ├─ reducers/
│ ├─ types/
│ ├─ utils/
│ │ ├─ contants/
│ │ ├─ langs/
│ │ ├─ hooks/
│ ├─ __tests__/
├─ .gitignore
├─ package.json
├─ README.md
├─ index.css
├─ index.js

I’m not adding files to this diagram to keep it simple.

I hope this guide helps you.

If you liked it you can follow me and keep notified of upcoming articles.

Mahir Uslu - Medium