Github Repo Setup for React App

repo

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, npm, create-react-app, Github Account, Git setup

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
   

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" You should see your file structure on the left after CRA is executed

4. Run npm start to confirm React is working in the browser below.
   
   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

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 Once the screen appears you are ready to go back to the vscode terminal
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
4. This command is to check if we are pointing the correct repo git remote -v

5. Run and git add . and `git commit -m "My first commit"
   

6. git push
   

   • we get a notification that set upstream flag is needed

7. Lastly git push --set-upstream origin master
   

8. Check Github to confirm

Links 🔗

repo

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding!