How I structure my React.js projects
Tags: react, javascript, webdev, programming
Published: 2021-11-27 01:54:00

Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately. 

**Warning:** Highly opinionated!

Let's get started.

### Single file

React projects usually start with an `src/` folder and one `src/App.tsx` file with an App component.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej5es5a20cdybqrn7ngj.png)

At some point, your app has more features, more lines, and you will need to make smaller standalone components:

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/forl9qz4dcqawmteaz3v.png)

Sometimes it's OK to have multiple components in one file, especially if those components are tightly coupled to the main component. Often it's better to use multiple files because eventually, that one file is not sufficient anymore.


### Multiple files

Instead of having all our code in one file, we can split these components into multiple files. At this point, as our project is still quite small, I would do it like this:


![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpc5jl5y2b6f6d2b91s4.png)

In the above example, List component exports only `List`, but it also has the `ListItem` component, which is not exported.

If you want to take it to the next level, you can start using directories instead of files. I would also extract the `ListItem` from `List` and make it its own standalone component inside `src/components/List/partials` subdirectory:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88h4a8te8e7ximsgjpdm.png)


From now on, I would only use `/components` directory for reusable components.

### Folder separation

Next, we separate features from components. Let's say we need to create an `useUser` hook, so we'll create a dedicated `hooks` directory and put it in there: 

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x86dawzg1zgtk6b63h5d.png)

That `hooks` folder is meant for reusable hooks only. If you have a hook that is used by one component only, it should remain in the component's own file (or directory). 

That same principle applies to many other things as well. For example, if we need to create a reusable service - we'll create a `services` directory and put our service in there:

![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t2prz9s1274xpof6zsz.png)


### Separated views

When we create separate directories for everything that's reusable and keep the non-reusable stuff only where it is used, we've come a long way.

Lastly, I want to create a directory called `views`. Those views are basically a representation of the url. For example, a directory `User` could mean `https://<url>/user` and so on.

These views can of course import reusable services or components, but they also have their own subdirectories for non-reusable stuff.

Here's an example, how my project structure could look like:

![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klbc1mn1cty4nrfvwhln.png)


Follow on Twitter for more: https://twitter.com/bjakyt