Setting up a React App on Mac
So you’ve got a new Mac or revived a dying Mac with the ancient spell of FactoriumResetra. Either way, you’ve forgotten how to get setup for React Magic.
There have been issues with using Homebrew on M1 so the following is using NPM and manual installs to avoid issues.
Step 1: Install IDE
Your Code editor or Integrated development environment (IDE) is where you’ll be doing the majority of coding so it’s important to choose a good one. This used to be a hotly contested field but it’s slowly moving to a clear winner. Visual Studio Code (VSC), download here.
To open VSC from the terminal you’ll need to do the following.
In VSC, Open the Command Palette via (⇧⌘P) and type
shell command to find the Shell Command:
Step 2: Install Node
The recommended way of installing node is using Node Version Manager (NVM.) This allows you to run different versions of Node, quite useful when Firebase functions is 3 versions behind.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
Check the docs for the latest version of the above script. Once downloaded run
nvm install node
Make sure you follow any additional instructions in the brew install of NVM.
Step 3: Install GitHub CLI
Technically this isn’t needed if you aren’t cloning an existing app but you’ll need it pretty soon. Download and authorize your user
gh auth login
Step 4a: Create React App
If you are creating a new app use NPX to create. NPX allows the usage of Packages without installing them.
npx create-react-app awesomeProject
Obviously change the name here, unless you think awesomeProject is a great name.
Step 4b: Clone existing App
If you already have an app on Github
gh repo clone RepoNamecd RepoName
If it is your Repo then you can just use the Repo name. If it is someone else’s Repo then you will need the directory as well, this can be found on github as shown for holderrr the open source project for creating placeholder pages.
To install dependencies use
Step 5: Open and Run
Now that you are in the directory and have the VSC code shortcut setup
VSC will open up with the Repo code. You can close your stand alone terminal now and open up the VSC terminal by dragging the bottom bar up.
Once this has been done start your application with
A browser should pop up with your app running.
This is part (1 of 3) of the Series “A simple guide to hosting a free website using React and Firebase” next up is Part 2: Hosting a React App on Firebase