Pushing Your First React App to GitHub: A Step-by-Step Guide

In the previous article(https://medium.com/@regondaakhil1509/getting-started-with-react-a-beginners-guide-to-setting-up-your-first-application-a6d8a1ae414), I walked you through the process of setting up your first React application. Now, it’s time to take the next step and learn how to push your local code to GitHub. This step-by-step guide will show you how to create a new repository on GitHub, connect it to your local repository, and push your code to the remote repository.

Whether you’re new to React or just starting with GitHub, this tutorial will help you get your project online and accessible to collaborators or potential employers. Get ready to take your React skills to the next level!

Introduction — About Git & GitHub

Git

• Git is a version control system for managing changes to code over time.
• With Git, developers can keep track of code versions, collaborate with others, and revert to previous versions if needed.
• Git is a distributed version control system that allows multiple developers to work on the same project simultaneously, with each developer having a complete copy of the code repository on their local machine.
• You can learn more about Git at https://git-scm.com/about.

GitHub

• GitHub is a web-based platform that hosts Git repositories.
• It offers features like pull requests, issue tracking, and code reviews that make collaboration easier.
• GitHub also has a social aspect that lets developers follow each other and share their work with the broader community.
• You can learn more about GitHub at https://github.blog/category/company/.

• GitHub is not the only platform that offers Git hosting.
• Other Git hosting platforms include GitLab, Bitbucket, and SourceForge.
• GitHub is popular because it’s easy to use and has a wide range of features.

Setup

Before diving in, it’s important to confirm that all the technical prerequisites are in place. The foremost requirement is to have Git installed on your local machine. If you haven’t already, you can download Git using https://git-scm.com/downloads and install it.

To verify the installation, run the command on your terminal:

git -v

Example(number may vary in your system):

Next step is you’ll need to create a GitHub account if you haven’t done so already.

To create a new repository in your GitHub dashboard, you can click on the drop-down menu represented by a plus sign in the upper right-hand corner of any page. From there, choose the option labeled “New repository,” or you can click New Repository.

Next, we need to complete the form.

1. Enter a name for your repository in the “Repository name” field.
2. Optionally, you can add a description of your repository in the “Description” field.
3. Choose the visibility setting for your repository. If you want to keep your repository private, select “Private.” Otherwise, select “Public.”
4. Select the “Initialize this repository with a README” checkbox if you want to create a README file for your repository.
5. Choose a license for your repository, if desired. You can choose from a list of popular open-source licenses, or you can choose “None” if you don’t want to add a license.
6. Click the “Create repository” button.

Hurray! we just created a new repository.

The next step is to move our code from local to GitHub.

Get Akhil Regonda’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If you are setting up the git for the first time, we need to configure the git with name & email. Run the following commands on your terminal.

git config --global user.email "Your_Email"
git config --global user.name "Your_Name"

Initialize Git in your local React project:

Open “your_local_repo”(in my case, my_portfolio) in VS Code, open the terminal, and run the command to initialize Git in that directory.

git init

git init is used to initialize a new Git repository in the current working directory. Once the repository is initialized, Git starts tracking changes to the files in the directory

Adding remote Repository:

The remote repository link on GitHub can be found on the repository page by clicking the “Code” button, selecting the appropriate protocol(HTTPS in our case), copying the URL to the clipboard, and running the following command in the VS code terminal.

git remote add origin https://github.com/your-username/your-repo.git

By specifying the remote repository’s URL in the git remote add command, you are telling Git to associate the local repository with the remote repository on GitHub.

Stage and commit changes:

Use the “git add” command to stage all the files in your React project, and then use the “git commit” command to commit those changes.

git add .
git commit -m "Your commit message"

git add . stages all changes in the current working directory and its subdirectories, including new files, modified files, and deleted files. It is a shortcut for manually staging each individual file.

git commit is used to record changes to the Git repository. Once you have added changes to the staging area with git add, you can use git commit to record those changes to the repository.

The -m option followed by the commit message allows you to provide a description of the changes made in the commit. The commit message is an important part of Git's version control system because it helps you and others understand what changes were made and why they were made.

Push changes to GitHub:

Finally, use the “git push” command to push your committed changes to the GitHub repository by running

git push -u origin main

git push: This command is used to send committed changes to a remote repository. It is necessary to use git push after committing changes in a local repository to update the corresponding remote repository.

-u: This flag establishes the upstream relationship between the local and remote repositories. When you use the -u flag with git push, Git sets the default upstream branch for the current branch. This means that in future pushes and pulls, Git will automatically use the default upstream branch without having to specify it each time.

origin: This is the name of the remote repository. In Git, the default remote repository is named origin. This command tells Git to push the changes to the remote repository named. origin.

main: This is the name of the branch being pushed to the remote repository. In Git, the default branch name is main. This command tells Git to push the changes made to the main branch to the origin remote repository.

Hurray! with this, your local React files should be uploaded to GitHub, and you can access them from the remote repository.

Further Reading

If you found this article helpful, you might also be interested in my other articles on React and Javascript:

• 10 Commonly Made Coding Mistakes in JavaScript and How to Avoid Them
• 10 Critical JavaScript Mistakes Experienced Developers Still Make
• 10 Concepts to Know Before Building a React Application
• The Ultimate Checklist for Starting a React Project: Best Practices and Tips
• Getting Started with React: A Beginner’s Guide to Setting Up Your First Application
• 10 Commonly Made Coding Mistakes in React And How to Avoid Them
• 10 Critical React Mistakes Experienced Developers Still Make

Check them out to enhance your coding practices across different technologies!

Happy coding!