Folder Structure for React Component That Scale

#react

cover — **Background image by Greg Rakozy**

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

Card
├── index.tsx
└── Card.tsx

The codes are

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

export default Card

// 📄 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

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

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

export default Login

And you can combine components in to pages

├── 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

// 📄 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

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.

Introducing to 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

$ new-component Header

then the result will be

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.

➜ 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