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 long^{I 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.

Comments

[sphrases]

Hey Lucas welcome here. Very nice and high quality first post :D

A similar approach for saving your time with boilerplates could be live templates (For the Jetbrains ecosystem; There might be different names for the same things in other IDEs.). They take a shortcut and replace it with you boilerplate of choice ;)
This is the rfc (react function component) template for example:

import React from 'react';
const $COMPONENT$ = ($PARAMETER$) => {
  return (
    <div>$END$</div>
  );
}

export default $COMPONENT$;

This improved my quality of (code) life immensely. :)
This doesn't create the folder structure like you showed, so it might not fit the same use case.

[Lucas G. Terracino]

Thank you for the kind words!

This is genius, I've never thought of using Snippets (This is how is called in VSCode and I think so does in Sublime), I went ahead and created a script, and while doing so I thought, I should just create the whole folder! The use case grow larger while I was writing it haha.
But this looks very efficient next time I only need a file.

[Richard Tong]

Short, simple, and polite! I appreciate the care you took for the usage. I see how it is useful too; it can be cumbersome to write JSX boilerplate over and over.

[Lucas G. Terracino]

I'm glad you can find it usefull too, this little piece of code made my days way more productive in React so I decided to share it.

Thank you for the kind message Richard!

[Amad Khan]

Great post!

[Lucas G. Terracino]

Thank you!