Summary of the Transcript

To get started, let's go to the terminal. For this course, I am going to use node version 8.12.0. Okay, my npm is 6.4.1. First thing you're going to need is create react app. So create react app is a node module that you can install and then use it to easily generate a react project. It already sets up all the boilerplate for you, so you don't have to waste time setting up react, web back and all that kind of stuff. Okay, so to do that, let's just do npm install dash g because we want this package to be installed globally. And the name is create dash react app. npm install dash g create dash react dash app. So I previously installed it because it takes some time, so it might take some time for you if you don't already have it. Now after that, we can use the command create react app, just say it like so and then the name of the application, your project. I just call it fruits saga, okay? fruit dash saga is my project name and I type enter. Now I already did this beforehand because it takes quite a while to generate a project. Here's in the other tab. So let me scroll up. You can see that I did the command create react app and then it created the app, installed react react dom and react scripts and so on. So with create react app, it's pretty simple. To start the development server, just say npm start. It says right here after you finish, it finishes generating the project. Then there's other stuff that you can take a look to, but we're focusing on just npm start, okay? We just need the server to run. Don't forget to cd to the fruit saga directory. So let me get back to the other tab. After doing that, we're going to cd to the project directory, in my case, fruit saga. Oops, sorry. That's the wrong place. Place cd fruit saga. Now you can do an ls right here. See some, already some files that were generated. Let me go to the text editor to see what we got. I use atom, okay, for my text editor. So let me go here. So I have my fruit saga right here on the left-hand side and I have these files. We have a package.json using react 16.5.2, okay? For this course, react 16.5.2. And we have all the commands, npm start right here and so on. So we're interested in the directory called SRC. That's where our search code for the react application lies. It stays, okay? So let's go to index.js. And this is where the... There's the injection of the react app using react-dom.render. So there's this component called app. It's like the overall app. And then we got some stuff here, boilerplate. So let's run the server to see what we get. Going back to the terminal, we're going to say npm start to start the development server. So I did npm start. It opened Chrome for me. I don't want to use Chrome right now, so I'm just going to close it and use Firefox. Okay? You can use whatever browser you like. So it should open up a browser window at localhost 3000. That's where your application is running at. So let me go here and go there. Oops, I created a new tab. I want a new window, I want a new tab. Sorry. So this is the generated react application. This is just the animation here with some text and a link in a kind of dark background. So we don't really care about this stuff. We only care about the project that was generated, so that's all good. So that's great. It's running and that's all we need to get started. So I'll see you in the next lesson where we're going to start writing things from scratch and hooking up redux and so on.