|
| 1 | +# Git Branches |
| 2 | + |
| 3 | +Git allows you to keep multiple versions of your code and quickly switch between versions. It calls each version a "branch". Follow the instructions below to learn about branching. |
| 4 | + |
| 5 | +Let's pretend you work for a company running a messaging application. Your boss is thinking about changing the colour of the links in messages. She can't decide whether to change them to red or green, so she asks you to show her what it would look like in each colour. |
| 6 | + |
| 7 | +In this case, we use branches to create copies of our messages. In one version we will change the links to red. In another version we will change the links to green. Then we can switch between them to show her both versions. |
| 8 | + |
| 9 | +First, open the terminal in your code editor. _The terminal is where you entered `npm run 8` to run this exercise._ |
| 10 | + |
| 11 | +Check which branch you are currently in by entering the following command into your terminal: |
| 12 | + |
| 13 | +``` |
| 14 | +git branch |
| 15 | +``` |
| 16 | + |
| 17 | +You should see the following printed to the terminal, which tells you that you currently have one branch, the `master` branch: |
| 18 | + |
| 19 | +``` |
| 20 | +* master |
| 21 | +``` |
| 22 | + |
| 23 | +Enter the following command into your terminal to create a new branch: |
| 24 | + |
| 25 | +``` |
| 26 | +git checkout -b red_links |
| 27 | +``` |
| 28 | + |
| 29 | +Enter `git branch` to see if the branch was created. You should see the following: |
| 30 | + |
| 31 | +``` |
| 32 | +master |
| 33 | +* red_links |
| 34 | +``` |
| 35 | + |
| 36 | +This means that you have two branches and you are currently editing the `red_links` branch. |
| 37 | + |
| 38 | +Now edit the `style.css` file to turn the links in your messages red. Then add and commit the files. |
| 39 | + |
| 40 | +_Hint: If you tried to `git push` you may have received an error. Don't worry, we'll cover this later. Continue following the instructions below._ |
| 41 | + |
| 42 | +You can now switch between your `master` branch, where the links are blue, and your `red_links` branch, where your links are red. Enter this command to switch to the `master` branch: |
| 43 | + |
| 44 | +``` |
| 45 | +git checkout master |
| 46 | +``` |
| 47 | + |
| 48 | +Now look in your browser. Your links should be blue. _Hint: You may need to run your `npm start 8` command if you stopped it._ |
| 49 | + |
| 50 | +Use this command to switch to your `red_links` branch: |
| 51 | + |
| 52 | +``` |
| 53 | +git checkout red_links |
| 54 | +``` |
| 55 | + |
| 56 | +Now check your browser to make sure the links are red. Try switching back and forth between your two branches a few times to see how it works. |
| 57 | + |
| 58 | +_Hint: Don't copy/paste the commands in this exercise. You will learn more by typing them out. It's ok if it takes you a little longer!_ |
| 59 | + |
| 60 | +Next you'll need to create a new branch for changing the link colour to green. |
| 61 | + |
| 62 | +Enter the following command to make sure you are on the `master` branch: |
| 63 | + |
| 64 | +``` |
| 65 | +git checkout master |
| 66 | +``` |
| 67 | + |
| 68 | +Then enter this command to check out a new branch for your green links: |
| 69 | + |
| 70 | +``` |
| 71 | +git checkout -b green_links |
| 72 | +``` |
| 73 | + |
| 74 | +Edit the `style.css` file to turn the links in your messages green. Then add and commit the files. |
| 75 | + |
| 76 | +Now enter the following command: |
| 77 | + |
| 78 | +``` |
| 79 | +git branch |
| 80 | +``` |
| 81 | + |
| 82 | +You should see the following: |
| 83 | + |
| 84 | +``` |
| 85 | +* green_links |
| 86 | + master |
| 87 | + red_links |
| 88 | +``` |
| 89 | + |
| 90 | +This means you have three branches and you are currently on the `green_links` branch. You can now switch between all three branches: `master`, `green_links`, and `red_links`. Each time you switch, check your browser to see that the links have changed to the right colour. |
| 91 | + |
| 92 | +To complete this exercise, you will need to push both branches. Normally, you would switch to the branch and push like this: |
| 93 | + |
| 94 | +``` |
| 95 | +git checkout red_links |
| 96 | +git push |
| 97 | +``` |
| 98 | + |
| 99 | +If you try to do that, you will receive an error message. When you have a _new_ branch, you have to add extra information to the `push` command: |
| 100 | + |
| 101 | +``` |
| 102 | +git checkout red_links |
| 103 | +git push -u origin red_links |
| 104 | +``` |
| 105 | + |
| 106 | +_Hint: You only have to use this extra information the first time you push a new branch. After that, you can push to your branch with just `git push`._ |
| 107 | + |
| 108 | +Using this technique, try to successfully push your `green_links` branch. |
| 109 | + |
| 110 | +When you have successfully pushed both branches, you should see them in your GitHub repository. You can find them by clicking on the **Branch** button. Here's an example of what it should look like: |
| 111 | + |
| 112 | + |
0 commit comments