DEV Community

Cover image for Setting up a new (React) project with GitHub
Maasa Kono
Maasa Kono

Posted on

Setting up a new (React) project with GitHub

Almost every time I started up a new project during Flatiron School's (Part-Time) Online Software Engineering Boot Camp program (which I just recently graduated from, woohoo~~~!), I kept finding myself scanning through Google and Stack Overflow trying to figure out (AGAIN) how to get my local project connected to my GitHub repository. I am uncertain as to why this seemingly simple process would repeatedly escape my memory, stacking on unnecessary stress when I was in project mode.

So! If you happen to be struggling with this step as I had, here is a simple set-up to get your new app (I will be using a React app for this example) connected to GitHub.

Create React App

To get your React app started, first run the following line of code in your terminal:

npx create-react-app my-portfolio

To break this down one piece at a time:

Connect to GitHub

After the necessary packages are installed, hop on into the newly created app's directory and run the following lines of code in the terminal:

  • git init (creates a new Git repository)
  • git commit -m "First commit" (takes the staged snapshot and commits it to the project history with the message between the quotation marks)
  • git remote add origin <your app's Github repository URL> (creates a new remote called "origin" located at the url)
  • git pull origin master (may or may not be necessary, but this pulls changes from the locally stored branch origin/master and merges it to the local checked-out branch)
  • git push -u origin master (push the local content to GitHub)

At this point, your project should be visible on your GitHub repository.

Making Changes

Now going back to the files created by create-react-app, you will notice that it is a bit inflated with content you most likely won't need for your own project. As that was the case for me, I went ahead and deleted several files from the public and src folders, so that the entire app directory looked like this:

Alt Text

Much cleaner!

It is good practice to keep track of noteworthy changes so that you can see how your project evolves over time, and to revert changes when encountering a bug. 🐞

Run the following lines of code when noting important changes:

git add .
git commit -m "Description of changes here"
git push -u origin master

You can think of commit as Git's version of "Save" in a word processing software.

Now, move on and have fun with your project!

Here are some helpful links:

Discussion (2)

gregpetropoulos profile image

Be aware the clone of your repo and the CRA both have their own .git which means when you will have a repo inside a repo
and will grossly effect your git commands....and get you confused. I know personally :)

chelseacastelli profile image

Upon creating the react app, it looks like a .git folder is automatically created. So I can just link it to the repo I create on GitHub, correct?