DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Github Repo Setup for React App
Greg
Greg

Posted on • Updated on

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
    Terminal

  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 You should see your file structure on the left after CRA is executed CRA install
  4. Run npm start to confirm React is working in the browser below.
    React
    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

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 Once the screen appears you are ready to go back to the vscode terminal setup gituhub
  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
  4. This command is to check if we are pointing the correct repo git remote -v git remote -v
  5. Run and git add . and `git commit -m "My first commit"
    commit

  6. git push
    push

    • we get a notification that set upstream flag is needed
  7. Lastly git push --set-upstream origin master
    push setup

  8. Check Github to confirmtest-app

Links πŸ”—

repo

❀️❀️❀️

Social

Twitter
Linkedin
Portfolio
Github

🀘
Happy Coding!

Top comments (0)

You can see total article reactions, views, and listing information by heading over to your dashboard.