And everyone and welcome.
So now that we've installed our project and we have set up our reactor environment, let's start coding
and let's build the website.
So I created a components folder here in the produce video.
So this component folder, which will be holding all of the components which we are going to use and
which we are going to reuse actually in the website.
So the first thing we are going to do is now we will create an avatar.
So let me just show you what is on our board first.
So when I come to this website, it's a material website, I'm just taking it for a reference.
So now what is the top thing here at the very top?
Can see this.
This thing here is our body.
Even if I scroll, that thing is not going.
That is the one you might have seen in other websites.
Also that there's nothing new in that.
So we will be the beginning.
We'll be beginning by creating this smartboard.
So the first thing we are going to create is this number.
OK, so let's get into it and let's start.
Creating a snowball.
So the first thing we need to do is create a never component in the components.
So I agree to file which will be nav bought.
Yes.
OK, so one cool trick now I'm going to show you is that we don't need to write the boilerplate code
by yourself.
Remember, we install extension Calleja seven, I assure you, and I told you to install.
So with that in extension, you can just directly input snippet of the boilerplate code.
So for that, you need to just type on EFSI.
If you have installed that extension before me, this autopsy does not work like in one shot.
So I need to just birth control should be and then.
I have to click and click on this snippet search and then I have to I see.
And then, boom, you can see, you can see the boilerplate code has been given to us.
This is the snippet of the starting like starting component, and this is same for all.
This is the general syntax or general structure.
You can see a full component.
So it has an import, which is import from the.
This is very important in every component you don't need to forget.
Don't forget this and you need to write this line.
Next, we have a function, which is the name and the functions name is the name of the component,
and it has a written statement.
So in the written statement, there is something we want to return of.
We want to render on the browser, then we export this component.
So one more important thing I would like to share is that in the written statement, we write GSX Now
what?
What is GSX exactly?
GSX is JavaScript mixture of JavaScript and Eastment.
That means inside this render inside this render.
Inside this written statement, you can write the script as well as HTML.
So just stand for that only actually the whole script and its HTML.
Now you can write together, so that is GSX, so you will write here.
You can write here and each one.
Which is maybe that maybe that is.
Hello, world.
And you can also write a down script here, or it can just create this and you can go right.
You can write a fair total function or something like something like that.
So there's nothing there's not a problem in that JavaScript and it's HTML can be written together.
So I will show you how this is done.
And this is just I'm just telling for your friends and we will use it.
And at that time, you will get more clear view of what I'm trying to say.
And if you are already in a beginner or intermediate level offer yet, so then you might be knowing
what I'm trying to say.
So let's just start building on the number, so we created this state, which was given to me and I
will create another day of my own.
So that will be never bar with the class of never.
But OK, now I will create two sections for the number one for the right hand side and what one for
the left hand side.
So first, let me create for the left hand side, so that will be left.
Left side.
You can give any name for the class name and one more thank you for coming from an extremely serious
background and you are new to react to.
The thing you need to understand here is that in DNA, in a reactor, we don't give glass right glass
NIMH.
So whatever you are using in HTML, you are using glass right in the Australian team.
So there are classes for every day or every container.
But here we use glass name.
So because it didn't master class means a different thing and then it it confuses that class.
So that's why we use glass name.
So how we have used glass name and that's what you are going to use or don't use class and just use
class name.
That's very, very important.
So on the left side, left side, let me just try it.
This is the left side and one more day we will create that is for the right side.
So that will be the right side.
And now I will write some text, which I want to display on the right side, maybe right side and just
who say So this is it.
We have just created our network component, although I have not finished it to give just begun.
So let us just render it and just see how this looks so it will go to after this.
Render this and or will import and have what that is, import not far from, and we'll provide the location
here.
So it's in the OK I wrote form.
Why do I do this mistake?
OK from.
And we'll go to the I guess it's this.
We'll go to the components.
Then again, you don't need to right and have wide audience, and everybody's fine, perfectly fine.
OK, so now I'm just going to import it over here.
So important component is really, really easy.
You need to just write nav bar and self-closing.
So self-closing is really important, right?
And let me just run the server now so I can just go to the website.
I mean, the product folder.
And let me just try a 10 p.m. start and this would run the server.
So meanwhile, it's running.
Let me just delete this text here.
We don't need it anymore.
And.
Their school, let's save it.
The score to the bar again, and this is what we have done so far.
And one more thing, let me just also import react prouder dorm so that we will be routing towards different
pages so all we can do it after we are finished with the nav bar.
So that will be done and.
And we'll go to the never again.
Now let me just import the logo here for the next bar.
Actually, we can import the logo after checking if this component is being rendered or not.
So let us just as always, is up and running, and let's just go to the browser and let's just check
that refresh.
OK.
So whatever we wrote in the no component has been rendered.
Don't worry about how it looks and just remember that whatever we want it to render is being rendered.
So that's what that's all we need at the beginning that the components to render.
So now we will just go to we escort and now we will look in the left hand side.
We will will try to render our image OK.
Image means the logo image.
OK, so for that, first of all, you need to import the image.
So for images, one more thing I will tell you is that I've created this folder right here, which is
known as assets.
So in that I've import, I've put all images which we are going to use in the project.
So you can also create a folder for the images.
You can call it anything.
It's not a compulsion that you name it.
Certainly, you can create it.
You can call it images or logos or anything you want.
So I called assets and I've put the images.
You can use any image you like.
There's no compulsion at all.
I've used these images.
You can use the different one.
There's no problem with that.
OK.
So let us import our image.
So logo image.
So we'll call it import logo from and then we'll go to S6.
And then there will be an image.
Let me just check what's the name of the image that is logo dot BMG.
Yeah.
So you have to put the exact name of the file along with the extension.
I thought being you dog GPD, you don't give any anything, you have to put the entire name.
This is not like importing the component where we don't put dogs here.
You need to provide don't angry.
All right.
So let me just save it and let me just minimize this hold.
OK, so now we have imported the image.
Let us just use it in the left side of the container or in the left side of the tape.
So here we will use an image tag that is I am G and then the South C, and he'll we will use the source
of the file.
So it is just logo.
And again, image tag is also a self-closing tag here in React.
So let me just save it.
And let me just go to the browser and see, OK, we can see this image, almost all of this is very,
very big.
But the best thing is it gets rendered and we can see it.
So as long as we can see it, there's no problem.
We can configure it and we can make it work, according to us.
So let's go to a court and let's just try to make it a little more beautiful.
So next, on the right hand side, we will be providing some links.
So for providing links for us to, we need to use the extra dome in our Abdul G.S. file.
So let me just go ahead and do it.
So you need to import three things.
Keep in mind you need to import and importing is done in inside the calibrator, so you need to import.
Browser out there as.
Rather than import.
Switch, then to import group.
OK, these things you need to import from.
To get out on this thing right here.
All right.
To import this from at home and now what we will do is that we will.
We'll wrap every component inside inside the crowd.
All right, so that means.
Every component will be inside the roundup, so every component when it's wrapped inside the powder,
then only we can navigate and we can rout out to the different pages.
OK.
So since we have imported about to switch and drought.
Next, Will Wrap is wrap this now, but inside the outer OK?
Move closer.
Photo.
We just bring the boss.
OK.
So let me save it.
OK.