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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 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!

Latest 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!

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!