This video is available to students only

A Beginner's Guide to Using Git to Push Code to GitHub

Setup Scroller using Git, create a new GitHub project, and how push code to GitHub.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

With our project structure set up for Scroller, wouldn't it be great if other people could see our code? In this lesson, we'll be using the insanely popular source control software called Git to push our code into Github.

What is source control?#

Source control software tracks changes on our code to show the history of our project over time. Source control allows us to undo/redo code changes, and see when and by whom a change occurred. The most popular source control software is Git. Git is a distributed source control system. This means our code lives on a server somewhere else. We pull down the code onto our local computer, perform the code change, then push those changes up to the server. Distributed source control systems allow for multiple developers to work on a single codebase, disconnected from one another, without overwriting each other's changes. GitHub is a popular choice in being the server.

Git Branching#

Branches in Git are a way of encapsulating changes. There are many different branching strategies such as the GitHub flow and GitFlow. Each branching strategy provides a framework on how to develop features, fix bugs, and release code. The most popular of these in open-source is the GitHub flow.

GitHub branching flow#

The GitHub branching flow starts with a main (or master in older repositories) branch. Any code in the main branch should be deployable, or in other terms, anything in main should be tested and functional; ready for a user to consume the code. When a new feature or bugfix is being worked on a developer will create a branch from main using the command git checkout -b [branch name] or git switch -c [branch name]. Generally, the branch is called feature/[descriptive name of branch here] or bugfix/[descriptive name of branch here respectively. Any code changes will be performed within a branch, committed, then pushed to the server repository (GitHub). Then, a Pull Request is created into the main branch. A Pull Request is a chance for project owners, other developers, and automated scripts to review the code changes, and mark them "ready to merge" or "needs work". If any changes need to be made, then we would update the code on our computer, commit the files on our branch, and push it back to the server repository. Updating our Pull Request. Once everything looks good our code is merged and applied to the main branch!

An example of the workflow can be seen below.

Gitflow branching model diagram.

Setting up Scroller#

Navigate to https://github.com. If you don't already have an account, create a new one! GitHub is a free and open repository for code.

Creating a GitHub Repository#

On the top right of your screen, click the "+" icon and select "New repository".

New repository being created

This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

Unlock This Course

Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Creating React Libraries from Scratch