DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Automate ReactJs Components creation
HasOne
HasOne

Posted on

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โ€ฆ

Top comments (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!

Visualizing Promises and Async/Await ๐Ÿคฏ

async await

โ˜๏ธ Check out this all-time classic DEV post