React, Git[Hub], and VS Code for Beginners - Video 1

React, GitHub, VS Code Video Blog

This series of blogs is an accompaniment to a weekly coding live-stream that I am doing. This series is focused on the three topics listed above, and is aimed at people who are just getting started. For that reason, I am working on a computer that has never been used for development before, and installing all the software I need along the way.

I also decided not to rehearse these videos. My hope is that there is value in seeing the messiness of the process, and what it looks like to work through questions and issues in real time. The downside is that sometimes I'll get stuck, or change my mind and backtrack. When I post videos to YouTube, I will edit them a bit for time by speeding up stretches where I'm not talking.

You can join the weekly live stream Wednesday afternoons (around 1 PM, Pacific) on Twitch, and find past weeks' videos on my YouTube:
https://www.twitch.tv/paxfeline
https://www.youtube.com/@GrokProgramming

In these blogs, I will list out the important steps and call out any mistakes I make during the stream.

Video 1:
(Stream 1, Part 1)
https://youtu.be/K13tgiff5mo

1. Preliminary: Get git. On Mac, one way to do this is install Xcode.

   If you have no intention of doing app development, or any non-web development, you might want to skip Xcode and get git directly from http://git-scm.com/. One way to do this on Mac is to use Homebrew, which is another thing to install, but makes getting some other binaries easier.

2. In order to run the commands to create a new React app and start the React dev server, I install Node.js, which comes with command line tools npm and npx. To install Node.js, I first installed nvm -- "node version manager" -- by running:
   

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
   

   (Per https://github.com/nvm-sh/nvm?tab=readme-ov-file)

   When nvm finished installing, it tried to modify my shell .profile script, which is run whenever a new shell session starts. In particular nvm wants to add some code that will export an environmental variable called NVM_DIR, and run a script to load nvm.

3. I used the command line program pico to create .profile and paste in the code nvm told me to, then opened up a new terminal window. This started a new shell session, which executed .profile (thus exporting the variable and loading nvm).

4. Next, I installed Node.js by running nvm install node.

5. At that point I could run the command that creates a new React Router app.

   First, in the terminal, navigate to the directory you want to create your new app directory in.

   Beware my mistake! I told the script to create the project at ~/first-react-app. (To be fair, I'm pretty sure the script asked "where" I wanted it.) Generally, a path like that is interpreted as "in the home directory, an entry called first-react-app." However, in this case, in my current working directory (which was my home directory -- so the tilde-slash was redundant), it created a directory named "~" and placed "first-react-app" inside that.

   Don't make my mistake. Navigate to where you want your project, and then just enter the name of the project you're creating.

   The command to create a new React Router app is:
   

   npx create-react-router@latest my-react-router-app
   

   (Per https://reactrouter.com/start/framework/installation)

   During the creation process, you will be asked to give your project a name, if you would like to initialize a git repository (you probably do), and a few other questions.

6. To start the React development server, and see your new app, run the following commands to move into the project directory, install necessary packages, and then start the server.
   

   cd my-react-router-app
   npm i
   npm run dev
   

End of Video 1

Next video blog: Part 2