Create an app component - React.js Tutorial

- In the previous lesson we used to create React app to create this My Application project. So I'm going to to drag Chapter Two from the finder window here to Visual Studio code and this will open this up to Chapter Two in my editor. Now the next thing I want to do is, lets go ahead and open up the Start folder and you should see my application is here. So we also noticed that there are no node module here. And the reason for that is that having node modules in each one of these start and finish folders for the whole exercise files folder, makes this thing really big. So anytime you want to open up a new one of these you're going to need to run npm install. So let's open up the terminal window inside of the start window and then I'm going to say, cd my-application and this should give me everything I need to get started with that. We can see our package json file which will act as an installer for any dependencies I need. So I'm going to run npm i, this will run everything I need to actually run this project. Cool, so the next thing I want to do is run npm start. Now npm start is going to just run my React project on local host 3000, so this will pop this open in another window. Let's see our app running. This is our main scaffolded app for create React app that we can use as a starter for later lessons. So let's go back over to our code. Now the main file that is rendering our app is here, this is our index file, so this is rendering this to an element on the page called route, so that's good to know. The next thing I want to open up is our app JS. Now the app JS is the component that is rendering this spinning React logo as well as this link. Let's go ahead and replace this for now. So what I want to do is, let's create a, let's just return a div here and within our div we're going to have a header. We're also going to add an h1 that says Videos. So if I save that and we move back to our localhost 3000 we should see that video's appearing. Let's add a couple things here, so I'm going to remove the logo cause we're getting that warning about logo being defined but never used. If I save that we'll see that go away. We also want to open up the app css folder and you'll see this style for the app header. Now what I want to do here is I want to remove the dot app hyphen and just use this for a selector for the header. So, this is going to take this header and apply that style to it. So if I go back to my code you'll see videos here. Let's also do one final thing. This is giving this a minimum height of a hundred vertical height. Let's go ahead and make this 20 and see how that looks. There we go, so now we have a nice looking header. In the next videos we're going to render some additional components right here underneath these videos.