DEV Community

loading...
Cover image for Automate ReactJs Components creation

Automate ReactJs Components creation

HasOne
A TECH enthusiast Guy, who is mad to change himself to be able to change the World. and learning how to share happiness and how to enjoy other's success!
・1 min read

Automate creating your ReactJs components

This script is built for personal use when I got frustrated creating components manually and was all the same work I had to do. I came across this sample script to boot my productivity creating ReactJs component through the shell script by one single command with the code snippet along with the scss file too.

image

cloning

ssh

$ git clone git@github.com:lifeeric/automate-React-Component.git
Enter fullscreen mode Exit fullscreen mode

or
https

$ git clone https://github.com/lifeeric/automate-React-Component.git
Enter fullscreen mode Exit fullscreen mode

Permission

$ chmod +x arc
Enter fullscreen mode Exit fullscreen mode

make it global

$ sudo cp arc /bin
Enter fullscreen mode Exit fullscreen mode

Usage

syntax

$ arc [COMPONENT NAME]
Enter fullscreen mode Exit fullscreen mode

example

$ arc Header
$ tree
.
└── src
    └── components
        └── Header
            ├── Header.scss
            └── Header.tsx
Enter fullscreen mode Exit fullscreen mode

example 2

$ arc Header/Navbar
$ tree
.
└── src
    └── components
        └── Header
            ├── Header.scss
            ├── Header.tsx
            └── Navbar
                ├── Navbar.scss
                └── Navbar.tsx

Enter fullscreen mode Exit fullscreen mode

New features need to be added

It works fine until now for me even if I try to create a nested component, at the moment I'm configured for TypeScript only. and hope to add Javascript, CSS as well. perhaps stop overwriting component

github link to download, review and contribute

GitHub logo lifeeric / Automate-React-Component

Creating ReactJs component with snippet and containing SCSS file too through this script by on command

Automate creating your ReactJs components

This script is built for personal use when I got frustrated creating components manually and was all the same work I had to do, I came across this sample script to boot my productivity creating ReactJs component through the shell script by one single command with the code snippet along with the scss file too.

image

cloning

ssh

$ git clone git@github.com:lifeeric/automate-React-Component.git
Enter fullscreen mode Exit fullscreen mode

or https

$ git clone https://github.com/lifeeric/automate-React-Component.git
Enter fullscreen mode Exit fullscreen mode

Permission

$ chmod +x arc
Enter fullscreen mode Exit fullscreen mode

make it global

$ sudo cp arc /bin
Enter fullscreen mode Exit fullscreen mode

Usage

syntax

$ arc [COMPONENT NAME]
Enter fullscreen mode Exit fullscreen mode

example

$ arc Header
$ tree
└── src
    └── components
        └── Header
            ├── Header.scss
            └── Header.tsx
Enter fullscreen mode Exit fullscreen mode

example 2

$ arc Header/Navbar
$ tree
└── src
    └── components
        └── Header
            ├── Header.scss
            ├── Header.tsx
            └── Navbar
                ├── Navbar.scss
                └── Navbar.tsx
Enter fullscreen mode Exit fullscreen mode

New features need to be added

It works fine until now for…

Discussion (2)

Collapse
smitray profile image
Smit Ray

You could use plopjs.

Collapse
hasone profile image
HasOne Author

Wow, this is a super awesome tool. Thanks for sharing this, Simt!

Forem Open with the Forem app