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
Enjoy creates your components, and thanks for reading. 😊
Top comments (1)
Insightfull 🔥