DEV Community

Cover image for Folder Structure for React Component That Scale
Ayuth Mangmesap
Ayuth Mangmesap

Posted on

Folder Structure for React Component That Scale

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
Enter fullscreen mode Exit fullscreen mode

The codes are

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

export default Card
Enter fullscreen mode Exit fullscreen mode
// 📄 Card/index.tsx
export { default } from './Card'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

boring face

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Enjoy creates your components, and thanks for reading. 😊

Top comments (1)

Collapse
 
dhengghuring profile image
Ridho

Insightfull 🔥