loading...
Cover image for Bashfu for react: Ultimate alias for starting a new React App.

Bashfu for react: Ultimate alias for starting a new React App.

tallangroberg profile image Tallan Groberg Updated on ・5 min read

image courtesy of gym4u

I also want to give a shout out to chris Kunzler for helping me when I first made this command. if you would like to reach out by ask him about vim editors

bashfu: The art of using the command-line to make developing software easier.

I've known for a long time that I could make my development cycles faster by learning more and using more tricks from the command line. This is one of my favorites.

This is a command that I use in order to make my react apps blank canvas's every time I start a new project.

who is this tutorial for?

Anyone who is making new react apps often.

why is this valuable?

When It comes to mastering any skill, it's really about incremental improvement over time. This is why I recommend to students that they take to time to memorize certain pieces of functionality.

One: So that you don't have to think about (or have to look up something simple.) when you are focussing on the bigger picture next time around.

Two: So that you can recognize and fix the things that you are slow at doing.

I do not fear the man that knows a thousand moves, but fear the man who practices the same move a thousand times. Bruce Lee

having a quick way to give yourself a blank slate with your react apps will give you time to focus on learning the things that really matter on your journey to becoming a great developer.

prerequisites:

a bash Command-line interface CLI for short.

if you are using macOS and have the new Catalina update.

Catalina changed my default shell to z-shell. I believe that you can do all of the same things with this alias using z-shell, with the exception of opening your ~/.bash_profile. To change it back bash from z-shell, run this command from any file directory.

chsh -s /bin/bash

If that didn't work you can follow the steps outlined in this article.

let us start by looking at the long command that we will end up with and then deconstruct what is going on.

NOTICE: if you copy and paste from here, you still have to do a few more steps to get this working.


alias blank='rm -rf public/favicon.ico public/logo192.png public/robots.txt public/logo512.png src/App.css src/index.css src/logo.svg && mkdir src/components && cat ~/BlankApp.js > src/App.js && cat ~/BlankIndex.js > src/index.js'

it's really long so lets talk about the first part.

alias blank=''

This tells the command line that when we type blank into the command line. Run whatever is in the quotations ''.

inside the quotations, we have our first command.

rm -rf

the rm stands for remove and the -rf stands for recursive force.

so the files that you remove with this method will go through all the files including the trash bin. they will be gone forever.

next we have a list of the files that we want to remove.

public/favicon.ico public/logo192.png public/robots.txt public/logo512.png src/App.css src/index.css src/logo.svg

we want to get rid of these files because they are the boiler plate that create-react-app gives us to make a fancy landing page when we run it the first time without changing anything.

after the long list of things we want to delete, we have the && operator.

This allows us to chain bash commands together. If and only if the previous command executed properly.

after the first && we have...

mkdir scr/components

mkdir is short for make directory. In this case, go into the src/ directory and make the components folder there.

We have another command to make the providers folder the same way.

mkdir src/components &&

now we have our next command which is...

cat

this is short for concatenate.

if you ever want to increase your knowledge of bash. you can look up any command with the man command. short for manual.

when you enter man cat into the command-line.

Alt Text

you can enter man before any command to see all the possible things you can do with that particular command.

the first file. before the angle bracket is the file you are getting the text from.

the second file. after the angle bracket is the file you are pasting to.

a good way to remember this...

cat from > to

the angle bracket is like an arrow.

in the case of this alias we have 2 instances of concatenation.

&& cat ~/BlankApp.js > src/App.js && cat ~/BlankIndex.js > src/index.js

THE START OF THE TUTORIAL.

we still dont have our cat from files so let's make those.

touch ~/BlankIndex.js ~/BlankApp.js

you could do this from any file directory. I have chosen to do it here you just have to make sure that the directory that the file is in, and the file that is in the ~/.bash_profile match.

in the BlankApp.js make it look how you would like to have the blank app to appear or copy and paste what I give you.

open ~/BlankApp.js
import React from 'react';


const App = props => {
  return (
    <div>
      blank
    </div>
  );
};

export default App;

~/BlankApp.js

do the same for the ~/BlankIndex.js

open ~/BlankIndex.js

and paste this in.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));


serviceWorker.unregister();

now that we have the files we need. Add the alias to the ~/.bash_profile

open ~/.bash_profile 

copy and paste this in...

alias blank='rm -rf public/favicon.ico public/logo192.png public/robots.txt public/logo512.png src/App.css src/index.css src/logo.svg && mkdir src/components && mkdir src/providers && cat ~/BlankApp.js > src/App.js && cat ~/BlankIndex.js > src/index.js'

almost there.

now we need to source the ~/.bash_profile so that the changes that we made will be executed on the command-line.

source ~/.bash_profile

test if it works

create-react-app alias-test && cd alias-test

it's important to be inside the root directory of your react app for this command to work because you typically do most of your command from there.

now type and run blank.

if it just shows a new line that means that it worked.

now run

npm start

this should show you localhost:3000 with a blank screen. with endless possibilities.

in the console for browser dev tools, you will receive a warning.

you can fix this by removing the deleted files the warning names from the manifest.json

the possibilities are also endless for what you can do with your newfound skill with bash. for instance, you can make aliases with all your favorite helper libraries for your app.

make one specific for full-stack apps, configure it to have context at the start.

if you were really ambitious, you could configure your own boilerplate and share it with everyone else that benefited from this article in the comments below.

Posted on by:

tallangroberg profile

Tallan Groberg

@tallangroberg

I love to write, I love all things tech I recently published a novel.

Discussion

markdown guide
 

This was really great man! Thanks for the write up, I definitely want to do this as well, now I just need to figure it out for the actually git bash since I am on windows.

 

you bring up a very good point. I'll add a link to a tutorial to set up bash on windows with ubuntu with the next edit! conceptually everything is going to be the same.

You delete a whole bunch of files at the start and then replace them with the ones you want.

 

Hi everyone!! Let me know what you think 🤔 💭