Let's Boot Up A React Environment!

I'm all WordPress'd out. Time to see where React left off last time I banged my head wildly against the wall trying to absorb its component-based Jedi ways into my brain.

It's funny though, I seem to always get to the point in my React journey where I again understand React and can see the purpose and reasoning for using it. And then I wind up jumping right back into WordPress and forget all about it until the next time.

So I decided to document my process this time, so maybe I'll be more inclined to not only experience my yearly React epiphany, but move beyond the ah-ha moment, if I'm held accountable. If this winds up being at all helpful to you or if you have any questions, please drop a comment.

Where Do I Start Again?

I know, from experience, that there are dozens of React starter kits on Github each with their own pros and cons - so I chose one that I haven't used before in hopes that the newness factor helps with my follow-through.

And if you'd like to follow-through along on own reclinable living room sofa, I'll be using React Starter Kit which has 22k stars on Github at the time of this article.

Time To Git In There

Let's clone that repo to a clean directory and give the currently undecided project a name:

$ git clone https://github.com/kriasoft/react-starter-kit.git msc        

I went with msc which is just music without vowels. You do you.

A True Backstory

Picture it, 1993 in Johnston, Rhode Island. My grandmother and I walking home from Stop n Shop supermarket. A lightly used Commodore 64 appears next to the neighbor's garbage!

We bring it home, plug it in, it works. I stumble through the BASIC Programming book, extremely intent on building what would later become a DAW (like Ableton or ProTools) by simply having the computer play back patterns and loops of notes.

I was 11, cut me some slack. It was a couple years after I started playing piano and I was really into music theory and video games. I looked a little something like this:

In some universe, whether our own or a parallel one, I'm destined to create something with music and code. And I saw React can handle MIDI, so maybe I do have a very small vision of a destination in mind.

Back To The Project At Hand

A refresher after that montage:

$ git clone https://github.com/kriasoft/react-starter-kit.git msc        

You may be asking "where do I enter that (and the upcoming) commands?"

Well for the past year I've been using Warp, a terminal that's highly customizable and fast - but any terminal should work. Warp is awesome though, I suggest it over any other terminal.

I mostly use Warp in WordPress development, WP-CLI is really helpful tool amongst plenty of other efficiency-boosting tools.

The command above itself clones a Github repo - which is essentially downloading the directory structure and files straight to your current directory.

Repo cloned. No errors, that's always a good sign. Now to change the current working directory to msc.

cd ./msc        

Corepack and ChatGPT

The documentation now says to enable something called corepack, and I like to know what things are before I install them so let's ask our new best friend (since 2023) ChatGPT!

One of the greatest things about ChatGPT is its ability to break complicated concepts down to layman terms and metaphors - for someone who doesn't really enjoy reading more than I need to, perfection. Whenever I don't know what a certain code library does, or how a framework works I ask ChatGPT, almost never fails me.

Turns out that corepack is a manager of package managers, it's a way to prevent developers from having to say "well, it works on my machine".

As you know very well, every time we developers have to say "it works on my machine" a puppy is put up for adoption.

Anyways, let's enable corepack.

corepack enable        

My First Error ??

Alright, so we have a permission denied error when trying to enable corepack. Let's see if Warp's suggested command to use the all-mighty sudo works...

And, we're, good. Prefixing commands with sudo is reminding the terminal that you are important.

Managers And Mistakes

Next thing is to install yarn. No need for our friend GPT, since I already know that yarn is a package manager so let's install.

Cool, and I was about to start it up but realized that the last two commands were in the wrong directory haha, let's do that again in the msc directory, vaffanculo.

Alright, all is well in the land and the workspace has been started. This should allow me to view the React app in the browser and build whatever I'm about to build (still undecided, but the music thing).

Just had dinner at 3:30pm, don't judge me too harshly.

Okay so what does this look like booted up in a browser? It's a dashboard? The repo didn't say anything about a dashboard but let's roll with it.

I forked the master branch project to keep track of my own code edits, that'll be available here: https://github.com/ciccarone/react-starter-kit

Time to aimlessly mess around with the code before reading the documentation, stay tuned