React.

js Setup Guide for

macOS
Tej Patel
Table of Contents
Introduction create-react-app

Caution Build React app

What is React? Push Changes to Git

Equipment and Requirements End of Guide

Step Guide Troubleshooting

Install Node.js and npm Working Tree Clean

Install Git Run External Application

Install VS Code
Introduction
This guide will cover a step-by-step guide for setting up a React.js development
environment on macOS. We will walk through steps for installing React.js as well as
necessary tools such as a text editor, Node.js, and Git. By the end of this guide, you
will have a development environment ready to begin writing your first React app!
Caution
This guide will not cover React.js development or how to write React code.

React development and web development in general can be done using a variety of
tools that depend on the project. The setup shown here will allow you to begin
working with React. However, other technologies are required if you intend to write
a backend, perform routing, etc. Such instructions are out of the scope of this guide.
What is React?
Before we begin, it's important to understand what React is. React is a frontend
JavaScript library for building user interfaces with reusable components. It allows
developers to create large web applications that can change data without reloading
the page. React is maintained by Facebook and a community of individual
developers.
Equipment and Requirements
This guide assumes that you have basic software development skills but does not
require that you be well versed with React or web development.

Hardware requirements are as follows;

● 4+ GB memory
● 10+ GB storage
● macOS computer running version 10.10 or later
Step 1 Install Node.js and npm
What is Node.js?

Node.js is a JavaScript runtime environment that executes JavaScript code outside a

browser. It allows developers to use JavaScript to develop web applications

What is npm?

npm (Node Package Manager) is a dependency management tool for JavaScript

applications. It is used to publish, install, and develop Node programs.
Download Node.js
Visit the Node.js downloads page here. Click “macOS Installer” to download the
latest version of Node (installation also comes with npm)
Install Node.js and npm
Run the node installer pkg file and click “Continue”
Install Node.js and npm
Click “Continue” on the License page, then accept the License Agreement by clicking
“Agree”
Install Node.js and npm
Click “Install” and enter your user credentials. Then click “Install Software”
Install Node.js and npm
After the installation, validate that Node.js and npm were installed correctly by
running node -v and npm -v on the command line

Depending on when you are reading

this, your Node.js and npm version may
vary from this but that’s fine.

If you want a particular Node version,

nvm (Node version manager) is a good
tool. However that installation is out of
the scope of this guide.
Step 2 Install Git
What is Git?

Git is the most commonly used version control system. It tracks the changes you
make to files, so you have a record of what has been done, and you can revert back to
specific versions if something goes wrong. Git also makes collaboration easier,
allowing changes by multiple people to all be merged into one source.
Download Git Installer
Visit the Git downloads page here. Click “Download Latest Version”
Install Git
Run the Git installer pkg file and click “Continue” then “Install”
Install Git
Similar to before, you will be prompted to input your user credentials. Then click
“Install Software”. After installation, verify by running git --version on the
command line
Step 3 Install VS Code
What is VS Code?

VS Code is a lightweight text editor that also has some IDE features. It is developed
by Microsoft and has a variety of plugins to make working with various file types
easier.

This guide will use VS Code but you may choose a different text editor if you prefer -
the core functionality will be the same.
Install VS Code
Visit the VS Code downloads page here. Click “Download Visual Studio Code”
Install VS Code
Run the downloaded VS Code installer. The VS Code icon will appear on the desktop.
Drag it to the Applications folder in Finder.
Step 4 create-react-app
What is create-react-app?

create-react-app is a node package (or “module”) that initializes a React project

without the need for any configuration. In simple terms, it sets up the starter code
for your project.
create-react-app
Open VS Code. Press Ctrl+` to open a terminal window. Run the following command
on the terminal:

npm install -g create-react-app

This command installs a node package (or “module”) using npm. The -g flag means it
will install globally, so you always have access to it on the command line.

● Installing a package without the -g flag means it will only be accessible by the
project it was installed in
create-react-app
Running create-react-app
in the VS Code terminal
create-react-app
Now, we can use create-react-app to set up our React project. Navigate to the
directory where you want the project in the terminal and run the following with your
application name:

npx create-react-app my-app

Note: npx is a package included with npm that runs other packages.
Step 5 Build React App
Once that’s done, navigate to the
project and start it with npm:

cd my-app

npm start
Build React App
Afterward, a localhost tab will open in your browser. If not, type localhost:3000 into
the browser. (The port number may also be 8080, verify in the terminal output). The
page should look like this:
Build React App
What happened?

This is the starter code that create-react-app built! npm start builds the project. As
you make and save changes, the project will automatically be rebuilt to reflect those
changes.

For example, open App.js in VS Code. You will notice that the text on line 10 is what
we see on the localhost page. Modify this text to whatever you want. You will notice
that once you save the file, the project will be recompiled on the terminal.
Build React App
Notice the changed text
Step 6 Push Changes to Git

Now that we have created, built,

and modified the React project, we
can commit our changes using Git.
First, stop the build by typing
Ctrl+C in the terminal
GitHub Account

GitHub is the most

popular git service.
Navigate here and create
an account if you don’t
have one already.
Create Repository
Once you’ve made an account, sign in
and click on the green “New” button to
create a new project repository.
(Alternatively, you can click here)

Give it a name and click “Create

repository”
Commit Changes
Now we are ready to commit our project to our new GitHub repository. In the VS
Code terminal. Note that after creating the repository, instructions are provided to
“create a new repository on the command line”. We will follow those steps (not
including the first step of creating a readme as it is non-essential).

We will need this

URL later
Commit Changes
Let’s walk through each command

git init

● Initializes a git repository in our project directory

git add .

● Specifies that all new or modified files (in this case every file in the project) will
be added to the repository

git commit -m “Initial commit”

● Specify a commit message that explains what this change is about

Push Changes to Repository
git branch -M main

● Specify the main branch of the repository (read more about git branching here)

git remote add origin

https://github.com/GITHUB_USERNAME/REPO_NAME.git

● Get this URL from the new repo instructions mentioned on slide 31. This
specifies which repository our project will be backed by

git push -u origin main

● “Push” (or save) our project to the main branch of our GitHub repository
Push Changes to Repository

Your output should look like

this. Refresh the repository
page on GitHub and you will
see the project files there as
well. Now you can collaborate
with others and maintain a
version history of your
changes.
End of Guide
Congratulations, you have completed this guide! You now have a macOS
development environment ready for React.js development.

● We covered the installation of tools such as Node.js, Git, and VS Code.

● Then we used create-react-app to set up the project’s starter code.
● Finally, we made a basic change to the React app and pushed the project to a
GitHub repository.

As a next step, if you would like to learn React, the official guide is an excellent
resource.
Troubleshooting - Working Tree Clean
If you get an error when trying to commit your project to GitHub such as “Nothing to
commit, working tree clean” then git has not recognized that files have been
changed.

● Make sure to save the modified files in VS Code

● Run git status to see the modified files
● Run git add . and try recommiting the files
Troubleshooting - Run External Application
When installing Git or VS Code, you may get an error preventing you from running
the application because they were not downloaded from the App Store.

Continued on next page

Troubleshooting - Run External Application
Open System Preferences, click on
“Security and Privacy”. Under the
“General” tab, you will see a
message saying that the app was
blocked from opening. Click “Open
Anyway” to open the application.