Create a React App in 5 Easy Steps: A Step-by-Step Guide

Follow along as I create the baseline structure for my latest React app, Surf Break Costa Rica.

Step 1: Create Your GitHub Repo

  • Sign into GitHub and navigate to the homepage
  • Select “New” next to “Repositories”
  • Name your repo, provide a description (you can change this later), and select the repo settings that meet your project needs

Step 2: Clone Your GitHub Repo

  • Select the green “Code” button and copy the HTTPS URL provided for your repo
  • Create a directory where you want to store your project locally
  • Open up your favorite CLI (I’m using GitBash below) and navigate to the directory
  • cd into the repo and open the project in your favorite IDE (I will be using VSCode for this project)

This is when I prefer to transition to my VSCode terminal for easier access. Feel free to stick to what works best for you

Step 3: Create React App

  • npx create-react-app . (depending on your internet connection, this could take some time)
  • npm start

Step 4: Remove Unused Create-React-App Boilerplate

Stop the app from running:

  • ctl c on Windows

Customize your app with the basics:

  • Inside the src directory, to keep it simple, remove the following files for now (you can add in relevant css and test files as you use them): App.css, App.test, logo.svg, reportWebVitals.js, setupTests.js
  • Delete React app code inside App.js and any unused imports
  • Add a temporary h1 with your title so you have something to see when you run the app
Remove unused code from App.js
  • Delete the code inside index.css
  • Remove unused imports and comments from index.js
Remove unused code from index.js

Inside the public directory:

  • Delete everything in this directory except for index.html and robots.txt
  • Go to your favorite favicon generator (I use https://favicon.io/) and download a favicon folder
  • Drag unzipped files into the public directory
  • Delete comments in index.html and paste in/replace the relevant link tags into the HEAD of your HTML
Files generated by favicon.io
  • Delete unused meta tags
  • Rename the app title
Import your custom favicon files and add your app title

Step 5: Save Your Changes

In a new terminal (separate from the one you used to npm start), save your changes.

  • git add .
  • git commit -m “Update create-react-app boilerplate and import custom favicon.”
  • git push -u origin main

Voila! Your Blank Canvas Awaits

The end result, a blank canvas for you to begin your development!

Your blank canvas awaits!

Don’t forget to refer to the README.md for React tips. Keep in mind that you’ll want to delete it before publishing your app.

I invite you to join me in my dev journey as I build my first real-world comprehensive React app from scratch. Keep an eye out for my next tutorial, where I’ll walk through creating Surf Break Costa Rica’s login portal!

If you found this tutorial helpful, I’d love to hear from you in the comments below.

I'm a Full Stack Web Developer, with a passion for the frontend and strong interest in React development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store