OK, so now that we have installed everything, let's get to the main part, which is the creating our
application from scratch.
So I've already explained you the folder structure and also now will be creating the components that
are entering the components and styling, designing them right and the logic and everything will be
done now.
So now you can just minimize this terminal, or obviously it will be running the whole set of it will
be running, but that will be minimized.
So now we need to create another component.
So the first component which we are going to create is the nerve.
So let me assure you, in that particular application demo, which I was showing you, the first thing
was the never so first of all, will be creating this beautiful nav bar.
And then we will be creating the rest of the things.
So remember, this is are different components for this, and everybody's not like embedded in just
one page and this is not a one.
This is not the code for everything is not written in in just one and one just file.
So there are particular JS files, which are known as components.
And this is a different component.
So that is what we are going to build.
We are going to build this now component for the very first thing on which we are going to do.
So let's go to ED and we need to create a board or just file, you can name it anything, but it's good
to stick to the convention and it's good to have the like names which clearly justify the purpose of
the component.
OK.
So you can create a folder here with the name of a container or component.
But what I'll do is I'll create it like this only so it will be locally visible to you and you will
be like understanding everything.
So I just want to make things like clear speed as possible.
So I created an as I see folder only.
So that will be what you can click here and you can create a new file that can be nav bar or Jesus.
OK, so now we're going to do is you need to write some code.
So for that, like the default code, which is same for everything that can be directly like a guard
phone somewhere so well that I'm using an really, really productive and useful extension, which is
the E7 snippet.
So I would also recommend you have installed application.
So let me just show you first of all, which is there an application, not application actually extension?
I'm sorry extension.
So it's a we escort extension that you can see this one right here.
This E7 React Redux graphic will react native snippets to just install this extension and then what
it will do, it will give you the boilerplate code of the like.
The Basic Basic Code will be given to the boilerplate code will be given to you.
So you do it once you install that application, what do you need to do is to just a tablet RFID and
then it will give you then hit enter and then it will give you the like boilerplate code.
For me, it doesn't work for some reason, so maybe it's due to the essence of what I need to do is
I need to do control shift and then I need to select the snippets out and then I need to do RFID.
And then I got this boilerplate code for you.
It may work with just autopsy, and if it doesn't, that you need to just press control, shift B and
then Ieso in separate search and then odyssey. okay, so now that we have got the boilerplate code,
what we can do is we can just write code here and then everybody else and that will be displayed.
So let me explain you the syntax of whatever is being shown here.
So first of all, we are importing the EC from React and then after that, whatever the thing, which
will be here and after this function, before returning, basically before written, whatever code is
there.
So that is like jaws could brought before the script.
That will be all logic and that will be all the logical statement and the function and everything.
And after this is written inside, this parenthesis will be GSX, which is JavaScript and HTML, so
there can be A. M. Also, there can be a DAO script also, and you can also give inline styling.
So see us also.
So basically this HTML, JavaScript and CSS and just one single file.
So that is the magic of React, and that is what is present inside the written statement.
So that is the GSX, GSX, but as NPR and the script is presented at the top.
OK, so now we are done with this mike the explanation of the syntax.
Now we can just create on that one.
So first of all, I create our.
Element that is the nav element for nav.
And it will give it just looks like they've only for now and then will provide active so that they will
be having a class name of NAB Center.
OK.
So I'm giving the class news from now so that it will be easy for us to do the thesis, but don't get
confused.
The class name could be anything but I'm giving these classes because I have written the thesis according
to this class names, but no need to get confused.
This is just a customizable thing.
OK.
Next, we'll have our three tag and this will contain like the brand name, like the brand name of the
website or the company or anything.
So we'll write hot deals here.
I.
This is what the name of our company, our imaginary company.
Next, we'll be having our dev.
So this will contain some of the information, like the like the bag icon.
And along with that, it will be the count, the product count, it will.
It will be showing the product count and it will be variable.
It will not be static.
It will be dynamic.
As you change the number of products, it will be changing.
Initially, it will be hard coded and initially it will be static.
So we will go step by step.
So for that, we need another device so that there will be nav container nav container.
So basically whatever is contained in the nav.
That's why I've given this name nav container.
Inside this, we will have image, so that image will be of the bag.
Let me show you in our project.
So this image right here, this is as big.
And this will be having.
So I've already done one more thing.
I've already downloaded, downloaded the images and logos, and I've created a folder which is media.
And so that there are two sub folders with the first one is the icon, the second one is the product
and the icons that are some icons and the products that are the images of the products.
So this product and we just will not be using because the data will be coming from the external API,
but still when we hardcourt the data that will be present.
OK, so you also create this folder and put the icons here.
You can use this also these icons and if you want, you can use another one also.
OK, so first of all, we need an image, the bag image.
So for that, we need to import that image.
So import, you can give anything, any name you give back from.
And then you need to provide the location of that particular image where it is residing.
OK.
So, OK, I made a typo and it is an art form it's from.
And then you need to go to the media folder.
OK, so inside media that have icons and icons that will be bagged out as we.
G.
OK.
Let me just cross-check it starts turning, yeah.
Bad dog, as we do.
All right.
So next what we'll do is we'll import that image.
Already we have already imported.
Now we need to render that image before rendering an image.
Obviously, we'll use an image tag.
OK?
And in the source will provide this name, this particular name from which we have imported that particular
image.
So that will be bag.
And this is all text, for example, for some reason, if the image doesn't show up, so the text hit
like cart on back anything, the bag.
All right.
So remember the image tag also in to the self-closing tag like every every tag, like something like
this, like VR tag or something like that, those tags themselves.
Clothing tags.
So if you if you are coming from an esteemed background and you are new to react or don't do the closing
tag for image, OK, because images of self-closing tagging react OK, but I'll just save it.
And surveys, servers already running.
Well, let us go to the browser and see what we are seeing right now.
We are seeing nothing, so can you guess the reason why we are seeing nothing, why the changes are
not being reflected?
You guess it.
The reason the reason is because we have not imported this narrow border gas component and not AB Dardis.
Remember anything which you need to display on your website or you need to get rendered on your website.
That particular component or or container should and should be rendered should be important in that
gorgeous file, then only to be rendered otherwise.
That will not show up and you would be just keep on searching where my container or component went.
So from here, you will import than ever.
Never far from why I keep on writing form and sort of from.
All right, so then you need to just import this now.
You can just provide the name of the car component you don't need to provide.
You don't need to type.
Never bothered Garcia.
If you're just starting out, but that is enough you don't need right now, but our genes.
And even if we write dogs, there's no problem with it.
There's not at all a problem.
OK, so now we have saved it, and now we need to include it to hit inside this app.
Contain it, so here we'll.
I have that component, so obviously this is also a said closing time.
Then we'll see, save it.
And now, if I go to the browser, you can see are heading this present and not icon are as big as all
2000.
Obviously, this doesn't look what we are expecting them to look because right now we have not done
any styling or something like that.
It's just like a raw thing.
This is the very first thing we have not given any CSS or something like that.
OK, so that doesn't matter right now.
What matters is whatever we are trying to render is getting rendered or not.
OK, so next we'll have another Dave and this will contain.
The count, the product count, basically the amount of the container, so whatever you can call it,
or this will be inside of this container only or get this inside the nav container only so that we wouldn't
have a class name of.
Amount container.
And inside this, that will be a dog, a paragraph that best that particular tag also will have a class
name, and the class name would be total amount.
And inside this, there will be the what you can see that will be the count, the total count of the
products which are present in your bag or in your car or on your wish list, whatever you you can say
right now, I'm just giving a hardcoded value, maybe five.
And then you can go to the browser and you can see that's being rendered OK.
So these are the three important things for the name of the title of the name of the brand.
Next, we have the card icon and then we have the count of the products.
So we are done with the basic structure of one.
Now what are the next thing we need to provide some styling for on there, but for that, we need to
write some CSS.
So the one thing here is that I'm not going to focus more on the CCIs part here because we are going
to we are here to learn, react and if is just like things are basic in that.
So I'll obviously review and I'll obviously treat you like what I'm writing.
I obviously explain, but I'm not going to write every line of courses from scratch here, because if
we do that, it will take so long and there will be five to six hours.
We'll be just writing CSC only.
So but still, we'll write some of the basics, which is understandable.
And that's OK.
So we'll write an index card.
Yes, but all write.