Make Your Own React CLI with Bash

Ever wish that React had a CLI? Something to let you generate a component, along with related files like SCSS or Redux ducks or whatever else.

You can build your very own, with Bash and a couple lines of script. I’ll show you how in this post.

Here’s what our CLI will do:

create the component folder
add a barebones component file to the folder
add a blank SCSS file to the folder
include the SCSS in the component

If you’re on a system like Mac or Linux this is all possible with the shell. (Probably Windows too, but I don’t know enough about Windows shell).

You might already know how to create a directory (mkdir path/to/dir) and how to create an empty file in it (touch path/to/dir/thing.scss).

A Bash script is nothing more than a bunch of shell commands put into a file. So if you create a new file, say, make_component.sh and just put those commands into it, you’ve just made the beginnings of your own CLI.

Follow along! Create a new blank file called make_component.sh and put this in it:

mkdir -p src/components/Whatever
touch src/components/Whatever/Whatever.scss

So far all it does is create a hard-coded directory “src/components/Whatever” and an empty Whatever.scss file in it (the -p flag creates the whole tree of directories if they don’t already exist). We still need to figure out how to:

parameterize the name of the component in those commands
copy in a template component file
modify it to match the component name

So how could you parameterize the component name? Well, Bash lets you access the command line arguments inside your script – as $1 for the first one, $2 for the second, etc. So let’s say you’ll call your script like:

./make_component.sh Button

The script would have a access to a $1 variable assigned to “Button”, which you could use all over the place. Using that in the file you’ve got so far, it would look something like this:

mkdir -p src/components/$1
touch src/components/$1/$1.scss

Now you need to make a template component file and store it somewhere. Your home directory is a good spot, maybe in a subfolder. Let’s say you make a folder with mkdir ~/code_templates and a file at ~/code_templates/component.js that looks like this:

import React from 'react';
import './COMPONENT_NAME.scss';

function COMPONENT_NAME() {
  return <div>Hello</div>;
}

export default COMPONENT_NAME;

This is super barebones of course, but do whatever you like here. The important thing is that you use distinct strings for the COMPONENT_NAME that will be easy to search-and-replace.

Then, to search and replace from the shell you can use sed (short for string editor). You can pass it a regular expression to replace all occurrences of a string in a file. So back in make_component.sh, you can add that sed command to the end so the whole thing would look like:

mkdir -p src/components/$1
touch src/components/$1/$1.scss
sed -e "s/COMPONENT_NAME/$1/g" ~/code_templates/component.js > src/components/$1/index.js

That command is a mouthful but here’s what it does:

The -e flag means “execute this regular expression”.

The next argument, in quotes, is the regular expression "s/COMPONENT_NAME/$1/g". We’re using double quotes so that Bash will replace $1 with our component name. (If we used single quotes, Bash would not interpolate that string and we’d end up with a literal “$1” in our file. Unlike JS, single and double quotes mean different things in Bash!)

The way to read this regular expression is “substitute (s/) COMPONENT_NAME with $1, globally “. The g means “global”, and it refers to globally within a single line because sed only looks at a single line at a time. Without the g there, it would only replace the first occurrence on each line, so if you had a line like const COMPONENT_NAME = function COMPONENT_NAME() the result would be const YourThing = function COMPONENT_NAME() – it would skip the second occurrence.

The next argument, ~/code_templates/component.js, is the file to that sed will operate on.

By default sed prints out the result to standard output. It does not modify the original file. Normally, standard output would appear as text printed to the console, but the > redirects that output to a new file located at src/components/$1/index.js. The > will overwrite the file if it exists, so be careful!

That’s pretty much it for the script. All that’s left is to mark the script as executable (with the command chmod +x make_component.sh) and you’re good to go!

It’s not fancy, but it’s your very own DIY customizable CLI :) Feel free to make it your own. Leave a comment with any cool customizations you come up with.