[00:00:01] Hi welcome back to the reactor cores. The last course or in the last guide rather we set up our project here and we changed the component to a header. And then we opened it up so we can put some content into here so and this guide we're going to go over there reac router Dom and we're going to be setting up our routes. So basically the idea of routes are pretty straightforward If I open a new tab here and I go to LinkedIn dot com and then I just hit enter you'll see that automatically it changes to feed. So basically they have it. So this is the the route through route basically the initial route. So basically if I had on me a word on notifications you'll see it goes over to winked and dot com slash notifications. So this is a route shows different content and if I click here and his view profile it will bring me to this and we'll have a couple different routes of yours so basically the idea here is straightforward. It's you go to a different route here and it will load up different content different components. So let's head over to our app and get started with some routes so the first thing we need to do is import a couple of things from reactor eiderdown the first thing is browser router and the next thing is switch and then you also need to route. So basically in here we want to take out switch for our routes and then in the switch we want to declarer out the same route and Alanssi path. [00:01:46][105.3]
[00:01:47] And basically what this province going to do is we're just going to put what where we want to go. So the first route we want is sign in and for component plus we've done playing for now and let's head over to the browser real quick and we're not going to look at anything here. It's not going to do anything. I'm going to show you at the sitemap we have under our property management applications so right here we have the site click on it or if I click on it and this is in the description below we seem to have our home and then we have a bunch of routes on here so we are signing and sign up newsletter list and support request lists so the first routes we are going to deal with are signed up and sign out or sign in and sign up and these are the routes we're going to navigate to you are sign in and sign up screens so over the design here have these sign in route open and then so basically we're going to see when we see this instead of this appear we're going to see magine This is our route here we'll see or are out here we'll see slash side. And then when we head over to sign up it's the same thing except for sign up here. [00:03:02][74.9]
[00:03:05] So so let's get into the coding here and let's give this a component and we wanted to render the Signed in combine and we have to create this so this isn't going to work if you try untested and let's import it even though we have created it so we want to place this in components and then we want to place it in a directory called auth and then we will have our component in here so sign in so and we want to say import sign in from and then I'm going to put a comment here saying are components just to kind of separate what's been provided here for us using gesturing and with our from our components. So let's go ahead and write this will create the folder and component is called off and then in off let's create a component called sign in Ajax and then here let's just type out normal react boilerplate or scaffolding yourself and say import React and that's a component from react and say class sign extends Component and say render make sure that right render. And then let's just return it does that says let's see what our design says it says new user or it has our form here. Basically we want to perform here. So what I'm going to do instead of returning them is I'm just going to say well who did the next guy. What we'll do here is I'll just say return dead and in here I will put that sign in. OK I'm going to say export the fourth sign in and we should be get there. Let's go ahead and create or sign up component for it. Just like the basic setup we have here just so we can get out of the way. So let's go north let's copy your file here and create a new file called sign up. Yes it's pasted in and change everything to sign up for a class name or export class name and then are recounted here. [00:05:21][135.9]
[00:05:21] So let's say that let's head over to our bootstrapped genius and let's throw in another round here. Sign up. And if you type in sign up we haven't imported it yet but if you're using vs column you have this option for auto import. So Braehead enter click it will import that for us. So just make sure you're importing these and we have these right here so I'm going to label these ones as off and then we will connect. Well we don't need to do that. It's too specific. That should be good. So we are signing and sign up and we have a router to going to of this a little bit and we should be good to go. Let's go ahead and try it out in the browser and see if we are getting our routes properly so we have localhost and then through 30 10 here and I'm going to put in a sign up and it's going to bring us to our sign up I'm going to put in sign. Let's see. Okay so it appears that it's not working. To just open my console. Looks like nothing's going on there. We have patch here sign in sign up. It's going to our component here and we're not receiving any any changes. So I'm going to look at the bootstrap here and see why that is sign up sign and you can reload page one more time and see what's wrong. Maybe it's in here to cut out the server and started up again and I'm going to go back and reload. And we have our header but for some reason we don't have our ups. [00:07:02][100.6]
[00:07:02] And the reason we don't the routes is because Internet component we actually have to you specify that we want these props to load. So these are these children. So I'm going to command clicking a header or I'm just going to click on that or dot Jassy work and brought to our Heterodyne jazz and in here underneath our header we want to simply in brackets say this stop Protestant children and what this is going to do is it's going to go through our our. Here it's going to go through all of these and it's going to render them out. And obviously it's only going to enter one of these and switch here is the path correct. So let's head back to our out and sign in we have sign in form and sign up. We have signed up for. So that'll do for this guide. And in the next guide we will see what we can do we can add what's in the next guy. Let's talk a bit about relax for once get our sign up form. Kind of generally put together and then after that we will get into a little bit more of the redux side of excellence. So I'm just going to head over to my other terminal here and I'm going to say good status good. Good candidate and I'm going to say implemented I'm going to say implementing and sign her offer up. Okay I'm not push this yet. We'll push once we're done developing the signing component. So I will catch the next guy or we will get started on redux for. [00:07:02][0.0]
[416.7]