[00:00:00] Hey welcome back. In the last guy we went over the property management app we're going to build. And I didn't go to the depth of what the application actually does but I talked about the concepts we're going to be learning so basically just to give an overview of what it does. Real quick before we generate our project in this guide is basically what it does is you have a sign in as a user in a property management so like if you're a tenant and a had an apartment complex or something. And basically the app gives you access to a newsletter that you can view with some previous newsletters and then it also lets you submit requests. Let's see let's see submit requests so that the faculty or whoever can fix the problems in your heart. So that's basically the gist of the application and that an admin has more privileges and can do a little bit more like create newsletter objects and stuff like that. So basically that's a little bit more about what the application actually does. Let's go ahead and generate project. So I'm going to open up a terminal window and in this terminal window I'm just going to navigate to where I want to place this project. So I'm just going to place it in my room directory this time and I'm just going to say James Gentry and I'm going to select the reactor redux router template. So it's important to use like this template. So we have the dependencies we need. So let's say like that and the not just the dependencies but kind of the framework of the app we need to build. [00:01:46][105.8]
[00:01:46] So let's go ahead and generate that and I'm going to give this a project name of property management. And then we just know navigate into that or open it up in your text or rather so you're using visual studio code and have the set up I just can type in code mindspace and the DOT and I'll open it. But I don't even get that set up until a couple weeks ago or a couple days ago. But yeah basically you can just open that up and you actually don't want to open it up in your. You don't want to open it up and you're in your read directory. First need to change directory into our application. So I'm going to close our visual studio code and see CD property management. Yeah. Okay. And then in here I'm going to type code red. This will open up Iraq and then I'm just going to close out of this terminal window and use the integrated terminal India's code. You can do what you want there but I mean easy is code. So in in your terminal once you're in the directory make sure you're in your private directory type in npm install so we can get the dependencies install and then let's change or get ignored to Dockett ignore. And that should set us up once this is installed. We will set it up on get. I'll just do that now. So I had to get hub dot com I'm going to create a new repo and I get this on there. So to give me a minute. So I started Project I'm going to select a different owner. [00:03:39][112.3]
[00:03:39] You're going to want to leave that and then repo name. Let's see. Property Management. Okay and. Yeah anyway let's get started. So I'm going to create a repository and then we know the drill here you can just copy these. So you don't want to add the origin and then push it. So these are now installed and make sure the change you get ignored before you push anything. Are you going to push up all your node modules so make sure that dot getting on to the docket ignore example. So now I'm going to think it's status or. First we need to tap and get it and get status and get and get push get committed. And I'm going to say in that project set of Kainaz I'm going to say get push for engine faster. And first we got to actually Campinas and so bring that over it's a good pace that and not will tell us where we want to push it. I'm going to say get push or engine faster and that should set us up. Now if you reload page we will have our repo here all set up. Okay now let's see what we want to do now we we want to start it up so let's say first I'm going to change right in the dodgiest to a different port because I might be running something on a on that port. So I'm going to change this to 30 10. You don't have to do this unless you want to. But now I can start it up something I say good or I'm going to say NPM start. [00:05:44][124.6]
[00:05:47] Now I'm going to head over to lolo's 30 10 if I can just copy that and put it in here. OK. Now we have her running and her first Reki. We have bootstrap and this has our app which is our component here. I'm just going to rename this to her and then I'm going to delete it actually I'm going to. Well let's just go eat it and then let's head into our component here and rename it to her. I just had her hand all increase my font size here so you can see a little better. Change it to 16 should be good. 16 is is good. So I'm going to go back to our projects and I'm going to call her. I'm going to move export default down to the bottom here. And then let's just change the tax in here to say component she can call her and then I'm going to rename the file. Two hundred of us and then let's go into our bootstrap and instead of importing import from components and then in here in a browser router we want to physically type all this header like that and basically this is going to allow us to always our header when we render anything else and all go over that in the next guide where we will talk a little bit a little bit more about the react router react to him specifically and how we can use the heter as a high order component over this over our reps which we will talk about in the next. So let's commit our code again let's say good as you get and keep coming. [00:07:50][123.4]
[00:07:51] And I'm going to call this whoops I hit enter a lot. I'm going to go back up to get comment and I'm going to say get commit from my message. I'm going to put set up Project and had her HLC for hire for high order compelling. Okay I'm going to push that and we will get started in the next guide with our with our routes. So let's go ahead and do that now. [00:07:51][0.0]
[466.1]