DEV Community

Cover image for Automate ReactJs Components creation
HasOne
HasOne

Posted on

6 1

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.

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…

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (2)

Collapse
 
smitray profile image
Smit Ray

You could use plopjs.

Collapse
 
hasone profile image
HasOne

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

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series