Folder Structure for React Component That Scale
Tags: react
Published: 2022-06-17 07:22:25

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5dinuo1enh4lpczfkja.png" alt="cover" style="width:100%">
<figcaption align="center"><b>Background image by Greg Rakozy</b></figcaption>
</figure>

---

After spending a bunch of time on open source react projects and writing react components on my own, here is my favorite way to create a react component.

Also, this might help others to getting started quickly, and easily.

Let's see the example. Imagine that we have the folder `Card` which has two files inside, first is `index.js`, and `Card.tsx` in a project

```bash
Card
├── index.tsx
└── Card.tsx
```

The codes are

```tsx
// 📄 Card/Card.tsx
const Card = () => <></>

export default Card
```

```tsx
// 📄 Card/index.tsx
export { default } from './Card'
```

Once you've created the component like this, you can import it into the other component like this

```tsx
// 📄 pages/Login/Login.tsx
import Card from 'components/Card'

const Login = () => (
  <Card> 
    ...
  </Card>
)

export default Login
```

And you can combine components in to pages

```bash
├── components
│   ├── Button
│   │   ├── Button.tsx
│   │   └── index.tsx
│   ├── Card
│   │   ├── Card.tsx
│   │   └── index.tsx
│   ├── Footer
│   │   ├── Footer.tsx
│   │   └── index.tsx
│   ├── Header
│   │   ├── Header.tsx
│   │   └── index.tsx
│   └── SideNav
│       ├── SideNav.tsx
│       └── index.tsx
└── pages
    └── AdminDashboard
        ├── AdminDashboard.tsx
        └── index.tsx
```

The code in the dashboard component will be like this

```tsx
// 📄 pages/AdminDashboard/AdminDashboard.tsx
import Button from 'components/Button'
import Card from 'components/Card'
import Header from 'components/Header'
import SideNav from 'components/SideNav'
import Footer from 'components/Footer'

// You can omit the Header, SideNav, and Footer to the layout comment if you wanted to.

const AdminDashboard = () => (
  <>
    <Header />
    <SideNav />
    <Card>
      ...
    </Card>
    <Footer />
  </>
)

export default AdminDashboard
```

This pattern helps

- 🙈 Encapsulation - once we import the component from its folder not any details component in it, this increased.

- ♻️ Reusability - the encapsulated component makes it isolated from others. Once it is isolated and has no dependency, also the reusability increased.

- 👀 Scalability - we can composing components that isolated, reusable to a larger component or page

You might also see this pattern uses in plenty of open source react projects, for instance, [pancake-frontend](https://github.com/pancakeswap/pancake-frontend/)

```bash
pages
└── AdminDashboard
    ├── AdminDashboard.tsx
    ├── components
    │   ├── SalesChart
    │   └── SearchNav
    └── index.tsx
```

Nevertheless, creating files `index.tsx` and `{component-file-name}.tsx}` and writing the repetitive code every time it might get so annoying.

![boring face](https://media.giphy.com/media/9MITppNYL8aYtqYZ27/giphy.gif)

Introducing to [new-component](https://github.com/joshwcomeau/new-component) cli tool.

The `new-component` is a CLI utility for quickly creating new React components in such a way we've read through, for instance

I'm going to create the component called `Header`, I just type

```bash
$ new-component Header
```

then the result will be

```bash
09:38:54 in ~/Desktop/new-component-test
➜ new-component Header


✨  Creating the Header component ✨


Directory:  src/components/Header
Type:       functional  class  pure-class
=========================================


✓ Directory created.
✓ Component built and saved to disk.
✓ Index file built and saved to disk.


Component created! 🚀
Thanks for using new-component.
```

Also, you can config the generated file, output directory, and its extension.

```bash
➜ new-component --help
Usage: new-component [options] <componentName>

Options:
  -V, --version                    output the version number
  -t, --type <componentType>       Type of React component to generate (default: "functional") (default: "functional")
  -d, --dir <pathToDirectory>      Path to the "components" directory (default: "src/components") (default: "src/components")
  -x, --extension <fileExtension>  Which file extension to use for the component (default: "js") (default: "js")
  -h, --help                       output usage information
```

Enjoy creates your components, and thanks for reading. 😊