DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Heather
Heather

Posted on

Easy React Project Set-Up

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
beastea3 profile image
BeasTea

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

Collapse
 
heatherhaylett profile image
Heather Author

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

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs