My React Functional Component maker for the terminal
Tags: react, productivity, bash, webdev
Published: 2020-07-16 18:10:11

> 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](https://docs.microsoft.com/en-us/windows/wsl/install-win10)**, 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<sup><sup><sup>I love it</sup></sup></sup> 

### 🛠 Usage
```bash
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.

```zsh
pls_react_function_component src/components/Footer
```
This will create the following folder structure and files.
```
src/
└── components/
    └── Footer/
        ├── Footer.js
        └── index.js
```
```js
// src/components/Footer/Footer.js contents
import React from 'react';

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

export default Footer;
```
```js
// src/components/Footer/index.js contents
export { default } from './Footer';
```
### 💡 The code _<sup><sup>finally</sup></sup>_

{% gist https://gist.github.com/NOMADE55/116bcc13e3da83ff5e9fdcd8c2449f15 %}

#### **⚠ 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](http://zsh.sourceforge.net/) 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.
![Example of the command pls_react_function_component being used on my console](https://dev-to-uploads.s3.amazonaws.com/i/l0tqcbd9t7tgxxfl2zek.png)