Tips for Organizing React Projects
Tags: react, webdev, javascript
Published: 2020-03-18 11:42:17

<i>This was originally posted as a twitter thread: <a href="https://twitter.com/chrisachard/status/1239993582397816838">https://twitter.com/chrisachard/status/1239993582397816838</a></i>

<h1>There is no <i>One Way</i></h1>

React is a library that intentionally doesn't provide guidance about how to structure your project - and that can be really confusing for developers.

While there are no hard and fast rules however, there are some best practices - so here are 10 tips about how to structure your React projects.

<h1>1.</h1>

First, and above all else: do what works for you and your team

There is a lot of advice out there, and much of it conflicts

Don't feel anxiety about not doing it "the right way"

If it works for you and your team - then that is the "right way"

<h1>2.</h1>

That said:

Keep all of your components and related code in a `src` folder

The other folder at the top level should be `public` with static assets

Images that you are going to import inside of components should be in `src`, not `public`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8na6df386ydy2wwzzwtc.png)

<h1>3.</h1>

Shared components go in a folder called `components` or `shared`

Inside of `components`, group files by function; e.g., have a folder for `form` components, one for `user` components, etc

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/evhvk0cqvvkf3z03du4l.png)

<h1>4.</h1>

Don't prematurely optimize though!

At the start it's fine to just dump all the components into the same folder.  Clean it up later when you have a better idea of what your app looks like.

That includes having multiple components per file... that's OK!  If you don't like it later - clean it up then.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qzolx8bxjhs8gdlniwr.png)

<h1>5.</h1>

Keep entire pages (route endpoints) in a folder called `pages` or `screens` (for React Native)

Inside of that, group files per page in folders

Name the main component either `index.js` or `MyPageXYZ.js`

(I like `MyPageXYZ.js` because I don't like having 100 `index.js` files - but it does make for more complicated imports)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u3h29l6g8267wmj5rg1o.png)

<h1>6.</h1>

If a file's default export is a React component, capitalize that filename like the component itself

That's a signal to other devs that a component is being exported

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h5ab4n6awhhri3q75219.png)

<h1>7.</h1>

Use absolute imports!

Instead of:

```js
import MyComponent from '../../components/pages/MyComponent'
```

set up absolute imports and turn it into:

```js
import MyComponent from 'pages/MyComponent'
```

Much nicer! 🎉

Here's the docs:

<a href="https://create-react-app.dev/docs/importing-a-component/#absolute-imports">https://create-react-app.dev/docs/importing-a-component/#absolute-imports</a>

<h1>8.</h1>

I like either css-in-js, or keeping css files next to the component they're used in

Centralizing css files in a `stylesheets` folder doesn't feel great to me anymore, but your mileage may vary - do what feels best

<h1>9.</h1>

Have a `lib` or `utils` folder for the random js helper functions that inevitably get created.

If you don't start with one, those functions get peppered throughout your code and make it hard to share and find

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iidm5zrv142ozg8b5kyj.png)

<h1>10.</h1>

If using redux you can have separate `actions`, `reducers`, etc folders (that's how I do it)

OR

Keep it in a `redux` folder (sometimes called the "ducks" pattern)

Either way is fine

Either way, I do highly recommend Redux toolkit though: <a href="https://redux-toolkit.js.org/">https://redux-toolkit.js.org/</a>

<h1>Finally</h1>

These are all just my opinions!  

Others will probably come and disagree because they've found something that works better for them - and that's awesome;

Find what works for you, and use that 🙌

<h1>&nbsp;</h1>

<i>Thanks for reading!  If you liked this post:</i>

🐦 You can find me on twitter: <a href="https://twitter.com/chrisachard">@chrisachard</a>

💌 Or sign up for my newsletter: <a href="https://chrisachard.com/newsletter">https://chrisachard.com/newsletter</a>

<h1>&nbsp;</h1>