Note

You will need to use the react-redux-router template option in js-generate for the portfolio project. See note at bottom for sass compiler fix.

Now, make sure that you are in whatever directory you want to add the project to. I have a code directory, at the route of my system, but depending on your own personal system whether you're on Mac or Linux, or Windows you can place this directory anywhere that you want. Simply know that it's a place that you can get to and access.

Now, you should already have our JS Builder Gem, or our JS Builder NPM module directly built into your system, and you can test it out and make sure you have it, by typing js-generate and then this if you hit return, it should allow you to come and pick from a list of the various react project types.

So, this is what we're going to use as a templating system, so the reason why we created this JS builder NPM module was so you can have a nice starting place to build react projects.

Now, I want you to use the arrow keys and come down to where it says react-redux-router and hit return, and then in the project name, type whatever you want to call the project. Now, I am going to use my first and last name so I'm going to say jordan-hudgens-react-portfolio, but you can call yours whatever you want to call it. This is simply a way of making sure it's very clear that this is a react project and that it is also my own personal portfolio, and that's why I have the name like that.

So, hit return and what this is going to do, is it's going to generate the project. So, now if you type CD and then just start typing out the name of your project, and hit tab, you'll see that it has created a full project for you right there. You can now hit open dot and this will only work if you're on a Mac, if you're on a PC then you can simply go into the explorer and go find the project and if you're on Linux you can do the same thing.

But, I'm going to say open dot and if you are on a Mac, this is going to bring up the file system, and you can see all of the files.

Now, that's not necessary, we're not even going to use it like this, we're going to open it up in our text editor, but this just shows you all of the files that were created.

So, open up whatever text editor you are going to use. If you followed along with the environment setup course, then you probably have the VS code installed on your system. So, I'm going to open up VS code, I'm also going to shrink it down so that we can see it. I have my monitor stretched pretty tiny here, so that it all fits on the screen and I can zoom it in, so it's easier for you to see.

And now, in order to open up the project, just hit command + o and then navigate to wherever you saved that project. So, for mine, I went in admin code and then you can see I have this jordan-hudgens-react-portfolio, your window will look different depending on whatever operating system you are on.

But, you just hit open and that is going to open up all of the project files here, and you have a couple ways of accessing the console. If you get this little warning where it says the Git repository here is too big, just hit okay we're going to fix that later.

Now, to get this all up and running to make sure that's it all install properly, we can open up the terminal, now we have a couple ways of doing that, if you're following along on Windows you're probably going to want to open up the terminal directly here, if you are on Mac or Linux then you can just use your own terminal application, just like where we installed it.

So, I'm going to do that, I'm going to say npm install and so what this is going to do, this is going to take a little while, it might even take a few minutes depending on your connection speed and things like that, but what this is going to do is, and I'll switch back so we can talk about it while it's installing, is whenever you run NPM install in a JavaScript project like this, it's going to look for a package.json file. You can see we have this package.json file right here, and you can always close the sidebar by simply clicking on it and that will hide it.

So, you can see we have a package JSON file. Now, if you're curious about where all of this came from, this was all in the template. So, when I originally built out the template, I built out all of these kinds of elements so that we had a nice starting point for how exactly we could be a react application.

And we'll be able to edit this when we start analyzing the file system, but what NPM install does, is it looks for the dependencies list inside of the package JSON, so it'll look for every one of these.

And, right now, you don't even have to worry about what all of them are. You can have ones like Babble and AGV and Bootstrap and ESLint and there's all kinds of different names here, what they are... and you can see we have react right here as well.

These are all JavaScript code libraries, and so what NPM install is doing, is it's going it's finding each one of these, and then it is installing those directly into our system.

So, let's switch back really quick, and you can see it's all completed. As long as you didn't get any error message here, that means everything should have installed properly. If you get a few warnings or anything like that, then don't worry the warning are going to be there, and they're there usually when the developers have updated a library or something like that.

But, with what we have here, we now have, if you open up the file system, we have a new directory. This directory was not here before, and it's called node modules.

Now, you can see that this has literally thousands of directories, and so what the NPM install process does, is it takes all of those lists of items, all those listed dependencies, it goes out and finds them and then it brings that code and it installs it directly into our file system here, so that we can use them.

That's how we're able to use react, that's how we're able to use all of these libraries that we're going to use as we build out the application. Now, let's test out that this is working. So, I'm going to switch back to the terminal and type npm run start and we're also going to walk through how these commands are possible, what they are, and even how to customize them.

So, what we're doing here, is we're starting up the local development server. So, that is going to take all of the code that is there in react right now, in the project that we created with that template and it is just starting up a server so we can access it.

Now, if you see here where it says compiled successfully, that means that it took all the files and it build them properly and now the server is running.

So, you can open up Chrome or whatever browser you're using. I recommend using Chrome for this course, mainly because we're going to be using some react specific tools and developer tools, and I think it's usually the most helpful when you're looking at the same kind of tooling setup I have, just so it's not confusing.

But, you can go now to localhost:3000, hit return, and now you can see it says DevCamp React Starter React Redux Router.

So, this is showing that this is actually coming from the application and, just in case if you don't believe me, you can test it out, switch back to visual studio code go to the src directory then let's go into... you can see that we have this little vendor file, we have this Bootstrap file we're going to walk through what each one of these represents.

And inside of components, if you click on the app, you'll see where it says DevCamp react starter and then react-redux-router. We can get rid of one of these lines and inside of this h1 tag, you can just call it whatever you want.

So, I can say Jordan Hudgens Portfolio, and if you hit save, this is something that's pretty cool with the type of server we're using. Every time that you hit save it will actually auto-refresh the browser page, so now if you come back, you can see that it auto refreshed without us having to do anything at all and now it says Jordan Hudgens portfolio.

So, if you followed along, you have now installed and built a project. A react-redux and react-router project, and now you're able to see some of the key elements of the file system, and you're able to make your first change.

So, very nicely done, we're not ready to start analyzing the file system and see how all of those different components fit together.

Guide Updates

To fix node-sass compiler error:

In Terminal (Before npm install)

npm uninstall node-sass
npm install sass