How to Create a React App

Part I — Create React Project using Create React App

Step 1: Create a new local repository

First, navigate to my local GitHub folder where all my local repositories are kept

Now create my local repository by creating my basic react application with:

npx create-react-app <app-name>

Part II — Open the Project with VS Code

Part III — View the Project in the Browser

First, let’s open the project in the terminal

Part IV — Add Repository to GitHub with the CLI

Step 1: Create a new repository on GitHub

Do not initialize with a readme file, gitignore, or license:

Step 2: Initialize the local directory as a git repository:

Open terminal in our local folder:

Step 3: Add files from local directory to git staging area to prepare for commit

Step 4: Commit files from staging area to local git repository

Step 5: Get the URL of the remote repository from GitHub:

Step 6: Add remote URL to git via the terminal so local repository can be pushed to the right place

Verify the remote URL

Step 7: Push the code from local git repository to the remote git repository

Step 8: Verify changes pushed to remote git repository

Part V — Deploy React App to Surge with a GitHub Workflow

Step 1: Create surge token and add a secret to the GitHub repository

Step 2: Go to the Actions tab in the GitHub repository on github.com and click the set up a workflow yourself link

Step 3: Write the YAML for the workflow

Step 4: Commit the workflow to the master branch

Step 5: Check the Actions tab for the workflow to deploy successfully