Simple React Folder Structure

Patrick Ofilada — Tue, 25 Aug 2020 02:54:14 +0000

So you manage to finish all of those tutorial and you already run those generate commands, so what's next? Most of the time after generating new react project developers don't know where to put or organize their codes.

After doing some research, trial and error on different react projects, I found the folder structure that works best for me and for my team.

This article is opinionated and you are welcome to adjust it for your own use case. Here's how I organize my React applications:

.
├── README.md
├── package.json
├── tsconfig.json
├── public/
└── src/
    ├── index.tsx
    ├── routes.ts
    ├── api/
    ├── assets/
    ├── config/
    ├── containers/
    ├── context/
    ├── types/
    ├── utils/
    └── components/
        └── common/

Here's a quick overview for each item or folder.

src/ - Contains all of our react codebase.
index.tsx - Base react component. If you are not using typescript just change this to 'index.js' or 'index.jsx'.
routes.ts - App navigation. If you are not using typescript just change this to 'routes.js'.
api/ - Api call related functions.
assets/ - Images, fonts and other static files.
config/ - Config files
containers/ - Smart Components
context/ - React context
types/ - Typescript related files or functions.
utils/ - Helper functions
components/ - Dumb Components
components/common/ - Shared components

You can check this folder structure here.
If you are also using redux on your react application you can check how does it looks here.
I have implemented it with React Native application also, check it here.

Wrap Up

If you have any questions or recommendations, please leave them in the comments below.

Thanks for reading.

DEV Community: Patrick Ofilada

Simple React Folder Structure

Here's a quick overview for each item or folder.

Wrap Up