My React Functional Component maker for the terminal

Hi 👋, this is my first post. Any feedback is welcome.

For a few months now, I've been digging deeper into React. As a newcomer to the React world I was seeing myself repeating some things over and over, that I wished I had an artisan command for them (Laravel developers might know what I mean), but in a nutshell, a way to create a basic file quickly.

At the same time, I've been using more and more Linux, Ubuntu in particular, which I installed to try out WSL2, and let me tell you, I'm very happy with it, specially with how easy is to tinker and make my own commands and scripts to make my work more efficient.

One of these repetitive and tedious tasks was

• Making a folder
• Then putting an index.js inside it which exported the default of a file
• Make that file and inside it import React from 'react'
• Of course, make a function and export it as default

You know the drill and you know where this is going ✨.

Introducing pls_react_function_component!

I decide to share my humble time saver command I call pls_react_function_component here in DEV.to. So please, use it and hack it to your hearts content. Also, I'm aware its name is longI love it

🛠 Usage

pls_react_function_component <OPTIONS>... <COMPONENT_NAME>...

Options

• -e Changes the extension of the created files to the one provided. In case of choosing ts, semicolons are removed from files. Default value is js. Dot is not needed.
• -p Creates parent folders if they don't exist.
• -h Shows help for the command.

Example

Let's assume you have the following folder structure, and you wanna create a new Footer component.

src/
└── components/

We call our handy new pls_react_function_component command.

pls_react_function_component src/components/Footer

This will create the following folder structure and files.

src/
└── components/
    └── Footer/
        ├── Footer.js
        └── index.js

// src/components/Footer/Footer.js contents
import React from 'react';

function Footer() {
    return (
        <React.Fragment></React.Fragment>
    );
}

export default Footer;

// src/components/Footer/index.js contents
export { default } from './Footer';

💡 The code finally

⚠ A few warnings:

• I'm very aware some things might be better and that's why I'm also sharing the code, I'm quite a beginner with shell scripting, so if you find something that could be better, please, comment with any feedback you have 🙏.
• The first line, the shebang, has zsh instead of the usual bash because I use ZShell as preferred terminal to work with. You can change it to #!/bin/bash if needed.
• The file is structured to be added to the functions your terminal pre-loads, but you can use it however you like.
• You might not agree with the styling of my code (i.e. tab size, arrow function, exporting, etc) but you are invited to edit, remix and tinker away with the code to suit your needs!
• I advice once you've copied/cloned the gist, remove the extension for a better use as proper command.

Ok that's it from me for now, if I update this script in anyway I'll update the gist on this post too. Let me know if you used it or found it useful.

If you are shy a ❤ or 🦄 will be enough!

TL;DR: I made a script for your terminal to create React Function Components easily.

Originally posted at dev.to