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
- Delete the code inside index.css
- Remove unused imports and comments 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
- Delete unused meta tags
- Rename the 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!
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.