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:

• npx is a package runner tool that comes with npm (from version 5.2 and after). Here is a detailed article explaining the difference between running npx versus npm
• create-react-app only creates a front-end build pipeline that can be used with any back-end API.
• my-portfolio is the name I've given to this project, so you would just insert the name of your app/project here.

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:

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:

• Details on saving changes with Git
• Creating a new React app