Github Repo Setup for React App
Tags: react, github, git, repo
Published: 2021-10-27 23:34:16


 ---
title: Github Repo Setup for React App
published: true
description: Set up your React app with a Github repo   
tags: react, github, git, repo
//cover_image: https://direct_url_to_image.jpg
---
[repo](https://github.com/GregPetropoulos/test-app)

## React && Github
I will discuss the appropriate way to create a react application that points to a Github repo. First, I will set up a react application locally. Secondly, set up a Github repo and lastly point my local react application to the newly created Github repo to push my changes to.



 *_Prerequisites you need to have updated versions of [Node.js](https://nodejs.org/en/), [npm](https://nodejs.org/en/), [create-react-app](https://github.com/facebook/create-react-app), [Github Account](https://github.com/), [Git setup](https://docs.github.com/en/get-started/quickstart/set-up-git)_


## React
1. Create a folder with the project name
   - my-app
2. Inside my-app open up the terminal, I use vscode Integrated Terminal by right clicking in my-app
![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw5epj7l63eegkncxj2o.png)
 

3. In the terminal run `npx create-react-app .`
  - Don't forget the dot(.)
  - This builds the react template and the dot assigns top level project folder named "my-app"
![CRA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kjz60im9xd1gs2we23p.png)
You should see your file structure on the left after CRA is executed 
![CRA install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs535z1bkh7xtng2htfr.png)
 
 
4. Run `npm start` to confirm React is working in the browser below. 
![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpeky0w45chv85ltmdxj.png)
 Close the browser at this point and leave vscode open*


We now have a working React app with it's own local git only. All the git commands like `add` and `commit` would remain local and never reach Github. In the next step we will set up a Github repo.
 
![Github icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ljujxfloftq1rzapfcm.jpg)
## Github
1. Go to your Github account and create repo by clicking on "repositories" and then "new"
2. Enter the name of your repo, I'll call it test-app it can be different from the project folder named "my-app".
   - radio button public
   - **Crucial -- Do not add README, .gitignore or license 
   - click on Create repository green button
![New Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g6pqtfm006975lhda9u.png)
Once the screen appears you are ready to go back to the vscode terminal
![setup gituhub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcdw7hn4z1xplpqvlrz7.png)
3. Now we are ready to use our newly created github repo with react in the same vscode terminal we created the CRA and run this command `git remote add origin https://github.com/username/test-app.git`
  - In my case it was `git remote add origin https://github.com/GregPetropoulos/test-app.git`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ic2rjyxovl9bxq4e5hk.png)
4. This command is to check if we are pointing the correct repo `git remote -v`
![git remote -v](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sesh9kziex3hrxlr1ye.png) 
5. Run and `git add .` and `git commit -m "My first commit" 
![commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytbjk9py1fw1mrwdptkf.png)
 
6. `git push`
![push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frckayk8va8pmf8wqa7p.png)
 - we get a notification that set upstream flag is needed

7. Lastly `git push --set-upstream origin master`
![push setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbc32uvny3x4hwxftnux.png)
8. Check Github to confirm![test-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj6v9btvieyy3l67x1lb.png)

## Links :link:
[repo](https://github.com/GregPetropoulos/test-app)

:heart::heart::heart:

## Social 

[Twitter](https://twitter.com/GregoriosPetro1)
[Linkedin](https://www.linkedin.com/in/greg-petropoulos/)
[Portfolio](https://gregpetropoulos.dev/)
[Github](https://github.com/GregPetropoulos)

:metal:
Happy Coding!