Transcripts
1. Starter App: So now we're going to see how to implement routing as a witch navigates between pages with react. So that's not gonna be a single beach application. Will have multiple components, components, multiple views handled by components. So we're going to do is switching between components. And whenever we have one confident matching one euro matching one path that we define, it's going to display of the visual representation off one component. So let's see how we set this up. So I'm providing as resources I'm providing with, um but Miriam of that. Okay, so I'm parading with our templates, so as boilerplate code so you don't need to type from scratch. So what we'll have in our melted page application is a page for the home home Teoh display . Just a basic home page. I don't even remember what it is exactly, but this is like, simple could you can see. Then we have the contacts view with the form and an about section on about competent with some random lower MIPs indexed to representing about Paige uh, and then some styling as well in the abduct CSS. So we'll go ahead and create in your app, so I'm gonna make sure to Cindy to CD into the deck stuff. And then from here, I'll do create react up, and I'm gonna call this one routing almost two page application just as you like. Okay, so then we'll have one new project set up. It's being scaffold it. Okay, Agreed. And then we'll take this one and open in visual. Could studio. Here you go. And inside. So we'll see the basic starter templates. We can start the up. And when we're ready, we're going to start completing the completing the up. I mean, creating new components. That's gonna be the starting points here ago. So you've got this logo than some text and a link that says learn, react. So it's going to different. Of course, what we'll do is I'm going to invite you to download. So if you haven't done yet, So this is what you should download from the foul resources this world router folder with all the boilerplate coat that will use to create a new page, the new components. And we'll do that. Um, just right up to this video
2. Navigation Stack: so, as explained before. So I'm providing with boilerplate code which will be used to create the views. Will have a views for the home, Another one for the contact page, like a form and another one for the about section. But before that will have a front page where we'll have a navigation at the top, and this navigation will have links to allow to navigate from one huge another. So we'll start with that's we're going to go to our, um Abdel Jets. So this is where we're gonna make a few changes. Uh, we're not gonna were gonna keep a few things, but we're not gonna keep everything. So actually, this spurts, all of that you can remove, and instead, what we'll have is an in order list. Okay, so this is so it just goes away because it's like, reload. So for now, we no longer have anything. But instead, what we'll have is an an order list and list items, and I tax to create one link and inside we'll have an ANC attacks to create to enable the navigation. So for now, it's just gonna be this won't be navigating, and I'll have first home. And then, just like the purpose is to navigate from one beach another So we'll have home and then we'll have about and contacts. Okay, lets see. Here we go. So very basic for now. It doesn't do anything because we haven't put any actual links. I mean, address to navigate to what will do. Also, further styling will make a quick visit to the get bootstrap that come. Um, it's gonna be further simple for the layout. Also of these example of these application. I'd like to use the bootstrap resources, so we'll use the cdn quicker. We don't need to download the fouls. Instead, we will fetch, um, whatever we need from a remote euro. So we're gonna copy that to the clipboard and then go back to the ah, this time, go to the public folder and find the index that HTML and rights before title You're gonna paste this. Ah, we don't really need the scripts. We're just gonna keep this style shits. The scripts weekend goes because we won't be making this. We will be making this up interactive with any jazz JavaScript plug ins will use the CSS only for pres trump and we're gonna use one. Um, once you this rule, which will be a non A style, I think it remember and style a list in line. Good. Actually used both because what I'd like to do is to remove the other default least a style that but also to make the least in nine. So one next to each other and not on top of each other, because by default and a light tag is a block a block attack, meaning that it's gonna go to the next line. We want them to be next to each other. So I have a list in line I think is here that you find ain't typography here ago. So you just need to actually use these class to the one ordered list in order to make your stay in line just like this example right here. So we'll do that a year ago on. Actually, I'm gonna type it because make sure to type class name instead of class, and it's gonna be leased in life. And I think it removed the default as well. The default least type. So we don't really need to specify this. And just in line, Uh, one thing may have not done yet and reach a specified as well. So for our class, for every least item. So we're gonna take this and provide with a class fort each list item as well in order to have this final results very good. And here ago, So you have your list in light. So that's great. Well, do as well is to add some, I think margin to the top. But what will do Quicker? Uh, let's check out again. So this some resources that I'm providing, you see that you have these abduct CSS. We can use that because you have some basic styling that I'm providing. I think I'm adding some margin to the top at some point. I'm not sure, but anyway, if it's not the case, we'll just add it. You see margin so well at this, I'm proving just one utility. So we use that. So I'm going to copy all of that and replace whatever CSS rules I have in the starter templates off the new app and replace, and that's gonna provide CSS rules. Scilingo, for all the section that we're about to create about, I think, for the contact pages. Well, maybe. Or maybe not. But just for the about, OK, so we don't need to worry too much about out to customize out page and right away will add this margin. I'm gonna add it, actually. Right here, Mr. That's and we should see, like, Okay, here we go. So now we have a little gap. Is just 30 pixels 30 I think not just 20. I could have dates and making bigger to add more gap. Okay, great. So we'll add more styling A some point, because I like to have more space around the links as well, but for now, we'll just work with that. Because what I want to do is to create right away a new new components for every corresponding link. So we'll have a view for the home. Another one for the about and another one for the contact. You. So let's do that next
3. Defining the Routes: So now inside your applications. So go to the source, Boulder and creating you Components folder. This one will include all the components. I was starting with home home dodges and room that I'm providing with, um, some basic, um, I blew it. Boilerplate coat, bull grab from it. We're gonna important there. React from reacts and greed in your class. So class home and we're gonna extends from react to create accompaniment You can also, uh, close some extends from reacts in Riyadh component extends red components My bed That's an extract you word that we don't need You can also import directly from components And just amid this marks carried up and so instead inside remember that you always need Orender methods and inside of render, you're going to return the visual for the sun components. So we're gonna opens the home texts. We can open it here and simply copy and paste this one in inside return. And don't forget to also export your class and we're gonna actually expert so on default, like so and inside. We'll have also states for every components, and this will be just information. That's about the title, the title, and we're gonna read home, okay? And next. Ah, what I'll do is I like to uhm display um, but not just now. So what we'll do is use a router to display this components one of our click on one nick. But for now, we'll need to do some set up. It's not finished. It's not gonna be possible right away to display home from the duchy s unless we do something like like so, uh, I mean, it's not gonna be navigation, but what we can do is import home from home on this one. This component is inside. Components will specify the exact death, and then simply use, for example, uh, the the custom tack and then display home. That should work. I think I may have occurred at sea. I have an extractive here closing Deve. Well, maybe not defective. Okay, okay, let's remove that. It's gonna be Div. And like, so Oregon's I'm going to simply put it here. Okay. Okay. So home. When we go back to the view, you'll see that you'll have um Oh, let's go back to home to correct the mistake. But instead of having an equal sign, it's gonna be here, Colon. They're ago. Let's remove that. It's got back. And here you can see the page which corresponds to the view for the home. Let's do the same for about. We're going to create a new component for the about section, and we have more. We'll have more text for the about, so that will make more sense. So saying we're gonna create all the template to create a new component. And instead of having another home, it's gonna be about. And you were going to read about and let's open the text. I mean, the template that corresponds to the about confidence. Copy. And we're gonna replace right here and now back to abduct GS. We're gonna import also from these components about component and then about, and we'll do the same. I'm gonna actually replace and replace with about and will be able to see um, be about template for the about competent. Let's see what's missing about, Okay, that some just I think in the about rate here, I may have an extra um do you that all correct. Okay, I'm probably providing with an extra div right here. Let's go up. You again. Okay, that's extrasolar Just make or just had to make sure that you've got nothing inside the parent to seize. Oh, that was just a mistake from me when I was pasting or may have an extra, um, so you were ever the Okay, here I go. Margin right here. And Okay, that's the X tries right here. Okay, so I'll just make the correction anyway, So whenever you get this foul, you have so the correct template, that which is the mistake. Okay, so I'll just make sure to format this nicely. And I should have any mistake anymore. And now you have the page that corresponds to, um You see these? Some about right here on what we do is here replaced because we're using the state's. What we'll do is doing this state title to have the correct title for this page, which is about Okay, so and then I just need to do the same as well. For home. I'll replace with this states this state title. Okay, there is the oneness, uh, too dark to do, which is the contact competent, which I will let you do as an exercise on. Then we're gonna correct so in the next video together
4. Contact Component - Solution: So what I asked you to do is to create the components that corresponds. To, of course, wants Teoh the contact view. So let's go to the router and open this text file and you're gonna go ahead and go to competence and creating you. Contact Js Fall. It's gonna follow the exact same format to create a new component right here, instead of having about will have contact. And for the title, it's gonna be contact as well right here. And let's replace with whatever we have here, which is contact, and that's gonna give us a nice template for a form. And I think there's no mistaking uh, coat. That's great. And it's replaced here. We're going to read the actual title off this page for this page, this state title. Let's so try this out to see if that's working properly. Instead of importing, we're gonna import first contacts, have access to this component and instead of having here about, will have contact. And because we're already using that strap this check out again already raising bootstrapped. I will have a nice template thanks to what struck right here. Okay, great. But the purpose here is to be able to navigate from one future. Another by using this links, and this is what we'll do next will see, too. How first we'll see how to the installation for the React React router route and links from direct route A dumb and we'll see the use age as well. So how to define the wrote the raps. How did you find the path for the corresponding, competent and finally help to navigate from one continent to another? Let's do that next.
5. react-router-dom: So let's go ahead and instill a new dependency. You see that in the packages? And so whenever you have a starter project, you have these dependencies in your project automatically. So first reacts you. You need that in order to, um, to great. I mean, to build a wrecked up. Are you got the react dumb and direct strips, which is this scripts in order to start to build on. So far. So this is the This corresponds to the clean becoming line. And now, in the Abda. Jess, what we'll do is, um, actually, we're gonna use the console, the integrated consult. I'm gonna open a new terminal so we don't need to actually kill the server. So it's still gonna be running on local host 3000. So you see that this is the local host Stalin. So this is running on this on the sport. What we're gonna do is l opening in your terminal, and I'm gonna run your own ad, reacts router dumb, and you'll see that's in your package. Jason, you have you connect receipt as this is a building here, it's gonna add a new dependency right inside dependencies. You'll see. React routed, um, and the version for these dependency. So that's good is now We have access to the reactor out of dumb. So anything related to navigation path router links extra is in a separate module with react. It's not in the same model as react and react to them. So we need to make sure to install this one separately. And now that we have this one in the non modules, let's check this out. We should be able to find in the or so all the dependency that we need to actually create. Um, the road. Implement the router. Here we go. React, router and react routed them. So this is what we need. Okay, so let's go back to the Abda, Jess. Now, what we'll do is import from this new module that's we have installed, and we're gonna make sure to end to specify browser router as a runner, and this well will give us access to the history. So when you navigates to a path and you need to go back, its gonna be handled by browser Roeder because it's gonna keep track of the history navigation history. Then we'll have routes to define the routes and path and Milliken's well, so the links will be the equivalent of an ANC attacks of whenever you need to create a link with Roger. With the link, you're going to specify a path to navigate to. And now we're gonna import from react Router Rotterdam. Exactly. So what you need to do now is to define the routes and will be that right here. So this will be the first step. So every wraps will for incorruptibility to specify a path. And for this one, actually, I'm gonna start by specify of the components and you will understand. So this one will be for home 1st 1 and for the home basically will have the the route past , meaning that we're not going to specify any endpoints. It's gonna be the roots. I mean, the main euro for a 2nd 1 we're going to specify a route for the about, have you and it's one week aren't well corresponds to the about. You'll see that this is actually highlighted. This corresponds to the about components. So for any routes link corresponding to this path that we defined as about so this will be the end points about which will specify the navigations to the about component. Let's do the same for contacts, and that's will be the end point contact. We specify that we want to display the company and, of course, must to contact area. So this is our routes, and we absolutely need to wrap the routes and this will be used as a switch. You could understand. So router. So this will be the rapper for all the routes. So make sure to encapsulate all of that, um, within the router, and this one will work as a switch. So inside the road or you define the path. And when you select of the home, um, for now is just the route, but we're gonna define the links after that. But when you select a link that corresponds to the path like this, the route past it's going to switch to the home covenant. And when you select a link that matches this about endpoints, it's going to switch to the about company. So that's not all. When you look at the view, um, got one type of here. When you look at the view doesn't change anything for now, you've got the same But what we want is to define the lynx, the lynx, which will be those ones. So for now, we just have something static. When did you have dynamic links? So we're going to set this up right here instead of having links like so we're gonna define inside. The and I were going to replace the ANC attacks with links. I'm gonna put that outside for now. It's gonna be this link, and it gets its has. Every link has a property which is to and inside the two as a value, you're gonna pass the actual path that you want to navigate to right here and then inside. You specify the text for this link. So I'm going to replace all of this with we're gonna copy, come in X and then pace to replace the ANC attack. You're gonna replace with this link and let's do the same for the other ones. So home first and then next is gonna be about so for the about what you specify is the about path and replaced with the corresponding name and contact for the last one contact area. So whenever you select one link, you'll see that it's gonna select. It's going to see if one path matches the link year, the path of specified right here, and then display the corresponding confidence. So in order to be able to energy make it work, we'll need to wrap. We'll see that you'll get a mistake. Anyway, uh, this Lincoln would be outside the router. We're gonna need to move this one router. We're gonna need to move this up in order to include all of that. So as specified before it works as a switch. So we need to have all of that encapsulate the links and the corresponding routes that we defined below, like so. And we see that when we switch from one to another and we have the corresponding page. So we're gonna need to make a few change for the home. Um, I think, but for the home. Okay, so we got this. This seems to be duplicates. What will do also is specifying so exact this keyword. So we know that for the roots, bomb in the roots when I mean is the roots of your projects. This will be the first entry, like the home page off your application. So whatever corresponds to these Beth, which is the root path it's gonna display the home page, The home confident, Tiny. Let's see. That's when I select home right here about contact. And you see that the euro is changing. If I do about it's gonna is gonna display about OK, so that works just fine. So we just enabled navigation by using react to routed, Um, in this up Ah, Buddhism re factoring What I'd like is to have the links in a separate section right here. So we'll do that next. Basically, I could actually explain this to you and let you do it as an exercise. What I used to have, um, to reduce, optimize the code, make it might make it more modular by having its separate this section and also avoids, ah, to repeats. You see that this is similar. So you have three times the same ally tags, so try to allow to reuse to make some good, which is reusable. You could have a separate link. I mean another and I component. So let's do that next
6. Finishing: so as an exercise and only for you to not only understand better react rounded on, but also to understand the purpose of reactor which is to use to implement and use reusable components. We'll do that next. First. I'd like to get all this part in a separate, competent, stateless components in the same fall. It is just fine. What we'll do is here create a new stateless confidence and then return all of its and you'll see that we won't have any change for now. So if I go check out so I won't have any links, but let's go back and what we'll do is then refer to have and we'll get it back. Here we go. So we've got time on navigation with you. So here the purpose is to make the code reusable. And let's have another here that will call, not link, because it's gonna conflict right here with this Some. But we could call it cash. Yeah, we could call it back. As you wish. Actually, we could colleague pass, and here it's going to return this type off, um, templates is just a lie, and instead of having this is not going to study coat. It's we'll have first, a constant. We're going to define our links. Let's begin with that's we're gonna do, find all the links and as links what we have his first home. Then we have about now. Then we have contact. And basically, what we'll do is, um, very simple. We're gonna map. We're gonna redirect over every objects, just three every object we have in that rate and then re apply the same assman time as we have objecting that array re use the same confident which will be path here. So let's keep just the energy list right here. And well, what I'll do is actually put all of that lower case. I'll explain after it's just gonna be lower case to begin with. And then we were gonna use path and always start with a life. And now let's go step by step, and I and then, uh, last name the exact same thing as here. That's me. Copy it. But before that, we're going to need to use maps, remember? It's gonna be like so it's gonna be links map. And for every object we have in that links, we're gonna have one local variable, which we're that we're gonna name Link, and this will go wait and inside right here. So we're gonna use link. Then I'm gonna capitalize. It's gonna be capitalized to lower case to upper case can use Capitalize from the Jena strips. There you go. Should work. And for the best, what we'll do is using first in order to about to combine simply eating. So, first text middle. So, um used, employed, binding. So I'm gonna pass link within the curvy braces, like so preceded by this dollar sign. And the thing is, we'll need to specify that for the link in the case, this is equal to home. We'll see that next. When I was just gonna see if this is working anyway, we've got enough and recover. Capitalize for the let's see if that works. Expected on a vine 15. We're gonna need to do return here because it doesn't return anything. So it doesn't understand When did you return? So let's see how that looks. It doesn't seem to work. What will do. Well, do you know the way we're gonna do home and about here? So it's gonna be we're gonna room of capital ice. And this time here regrets our thing. The only thing is, what would you, uh, is this is working just fine. Doesn't seem to bother, but I'd rather have a link on end point with the lower case. So what you could do is here, is you? Could you to lower case? Actually, we're going to make the formats right here at this location. So instead of having the cap later, every time you switch from one path to another, it's gonna be lower case. Okay? The home doesn't seem to work. It's because we don't have any path for home. You see that we don't have. We haven't specified any endpoints with this. Fascinating. It's actually the route that we need because whenever you have the roots you've got this is what we need. So what we'll do, it's gonna be very simple. We can do something like first here due to check. First, we can check if link is equal. Teoh home. Very simple. We're gonna check your physical to home, and then if it's the case, we're going to return Nothing. Otherwise, that's returned, Link. Okay. And now you just need to path like so and we can keep. Leak is just for the path that we need to do that because for the path we need something that's corresponds to the path specified. Okay, Okay, so let's do that home. Now. We have home that we have about home, and this is working just fine. Okay, Perfect. Next for the rest of the exercise because we actually want to use a reusable component. Let's take all of that. And because this is the final formats that we expect, let's take all of that and use now path. And for this path, I mean, this new company bath, it's gonna be like So we want Teoh pass props as Children because we need Teoh, uh, used the lynch. So we're going to do that this way. Property binding and whatever corresponds to the logic of this past, we gonna take it and added to the path because that's more allergic to put it right here and now, I think we're all good. We're all set up. We have a reusable components and think it's not defined. Um, we need to specify it right here, which will be the prop that we pass as a child right here. Okay. And just one quick Centex Eyre likes, like here. It's gonna be instead past as this. Okay, so now, instead of having, um, you got home her ago and this is working just fine.