Setting up a new (React) project with GitHub
Tags: react, github, webdev, git
Published: 2020-08-30 21:27:32

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`](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/#:~:text=0%20npx%20is%20pre%2Dbundled,run%20any%20sort%20of%20Node)
* `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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0gf722kxyiu4swpzru6p.jpg)

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](https://www.atlassian.com/git/tutorials/saving-changes)
* [Creating a new React app](https://www.freecodecamp.org/news/portfolio-app-using-react-618814e35843/)