Automate ReactJs Components creation

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.

cloning

ssh

$ git clone [e-mail]:lifeeric/automate-React-Component.git

or
https

$ git clone https://github.com/lifeeric/automate-React-Component.git

Permission

$ chmod +x arc

make it global

$ sudo cp arc /bin

Usage

syntax

$ arc [COMPONENT NAME]

example

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

example 2

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

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

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.

cloning

ssh

$ git clone [e-mail]:lifeeric/automate-React-Component.git

or https

$ git clone https://github.com/lifeeric/automate-React-Component.git

Permission

$ chmod +x arc

make it global

$ sudo cp arc /bin

Usage

syntax

$ arc [COMPONENT NAME]

example

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

example 2

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

New features need to be added

It works fine until now for…

View on GitHub

Comments

[Smit Ray]

You could use plopjs.

[HasOne]

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