Creating modern web applications often includes creating countless components and accompanying files. Even if you are terminal savvy, creating a basic React component would take a few commands.
For example, we could create a component named "Counter" like so.
(This assumes you have a "components" directory at the root level of your app).
mkdir ./components/Counter
touch ./components/Counter/Counter.js
touch ./components/Counter/Counter.module.scss
This is of course quicker than switching back and forth from mouse and keyboard to create a few new files but we can still be quicker and get some boilerplate in there while we're at it...
Lets get Bashing.
Start by creating a file for the script and opening it in your editor of choice, we'll name it createComponent.sh for simplicity's sake.
touch createComponent.sh
Now inside that file we're gonna add some real simple code to get things rolling and get acquainted with bash scripting.
#!/bin/sh
mkdir ./components/Counter;
touch ./components/Counter/Counter.js;
touch ./components/Counter/Counter.module.scss;
If you have a keen eye, you'll notice this is the exact same code we typed above to create the necessary component files. But now we can make that happen with just a single command. Let's test it out!
./createComponent.sh
Boom
Obviously, we aren't going to be creating a counter component multiple times in a project so the script as it is, is useless. In order to make this into something we can actually use we have two options while working with the command line.
- Positional Parameters
- Flags
Either option is a viable way to pass arguments to our script, the difference being that positional parameters are dependent on, you guessed it, their position and flags can have their order swapped when executing the script. For use in this post we will be making use of flags, but take the example scripts into consideration and decide what is best for you.
With Positional Parameters
#!/bin/sh
echo "first name: $1";
echo "last name: $2";
Now run the script
./examplescript.sh john smith
and examine the output
first name: john
last name: smith
With Flags
#!/bin/sh
while getopts a:f: flag
do
case "${flag}" in
a) firstname=${OPTARG};;
f) lastname=${OPTARG};;
esac
done
echo "first name: $firstname";
echo "last Name: $lastname";
Now run the script
./examplescript.sh -f smith -a john
and examine the output
first name: john
last name: smith
You'll notice we get the same output even though we mixed up the order of our arguments. A matter of preference really, but I much prefer not needing to remember the specific order of things to get the output I want from my script.
Write an actually useful script
Now that we know about flags and positional parameters in bash, we can create a more useful script than we made before by passing some arguments to it like the desired filename.
createComponent.sh
#!/bin/sh
while getopts a: flag
do
case "${flag}" in
a) filename=${OPTARG};;
esac
done
echo "creating a component named $filename";
mkdir ./components/$filename;
touch ./components/$filename/$filename.js;
touch ./components/$filename/$filename.module.scss;
Now run the script
./createComponent.sh -a Counter
You should see the terminal print out "creating a component named Counter" as well as the new directory and files inside the component folder. Pretty nifty eh?
We can take it one step further!
Before calling it quits on this post we are going to add in just a little bit of boilerplate code to the javascript file. That way it is ready to render as soon as the script finishes running. We can do this by using the command echo and the operator ">" or ">>" followed by the file we wish to output to. The difference between the two is that ">" will write directly to the first line of the file and ">>" will write to the file from a new line at the bottom file. In our case we want the filename is being passed to the script at run time + .js, so we will create a new variable by saying "jsfile=$filename.js" above our new echo lines.
createComponent.sh
#!/bin/sh
while getopts a: flag
do
case "${flag}" in
a) filename=${OPTARG};;
esac
done
echo "creating a component named $filename";
mkdir ./components/$filename;
touch ./components/$filename/$filename.js;
touch ./components/$filename/$filename.module.scss;
jsfile=./components/$filename/$filename.js
echo "import { useState } from 'react';" > $jsfile
echo "import classes from './$filename.module.scss';" >> $jsfile
echo ' ' >> $jsfile
echo "export const $filename = (props) => {" >> $jsfile
echo " return (" >> $jsfile
echo " <p>I'm the new $filename component look at meeeeee</p>" >> $jsfile
echo " );" >> $jsfile
echo '};' >> $jsfile
echo >> $jsfile
echo "Created a component named: $filename";
And again to run the script we'll type the command.
./createComponent.sh -a Counter
There you have it
We just created a really simple shell script to help us make new components in a flash. Of course, this could still be expanded upon in many ways, but it lays a really good foundation for what we can accomplish with some simple scripting to make our front end development lives easier.
You can download the script from here github.com/MiCurran/createComponent.sh.