Then we will open up our project in Visual Studio code or whatever text editor you prefer working in and we will install our project dependencies and we will run our project in the browser. After this is complete we will wrap up the video by briefly talking about what a gitignore file is and directly after we all make our first push to Git Hub. Okay so from the desktop if you hit command space and type in terminal this will get us to our terminal. What we're going to want to do here is type in js or first, we're going to want to navigate to where we want to place our project. I'm going to put mine on the desktop using cd desktop and then now I'm going to run js generate

and select react bootstrap for a project template.

I'm going to name it Madlibsapp but feel free to name it whatever you want. If you have not yet installed the dev camp JS builder node module navigate to NPM here if you copy and paste this into your terminal

you will be able to install the dev camp js builder. I'm not going to do this again since I've already done it. But that is how you do it if you've not yet installed it. Once you've installed that just run js generate again choose the template and name your project so don't feel like we're skipping over important information, this generator is actually getting us directly into the important material that you need to know to become a solid React developer as quickly as possible. Aside from the dev camp js builder let's go ahead and place our project under version control by first creating a repository on GitHub.com. You don't absolutely have to do this step right now but I highly recommend it as it will give you that much more experience with git and version control and it might actually make it easier for you to follow along. The first step in doing this is first navigating to github.com and then you should see a screen like this

once you sign in and go ahead and hit start a project. I'm going to first change the owner to a different account. You're just going to leave that the same and I'm going to change the repository name to MadlibsReactAppand you can name it whatever you want. For the description, I'm just going to put Mad Libs React application source code. I'm going to make it a public repository and I'm going to create repository. So the next thing we're going to do is first copy the link.

So we're going to go back to our terminal and we're going to change directory into the Mad Libs. Once we're in there we're going to want to type git init.

This will Initialize our empty git repository in this directory. The next thing we're going to want to do is to type in git remote add origin and copy and paste that link that we got from GitHub into here. Go ahead and hit enter and that will set up a repository.

So to make our first commit and push we're just going to type and git status to see what's different.

We're going to type git add .to add everything in there and hit git commit -m "initial commit" to make our first commit. So now I'm going to push it up using git push -u origin master. That will push our code up to our repository and Github. If you go back to Github and reload the page you'll notice that all of our code is there.

For each video, I will be leaving a link to each commit we make in the guide notes of each video. This will allow you to check out the source code for the exact video you're on. If you get stuck in any way they should be extremely helpful and I suggest you check out each commit at the end of each video just to make sure your code is the same as mine. Let's now go back to the terminal and minimize it. Then let's open up Visual Studio code and open up our project.

All right so let's go ahead and hit open folder and then navigate to your project. Mine is Mad Libs app on my desktop. And that will open our project. You can see here on the left that all of our project files are here

so you can use any editor you want but I suggest you follow along using visual studio code. If you really don't want to use Visual Studio code it really doesn't matter. So now what we're going to do is pull this thing up and it's going to give us access to a few things including the terminal what we're going to do now is type in npm install to install our dependencies. Okay, so now that our node modules have finished installing we're going to have to add a gitignore file and make sure we don't push up certain things to the repository like our node modules. The reason we don't want to push our node modules up to the repository is because it's a lot of code that we just install and it would be kind of a hassle to maintain. It's a lot easier just to keep the package .js file which tells us what dependencies we need to install and just push up this one file to Github and then have anyone who uses that project in the future. Just install the dependencies like we just did. Makes things a lot easier a lot quicker and a lot less of a hassle.

So how are we're going to do this is we're going to close this and this and we're just going to hit command new to create a new file and we're going to go over to gitignore for example and we're just going to copy this and paste it in here.

Then we're going to save this as .gitignore

and just to enter then use dot.

So you can actually delete the gitignore example you don't need that. All right. So we have a project set up let's go ahead and run our project in the browser. So back in the terminal to do this we can type in npm start and this will start up our application. Notice how it says project is running on localhost 3000 once it is compiled. We can go ahead and go to Chrome or whatever browser you're using and open up a new tab. Go to localhost 3000 and you will see that it says devcamp react starter. Now if we go back to a project in Visual Studio code and we head over to the source folder then the components folder and then to app.js. We can see that this is what's being rendered on the screen devcamp react starter in the h1 tag so if we change this to something else will notice it automatically updates once you save. So let's change it to Bottega Mad Libs and then hit command S and you'll notice the automatic updates over here in the browser. What we are going to do now is just open up a new terminal window or stop the app and we're just going to commit our changes and push it to GitHub. And then after that we're going to get into our react app and finally start coding. So if you type in

git status 
git add . 
git commit -m "added gitignore to ignore node modules and changed the h1 tag in our app.js"
git push -u origin master

That will push it up to our repository and we should be good to go see you in the next video.

Resources

source code1
source code2