Create Your First GitHub Pull Request
Create Your First GitHub Pull Request

Create Your First GitHub Pull Request

Kapehe's Profile
Kapeheon Jul 23, 2021

If you want to work in web development, learning how to create pull requests is essential.

"Can you create a PR?"

Have you ever heard that and had to Google around for PR's and how to get one done successfully? Well, you've come to the right place. We are going to start from the beginning of creating your first Pull Request.

A Pull Request, or PR, is a way to contribute to a repository in GitHub.

πŸ˜„Tip
A Pull Request allows us to contribute code to our own repo, our teams repo, or an open source repo.

The repository needs to be open, or you need to have permission to be able to submit a PR. If you have permission, then go ahead and follow the upcoming steps! If you do not, simply "Fork and Clone" the repository. Once you Fork it, then it will live on your own GitHub account as a forked repo.

Pull Requests are a big deal in the world of collaborative coding. If you've ever heard the term open source, then you may be familiar with this concept of having anyone see your code and make suggestions to it.

You could even contribute to some of the code changes and even issues on favorite projects like React. We can see the pull requests that others have done to help make React a better library.

An example of why you would want to make a Pull Request is you are working on a team and you contribute to the repository. Creating a PR is important because we wouldn't want to push to the master branch until code reviews are completed and a teammate approves it.

Let's talk about the steps to create a pull request on a project. We'll be walking through the steps to grab a project and make a pull request.

There are two ways to start the process.

  1. Cloning another's project
  2. Your own project you started from scratch (not very likely)

The most common case is going to be #1. So we are going to start this example by cloning into a project that was created earlier. It's a basic React app that was created via the command create-react-app. We can find that GitHub repo here.

Once in that GitHub repo, click on the green button that says, "Clone or download". A dropdown will show us a password protected SSH key. You can change it to HTTP by clicking "Use HTTPS" in the upper right-hand corner of that dropdown. We are going to use the SSH way in this article.

Clone a GitHub Repo

Copy that key! We are going to need it soon!

In your terminal (we are on iOS for this example), navigate to the location in your computer where you would like this project to live. To learn more about navigating throughout the Terminal, check out this article on "10 Need to Know Mac Terminal Commands"!

Using the following command, we are going to officially clone the project and be able to have all the code on our local machine:

bashgit clone git@github.com:kapehe-ok/react-git-pr.git

Use the command to get into the project:

bashcd react-git-pr

Now we are cloned into the project and can start with our first PR!

For the remainder of the article, let's work in VS Code. Go ahead and open up the code in VS Code.

πŸ˜„Tip
Note! From the Terminal, a short cut to open VS Code is code . This needs to be installed. Within VS Code hit "cmd + shift + P". Type in "Shell command: Install 'code' command in PATH." and hit "Enter". From now on, you can use code . to open up VS Code from Terminal.

When making a PR, we want to create our own branch. If someone is having you create a PR it's because they don't want you to push to the Master branch. Using the following command, we jump out of the Master branch and into our own branch:

bashgit checkout -b kapehe-first-pr

The 'b in this is indicating that we are creating a brand new branch. The kapehe-first-pr is the name of the branch. Feel free to name a branch whatever is fitting.

Want to double-check you are in the new branch? At the bottom left-hand corner of VS Code, you'll see the name of the branch you are on. If we see "kapehe-first-pr" there, then we did it right! If we see "master", something's not right!

Make any change within the code just so we have a change to commit in the PR. We can dive into src/App.js and edit the <div> in there. We can edit it to have the line <h1>Aloha! Kapehe here!!</h1>! Let's hit "Save" and get ready to make this PR!

Making a Change in VS Code

There are a string of commands that we are going to be doing here to make our first official PR. We'll go over each one!

We want to check the status of all the files we changed. To do that, run the command:

bashgit status

All the files that we changed and saved will show up here in red. Check out this screenshot to see how that would look:

Because we change the src/App.js file, we see that in red here.

Checking What's Changed

There are many ways to add the files to the queue to get pushed into the PR. In this article, we'll go over two different ways.

  1. git add . - This will add every single file that shows up red when running git status
  2. git add <filename> - This command allows us to type in the particular file we would like to add.

In today's example, we are going to use the second way. Go ahead and run the command:

bashgit add src/App.js

And we should nothing happen! So how do we know it was added? Or at least the right files were added? Run our git status command again!

Viewing New Changes

We now see that src/App.js is now in green! That means it was added and we are good to commit this change.

This command is where we name our commit. We generally want the commit message to coincide with what is happening in the file updates. Now that our file is added to the queue, let's go ahead and commit it. Run the following command:

bashgit commit -m "Updating App.js div text"

The -m in this command is stating that we want to create our message within this command. The "Updating App.js div text" is our commit message. We can put whatever we want here. Try and make it make sense for what changes occurred.

Committing Changes

Here we are! We made it to the final PUSH!

To push all of our updated work to the GitHub repo in the form of a Pull Request, run the following command:

bashgit push origin kapehe-first-pr

That last part of the command is our branch name! Make sure that matches up exactly with the branch name so that there are no issues when pushing.

Pushing Changes to GitHub

We pushed! But we are not done!

In this final step, we need to head back to the GitHub repo.

Right away, we should see the following:

Seeing Changes on GitHub

That light yellow line is new! That's showing our branch and that a push was created "(less than a minute ago)". See that green button that says "Compare & pull request". Let's hit that!

Once we do that, we can rename the Pull Request here, but for now, we'll just keep it as what we named it when we were committing it, "Updating App.js div text". Hit the green button that says "Create pull request".

Creating the Pull Request

It's done! We have created our first Pull Request!

To double-check that everything is good, we can click on the tab that says "Pull requests". There we will see our PR and any other PR's.

See the Pull Request

Once we click into that, we will see details about our PR. We can see what was changed by clicking on the "Files Changed" tab, we can look at all the commits that happened under the "Commits" tab, and we can even merge into the master branch on the "Conversation" tab.

To merge into master, we would click on that green button that says "Merge pull request". Only do this when the PR is approved. Most likely, the owner of the project will coordinate on who merges the PR into master. It's probably a safe bet to not do it.

Accepting and Merging the Changes

Let's recap those steps quickly:

  1. Cloning into a project
  2. Creating a new branch off of the master branch
  3. git status
  4. git add . or git add <filename>
  5. git status
  6. git commit -m "message here"
  7. git push origin <branchname>
  8. Go to the repo in GitHub and create the pull request!
  9. Tada!! πŸŽ‰ PR Created!

Now that we have created our first Pull Request, go practice some more. Take a project of your own, create branches off of it, and practice creating PR's! The more you practice, the better we'll get at it!

Kapehe

Kapehe

As a former flight attendant, Kapehe dove into the world of code at lightning speed. She attended a coding bootcamp and learned full-stack web development in a short 12 weeks.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)