It is now time to push all of our code up to GitHub, and we're going to follow a few steps before we do that because there are a few common pitfalls that I want you to avoid. So, let's walk through that.

You should have already gone through the introduction to GitHub course, so you should be familiar with the steps associated with GitHub such as pushing up, adding, committing, doing all of those kinds of things, and you should definitely have a GitHub account.

If you do not, I highly recommend that you pause the video right now. Go through those videos first because this is going to be one of the steps where I am not going to walk through in detail every part of it. I'm simply going to follow the same steps that I taught in that course.

So, let's start off by opening up the terminal here, and I'm also going to give us some room. Now, whenever you want to create a new repository, the first command to type is going to be git init, and this is going to create an empty git repository.

So, as long as you see the output that looks something like this, then that means that everything's working.

Now before we want to add all of our code, we want to make sure that we're not adding everything. When I'm saying that, there are a few things that you want to make sure that you're not going to be pushing up such as our node modules directory. So what we need to do first is to create a way of having git skip this.

So the way to do that is to go in the route of the application, so make sure the file you're going to be creating is going to be there in the route. Click on new file here and then the new file is going to start with a dot, and then it's going to be .gitignore.

Then just as an empty file here, you can just type node_modules/, hit save, and then that's going to do is now when we commit, it is going to skip the node modules directory. The reason for that is because there's a couple reasons, one is if you want to share this project with anybody else, so if someone else is going to pull this down, or if you're going to pull it down on a different computer, you want to get a fresh copy of the node modules.

Then also, if you're going to deploy this to the web, the system that you're going to be using is also going to create its own version of node module. So just like we said back in that video is we want to treat our node modules as temporary, they are simply our dependencies that we want to use for that instance.

So, we're going to use node modules locally. If we're going to push it up to a server, it's going to have its own set of node modules. In fact, every time that we deploy, it's going to refresh all of them. So that is something that is important to keep in mind. So we do not want to include that inside of git.

Now, if you open up the terminal again, and so now what you can do is type git and then status. What this is going to do is all of these items in red, these are the items that are untracked.

git status

So that means that we need to add these and then we need to commit them. One thing to note is our node modules directory is not here, so that's a good thing, that means it skipped over like it should. So now, we can type git add, space, and then a . that is going to add all of the code.

git add .

From there, if you now type git status, you can see that all of these items are now green, which means that they are changes ready to be committed.

Now what we can do is commit them. So you can say git commit -m and then just give a description of what we're doing. Here, the standard is to call it the initial commit, but you can call it anything you want, just make sure that it's nice and descriptive, and hit return.

git commit -m "descriptive commit message"

So now, if you type git status, you will see that we're on branch master, and there is nothing to commit.

So now that we have all of our commits in order and everything is good locally, now we need to go and we need to create this code and create a repository on Github. So switch over to Chrome, go to Github and make sure that you are logged in.

So now, we're going to create a new repository. Let me also zoom out just a little bit so it's easier for you to see. Right now when I'm filming this, the easiest way to create a new repository is with this little plus sign in the top right corner by your profile, you also could do it here on the left with this green new button, really any spot that says New Repository you can do it with.

So I'm going to click on New Repository.

And we'll give it a name, so here, I'm going to call it my react-portfolio, and I don't have ... Oh, it looks like I have an application already named that.

The name here doesn't matter, I'm just going to call it exactly the same name that I have it locally. So, jordan-hudgens-react-portfolio, and you'll get a little green arrow there, assuming that that name has not been taken by you.

That's all it's doing is it's making sure that the name is unique for this URL. It is going to be a public repository, that means that other people are going to be able to this code. If you want it to be private, you have to pay for that, and you click on private.

We do not want to initialize the repository with the README because we already have that, so we can just click on Create Repository.

Now, we just need to connect our local version with Github. So we can, if you notice, we've actually done each one of these steps right here.

We only need to do the last two, which you can see they gave us the last two right here.

I can just hit copy here and then come and paste those in and type in the pass phrase if it asks for that, hit return, and now, we should have all of our code minus our node modules pushed up to that repository.

So it looks like no errors occurred. If I switch back here and now just click on the link, you can see all of our code is right here.

If you scroll down, do you remember when we talked about the README? That is exactly what it gets rendered to.

So that big H1 heading here, and if you added any other content, it would go right here.

Nice job if you went through that, you now have a good understanding for the configuration files associated with a React app. We now have our application on Github so we can track each one of our key changes, and then also, we're ready to get into the React fundamentals.