loading...

Easy React Project Set-Up

heatherhaylett profile image Heather ・2 min read

You know what they say, taking the first step is the key to getting started. Easy as they are, there are a few steps to set up a new project. I put them all in one place so I no longer have to google the individual tasks each time. This post is focused on setting up a project using create-react-app.

Step 1: Create a local React directory

In your terminal run the following commands to use create-react-app, where my-app is the name of your project.

npx create-react-app my-app
code my-app

Step 2: Clean up the create-react-app files

The files created in your new project require some clean up to have a fresh start.

  • Open App.js and remove code between the header tags
  • Open index.html and change the name and content as well as the text in title tag
  • Delete react png files in the public directory
  • optionally insert your own favicon
  • Delete everything in App.css

Step 3: Create a Github repository

Click the new repository button in GitHub and select a unique name. You don't need to initialize with a README.md if you used create-react-app
create repository

Step 4: Connect your repository to your local project

Use the instructions Push an existing repository from the command line

git remote add origin 'your_url_name'
git push -u origin master

Step 5: Change Master to Main

While this step is optional, I think it's important. @afrodevgirl has created an excellent resource.

Follow this post to change master to main
https://dev.to/afrodevgirl/replacing-master-with-main-in-github-2fjf

You should now have a blank React canvas to begin developing. Five easy steps to start your React project!

Posted on by:

heatherhaylett profile

Heather

@heatherhaylett

I’m interested in building technologies that impact others' quality of life, particularly through web accessibility, UI, and API architecture. Twitter: @heather_haylett

Discussion

markdown guide
 

Once use create-react-app, it means u r far away from clean react project😢.

 

I feel like the cleanup step isn't too bad!