- Read Tutorial
- Watch Guide Video
We have a few dependencies that we're going to have to bring in and the very first thing that we're going to have to do if you do not already have this on your system is we're going to have to install homebrew. Now this is only if you are on a Mac. If you're on a PC we'll go through those set of dependencies in a separate guide. What homebrew does is it allows you to manage your various third-party code packages. So React by itself can't just run on your system. You have to have a number of code libraries that can manage all of the various processes such as running the code and translating it into something that the browser can understand and tasks like that. So the very first thing that we're going to do is install homebrew. So you're going to come right here and just copy and paste this install script and this is on 'brew.sh' and I'll place this link in the show notes.
After that open up your terminal. Now if you do not know where your terminal is you have a few ways of getting there. The easiest is if you just hit command and then the spacebar and just start typing in terminal and then hit return it will pop up.
So this is the terminal right here. So paste that in and then run it.
I already have brew on my system and so I don't have to do it but run through that it's going to take you a little while and so you can pause the video let that run on your system and then you'll be good to go. Now that's the first item.
Now the second is you need to install X Code. Now X Code is Mac's IDE and we're not going to be using. However a number of the various dependencies that were going to be working with they do require X Code and so I will place this link in the show notes as well. So what this is going to do is it's an application that you can go to get in the Mac App Store and download it.
This is a very large type of application you can see right here. It is five and a half gigabytes in size. So click on that install it. Accept all of the defaults and you will be good to go now with both of those items in place the next thing that we're going to do is we're going to install node so I'm switching back to the terminal in the way that you can install node is by saying 'brew'. That's why we had to install homebrew we needed a way of getting to brew in this brew command and one side note if you installed brew but did not restart your terminal you may have to restart your terminal so that it's aware of this brew command that you have on your system.
What it is going to do is it's going to go and connect with the homebrew servers so whenever we run this brew command it's going to go and it's going to check for anything that we want to install and so I'm going to say 'brew install node'.
Just like that and I already have it on my system but it's still going to go through the full process of looking up how it's going to update homebrew. At the very end, they'll most likely give me a little error saying that I already have node installed on my system but I'm going to let it run. You can see that process. I'm going to let the video kind of fast forward through until it's done and then we'll move on to the next step.
Okay that all went through and now I'm going to 'control L' that will clear everything off the screen. And now to verify that node has been properly installed we're going to run two commands. The first is 'node -v' and it shows that I have Node version '7.10.0'.
Yours might be slightly different at whatever time you're going through the course and the other thing that node brings automatically is 'NPM'. NPM is a very important library and it gives us the ability to manage our node packages. So just like how brew manages our code packages on our system and lets us bring in third-party libraries. Node has its own little version of brew called NPM and let us make sure that we have access to that. So I'm going to say 'npm -v' and if I run that it says 'npm update check failed'. I'm going to keep all of this in the course because you very well might run into the same issue. So right here you can see it even gives you a command.
So I'm going to just copy this exact command and what this is doing it just in case you're not familiar with Unix commands. What it's saying is that there is a permission issue and it's asking me to update the permission issue here in the config file so I'm going to run that you'll ask me for my password. And now let's try it again. So I am gonna say 'npm -v' and there you go it works. So this is also going to be something that you noticed throughout the course when I run into a bug. I do not edit it out and the reason for that is as much as I would love for you and everyone going through this to think that I don't make mistakes and I never run into problems. The truth is I run into problems constantly. All developers do. That's part of the process. And so anytime I find a bug or something like this I'm actually glad that I ran into it as much as I'd love everything to go very smoothly. That's not reality. So if you run into the same bug you will know exactly what to do it gives in as you can see is pretty helpful. It gave the exact command that needed to occur in order to get it fixed. So with all that being said, we are ready to rock and roll and build react apps on Mac.