Not bad, not bad.
We're almost ready to start with React router.
But before we do that, I want to set up a separate component for the logo.
Why?
Well, because in the application, we will reuse it in quite a few places.
So it kind of makes sense that we have a separate component where we do have the import as well as the
image tag with the class and everything.
So let's start working on that.
Essentially, what I want you to do is to create a components folder.
And as you can imagine, well placed, there are quite a few components.
I want you to create a logo jazz file, then move the import for the image.
And if you have to, you need to set up the correct path for the image for the logo on and then set
up the image logic.
So that doesn't change pretty much whatever we have right now and then set it up as default export.
And then at the very end, I'll show you my preference for setting up exports and imports in the components
folder.
So that's coming up, and I'm going to start by navigating back to my project and in here, I'm looking
for the source and I want to start with new folder and we're going to go here where the components create
the folder.
And like I said, we're going to create a logo one.
So logo.
Yes.
And in here, we want to set up the proper import.
So now let's navigate back to the landing one.
And if I take a look.
Well, long, I'm still going to be sitting in the components so the path shouldn't change because we
already have that master structure over here.
So let me take this one now we're getting back to the logo.
So important.
And then the same goes for the image.
So I'll just take this and then it's really up to you.
If you want to set up a different logic where you pass in the custom class each and every time around,
there is a component that's really up to you.
In my case, I'm just going to keep that logo.
Why?
Well, because I know that in the places where I'll have to style, I'm going to be targeting that logo
class.
So in this case and the landing page, we're not targeting, but I always know that I can reach it if
I have to.
So what I'm trying to say here is concept and then logo.
So let's create a VAT component, then let's go with the return.
And again, if you want, you can set up here a custom logic where each and every time you render this
component.
You can set up some kind of prop the value for the prop is going to be attached to this class.
Now that's not what I'm going to be doing.
So I'm just going to leave it the way it is, and I always remember that I have this logo class that
I can always style.
So let's go here with export default and we're looking for the logo.
So let's set this up and back in the landing.
Now we're finally want to go with import.
And we're looking for a logo.
Correct.
So it's going to be in the components and we go here with a logo component.
So let's save it.
And again, if nothing breaks, that means that everything is correct.
So let me just double check refresh and everything seems to be working.
And if I come south, I shouldn't see the logo correct.
So let me set it up properly, and now we're good to go.
And lastly, let me just mention what is my preference when I'm setting up the folders in such a way.
So at the moment, I'm importing logo from the components and everything is awesome, but we need to
keep in mind that components folder is going to be somewhat big.
So what ends up happening will have to make bunch of imports like this.
So there's going to be a side bar, maybe, maybe some other components.
And my preference is always set up the index just here in the components folder or any other folder
where I have a bunch of files.
And the reason why I didn't do that with wrappers is because, well, these ones will be one profile,
but with components that could be multiple components, profile and not in that index address, I actually
have already import for the logo.
And then I export everything.
And if this doesn't make any sense, I'll show you that in a second.
So for now, what I want to do is just remove this logo and then back in the pages.
We're going to go with it next year, and that is going to be a default export.
And not inside of its pages.
Now I'm looking for that logo.
So let's say your logo.
And then I want to set up the export.
So I'm going to go here, export and logo.
And now every time I'm going to create a new file here in the components, I'll also set it up here
in the next year.
And as a result, back in the landing one now, instead of looking one file at a time, I'm going to
be able to look at import.
And then I'm just specifically saying what I'm looking for.
So in this case, it is logo and that it is coming from the components.
So we go here.
Notice.
I don't need to specifically say the path because basically index will be the default one.
And then I'm looking for the logo over here and it looks like I have a bug.
And of course, the bug is following where I set up the index just in the pages.
My apologies.
So what do we want to do is to move this up to a component and then everything is going to work.
My bad?
So let me go back here in the next.
Yes, I'll save everything.
Let's refresh.
Now, of course, everything is working.
And the thing is, we'll do the same thing in two pages.
So at the moment, we have only one page, but eventually there's going to be more and it's always my
preference to set up this image.
Again, we're not doing that for the wrappers because for wrappers, I pretty much know that for every
file, there's only going to be one wrapper.
But for two components, it's different in the landing page at the moment.
We have only this one logo, but essentially as we move from page to page component two component,
there's going to be multiple components imported, and that's why it's my preference to set up this
export.
Such a matter where I'm only looking for index one, meaning I'm only looking for the folder and then
I can specifically say what I'm looking for instead of creating a import line for every component.
Hopefully this makes sense and I can finally dive into or react router.