Hello, guys, and welcome.
For all that we have done with the introduction, let's get to the main part and let's start courting
our application because this is the most exciting part.
OK, so before getting started, if you are new to react, you can.
You have to download and install NodeJS and beam on your computer so you can just Google how to install
an audition and be on your computer.
And that is a very, very simple and straightforward process, and installation is like it's similar
to installing any of the software in the world.
And next, you will need ID or coordinator.
So I'm using this code for this particular project, so I would recommend you also to use that.
And if you have it, that's very good.
But if you don't, you can just download it.
You can just google it.
How to install and now Lord, we escort.
And after doing all of that, you're good to go.
So once you're done with everything, then you can just come to escort.
And according to do is you need to just go to the Terminal tab here and you have to click on this new
terminal and it will take some time to open.
And I'm using Ubuntu Terminal here because I'm using the Mersal.
You might be seeing command prompt on your screen, but that's totally fine because the commands which
you are going to use are exactly the same, so no need to panic about that.
So once you're here, you need to install the default React project by using the Command Create React
app.
And if you already know this, you are.
If you are all like intermediate levels, you can just skip that part and you can just execute that
command and move forward.
OK, so what is true is that you need to have this command that is npm SPAC's V8 type one react hyphen
app and space under the name of the application, whatever is a string and should not have spaces.
And once you tap the command center and it will take around five to six minutes to install the React
project, maybe it can even take 10 minutes.
So don't panic.
It totally depends on your PC and your internet speed.
So once you're done with that directly, you'll be created by the name of the application, which is
providing this command and one that actually hasn't created.
You can just open that directly through via scored, and once you do that, you will like see something
like this.
Not exactly the same, but things will be similar to what you are seeing on the screen.
OK, so there will be some forward.
There will be some files and folders here, but there will be some extra files and folders which will
be not be needing.
So you need to just clean up that stuff and you need to just left out with these things.
So first of all, there will be normal modules folder you don't need to check.
You don't need to touch it.
Then you'll be having a public folder.
And so this there will be some things, so you don't need to touch it either.
Then you'll be having a source folder inside this.
Just keep whatever you see on the screen.
The app drawer is in next door ideas and obnoxiousness and index or and this package log Dodgson and
the package file here as the report vitals vital to test dogs.
Everything else you need to delete because we are not building the application on the scale that we
need.
Testing for this?
OK, so once you're done with this, then you can just start off coding.
So once you're done with this, you can just go to the Abdel-Aziz and you have to make your app drawer.
Diaz look like mine because there will be some extra lines of code, but we don't need it, actually.
So that is why you have to make sure everybody has to look like this.
And once you have your app drawer just like this, then you need to check if your application is installed
properly or not.
Before that, you need to go to the directory of your application inside this terminal, which is for
me to inside the project and cafe.
Then you need to type npm space start.
So this will start a server on a particular port, on a local host, and you will be able to see all
the changes which you make here on the browser.
So this will take a few seconds for the very first time.
And if you're doing it like often, so then it should not take more than five seconds.
But I guess in order to settle what has been started, you can see here that compiled successfully and
a server is running on the word three thousand so you can just go.
Hulu closed on the fourteen thousand and you can check whatever the changes you make here will be reflected.
For example, if I write something and you text, maybe hello world.
This is the at the station.
And when I say it for the third will restart and this is the best part, you know, whenever you see
the any whenever you make any changes and you save it, the server restarts.
You do need to refresh the page or you need.
You don't need to restart the server to see your flight, to see your changes on the browser.
It automatically does that.
OK.
So let us go to browser and you'll see.
Hello.
This is the application store.
You can see on the screen this is what we Typekit.
So now we can move further and we can just go ahead and start creating an application.
So let us do the basic things.
First of all, let us try to create the structure of the application.
So.
Inside the town, the first thing we will do is we'll create a section inside the main drag.
So there will be a parenthesis.
And the scientist that will be in back.
So inside the main bag, there will be a section, so.
S. And.
And that will be a title inside this, followed by some other.
Buttons and that buttons will be the categories that will do once we create the like the component items
component, the menu component, and then we like that data as of now, we just we just checking out
an application.
So inside of the section, we'll have a date for the title because we want things to be separated out.
So that'll be title.
Not like this.
Vital.
And next, we'll have.
Like, we can give the class name, but we'll do it when we are styling this thing, OK?
So inside this do being a given H2 and is will right?
Menu.
Okay.
So and we'll.
Leave this as it is, and we can give it on the line if you want.
Bought up in the like, when we're styling, we will give a style and the loan because that looks even
better.
So we'll style the line and then we'll provide that.
Okay.
Now, when I say it and I'm going to the browser.
So you can see our menu has been printed out.
Obviously, this does not look what we are expecting it to look, but it will start looking like that
once we get the styling and once we arrange things in order.
OK.
So.
Next, what will do is.
We'll provide some styling to the.
This section four that we need to give the class names for it, so the section will give a class name
of.
Class name.
Of Menu U.S..
Menu section, right?
And for this dinner, we'll give the last name of.
Last name off.
It'll.
And.
Once we are given this title to it next, we have the age to inside this we have are heading.
So let's go ahead and provide some styling to this classes, which are the men's section in the title
section.
For that, I've created this index starts to fail.
So let me close this.
OK, so what you seeing on the screen is the like the color values, which I have written in advance
so that these are the colors which we are going to use in some of the classes, not everywhere, but
some of the classes will be using disco colors and sometimes we'll be even using custom colors that
the hex code and.
But this basically prevents you from writing it scored.
And also you can just directly like this name, and that color would be appear to apply to your class.
OK.
So this is I've written like that.
I'm just copy paste.
Turn on some the weight.
OK.
And from here, we will be writing our actual thesis.
First of all, we will be writing some global courses and then we'll be providing access to the like,
the specific elements and the components.
And the glass name is basically which we have given to the.
The elements and all who that will be doing in the next video will be providing CSIS and we'll be writing
some would call in that or just fine.