All language subtitles for 015 Adding a Layout Wrapper Component_en

Now we practiced those core basics again.

One very basic feature is missing though

and that would be links.

At the moment we can only navigate around

by manually changing the URL.

Now I want to add some navigation

and whilst you can definitely also do this on your own,

I would recommend that we do it together,

because I want to build a brand new component

with a specific styling.

And hence, that will be easier if we do it together here.

But definitely feel free to also pause here

and build your own basic dummy navigation

which allows you to switch between the quotes,

and NewQuote page.

We'll work on getting to the Quote-ID page

a little bit later.

Now to build it together though,

I'll dive into that layout folder,

and here I prepared two CSS files for two components

which we'll add together.

The first component will be a main navigation component

which I'll store in the MainNavigation JS file.

As the name suggests, the job of this component will be,

to render a main navigation bar.

So in here, I'll add a regular component

MainNavigation component function,

as we did it many times before in this course.

And then here in this component, I want to return a header.

And in that header, I want to have a div,

which holds my logo text

which could be Great Quotes or anything like this.

And next to that div, I'll add a nav element

which will then store an onward list

with a couple of lists items,

where every list item should hold a link.

Now we'll need some styling here,

and therefore I'll import classes

from ./MainNavigation.module.CSS.

So from that CSS file, which I already provided to you.

And then on that header,

you should add a className of classes.header,

on that div you can add a className of classes.logo.

And these are all predefined CSS classes

which you find in this CSS file, which I provided to you.

And on the nav element, it's classes.nav.

Now for these list items, as I just mentioned

I want to have links in there.

And you did learn that having an anchor tag is not optimal.

At least not if you add it like this,

because that would then trigger the browser default,

of sending a new request.

And we don't want that.

Instead, we learned that React Router,

gives us specific components

which we can use for rendering links.

And there we have the Link component for a standard link

and the NavLink component for a standard link

which also gets a specific CSS class, if it's active.

And here I'll use that NavLink.

And then in this first list item,

we can add a NavLink,

with a text off All Quotes between the NavLink components,

which leads to /quotes, for example.

And I'll also set the activeClassName prop here

to classes.active, so that this link gets

the active CSS class, if it is active.

And of course that is a class which I use in this CSS file.

Now I'll repeat this entire list item

and add a second list item where we could say,

Add a Quote, and this then leads to /newquote.

And with that, we should have the finished MainNavigation.

Now we could add this main navigation here

in the App JS file, above to Switch statement

but I will actually also add another component

the Layout component, which I'll store

in a Layout JS file in that Layout folder.

This will be a very simple component.

I'll again create it as a Functional Component

and export it like this.

And here I'll also import classes

from ./layout.module.css file using

that existing CSS file, which you find here.

Now, the goal of this component is,

to render the MainNavigation side by side

with the actual page content.

And for this I'll return a Fragment

since I want to have adjacent JSX elements.

Fragment is imported from React of course

and then here we can render the MainNavigation.

And for that make sure that you import MainNavigation,

this MainNavigation component we just worked on,

from that MainNavigation file.

And side by side to it,

I'll add a Main element which gets a class

of classes.main, and here I then want to render

the actual page content.

Now, of course the actual page content is determined

in the App JS file by these Routes still.

But we also learned in this course

what we can do in this case.

I want to use Layout as a wrapper

around this Switch statement here in the end

so that whatever Route is chosen rendered,

it's wrapped by the Layout.

And we can create such wrapper components

by using props and to be precise props.children.

And then we can go to App.JS and import, Layout from

./components/layout/layout,

and then simply wrap Layout

around this Switch statement here.

And if we do all of that and you save all files

you should know have this navigation.

And you see that the active link is highlighted.

It's a bit whiter than the inactive link,

so we can switch and that highlighting changes.

And now if I go to quotes/sum-id,

we also have to quote detail page here.

And if I then add /comments we also have that here.

And now the form isn't as big anymore.

Now that's still all not working,

and that's of course it's not the final page

but it's one step closer.