All right.
And once we're done with general set up now, let's start coding, and the first thing that I want to
create is the landing page.
And essentially, that is going to be the page that the user sees if he or she is not logged in.
So we have the URL and then forward slash landing a man we navigate to register.
And let me just go back and cover a few things before we start going first, which you will see over
here is the Zoom level of 175 in my browser.
And the reason why I'm telling you that.
Is because sometimes my result might look a little bit different than yours, and again, that is because
of the zoom level.
And I can easily control it and usually it's between 150 and 175.
Now also starting from this video, there's going to be way more code examples.
And when it comes to markdown, for some people, it might be hard to read like this.
So in order to make it easier, there's actually an extension of previous a markdown on the name of
the extension is following.
So you're looking for markdown preview?
Once you install this extension, what you can do is just right click.
And the notice we have marked down preview.
Option, I'm lying, I'm just going to move it over here.
This is going to be my file.
So essentially, you can take your read me and run it through the extension and you'll see this result
or basically the code examples just are easier to read.
Now again, this is optional if you don't want to do that.
You can keep on reading the read me as it is, but in my case, I'm going to use this extension.
I'm just showing you where you can get one run.
I also want to mention that, of course, we will set up React router because we have single page application
as well as stored components.
So this initial landing page is going to be pretty ugly.
This is just to get something on screen.
Otherwise we can talk about the general setup for another hour.
And basically, I want you to create a page directory in the source.
For now, just set up one page landing jabs, even though we will change this around a little bit.
And then I want you to set up the component and I'll show you what extension I'm using to create components
very, very quickly.
Add some kind of basic return, in my case, I'm going to go with heading for weird landing page and
as you can see here, I have a small typo where a should be heading for.
I can say with the notice right away, I can see the correct one in my preview.
One import logo, SPG and manage surgery.
So this is going to be the logo in the assets, in the images more specifically.
And then this is going to be the main one and then just import landing in an address and render it and
then resume the video and I'll show you how I placed everything in my page.
So let's get cracking.
We're effectively.
First, I guess I just want to go to our source and then create Pages Directory.
So pages, I'm like, I said, Let's start with just simple landing crash landing, Andreas now inside
of it.
In order to create a component, a very, very nifty extension is this one, the snippets one, so yes,
seven React Redux, blah blah, blah, blah blah.
And I'm not going to cover all the snippets that I offer because of course, there's way too many.
But the idea is that basically, if I want to have a component, I just type such and such and I get
the full blown component.
So let me go back to a landing.
And prior to React 18, usually what I did is something like this where you go with RF C, which just
creates a functional component.
As a sign out, you can also create with a narrow function so that one was RF.
And I believe it was a or I'm sorry or a f c e so.
So this is going to be the same component, same as the file name, but in this case, it is a natural
function.
Now, starting with the React 17, or I'm sorry, I said before react that think when I'm talking about
the React 17, starting with React 17, we actually.
Don't need to import react anymore in the components.
So if you want to omit this import, what you can do with this extension is just go with underscore.
And by the way, it's not what I wanted, so we want to go with underscore.
And then we go with r a f c.
So essentially what this does, it creates the component.
It doesn't import react and we right away exported this as the default.
And this definitely has been the extension that saves a lot of time on typing out the boilerplate.
A quick side note in the latest extension version, the underscore option is not support anymore.
So if you don't want to have react import at the top, you'll need to go to settings instead.
And you can get there by clicking on a cog.
And more specifically, you're looking for the settings.
Or of course, you can use the shortcut run type, react snippets and look for this checkbox.
So it says here import react on top and make sure that it is uncheck once you knew that the result is
going to be the same where you won't have that react import at the top, when we want to import our
two images like I said.
So both of them are sitting right here.
So we have the assets then more specifically images, and we're looking for logos, 3G and 4G.
So those are two things that we need to import.
So let's go up here on top and let's start our imports.
We'll just go with import.
I'm going to call this logo.
From online, let's go to assets here.
Images.
And then we're looking for logo a SLG logo, dot astrology.
Then let's copy and paste.
And I'm just going to say here, Maine, that's going to be my main image.
And the name of the file is Manus.
And like I said, let's start with very basic return where we're going to go with heading for, let's
just say, a landing page.
And once all of this in place, then we want to navigate to jazz.
And then essentially set up our landing page.
So let's go here, let's import.
We're looking for a landing from the landing pages and let's just set it up as a there so we can still
have that having one because there's going to be some changes here anyway.
So let's go here.
Let's leave for now.
I guess the heading one before we have done anything.
And then let's render the landing one.
Now I want to set up a proper return when we should see the job of offer as well as the landing page.