So until application is complete, you need to move into application, and for that purpose, we will
be changing the trees to our password generator.
So just click on it and then city and the name of your app.
And in my case, it's.
Password generator.
And then hit enter.
So now we're obviously not inside having the escort installed, I'll just outright write code with a
PDA to open up my vehicle, an instance of a pathogen into that.
So this is the vehicle instance of the pathogen data.
Now if I just look at the source directly here we have an abducted is digest.
So just head into our digest.
So this is the default template that we get from creating identity now, along with the so strict we
we have not modules we do know about and what we are doing.
We are having a public folder in public folder.
We are having our icon index strategy.
So in the storage room alone.
So it contains a head that adds some links as well as a title that is specifying react up and live with
our data.
So this is a place where all the compiled code is going to be dropped up in this particular divide.
Now if we just close this and give it our first run.
So open up your in-built terminals, which you can open up by pressing control, press back.
So this is going to open up a domino.
By clicking on this terminal tab and creating a new terminal.
So any one of those is fine, just open up a terminal and run the command and start to start the application.
Now this is going to compile the application and open up a default browser with our React app loaded,
and so this is the default template that we get from Create React tab utility spending, react level
and an attack that is going to take us to react juice documentation, not just head back into a quality.
And let me just close at this terminal.
Now let's just create a hello world component, so I need you to get rid of this head attack.
Just get rid of this and create an etch one.
Element so invigorating and a natural element.
And let's just call this are Helloworld component.
Now hit save.
And Latvia right now.
So here is a high level component, and we have made a first to ad component, so now head back into
the app and now what it'll do is that doing a bit of housekeeping, let us get rid of what we do not
need in an application.
So the first thing that we do not need an application are these logos, as well as the thesis will be
using SAS and obligation.
So therefore there is no need of this Abdul thesis.
So just get rid of this.
Delayed this from a project structure, and apart from this ad, the thesis, I also want you to get
rid of this Abdul astrologists, so get rid of this because he's not needed in an application.
Apart from our, Rogers will also be getting rid of a logo that I said, you just delete it.
OK, so we are almost done now.
Now if I just go into my Abdul, yes.
So this is a functional component and you have index data says that it's going to container index.
I must say the theses properties and this is the index objects.
So here we have an up and OK, so I want you to just change the name of your extension of the Abdul
G.S. and moving into Abdul GSX.
Now this is going to break up our obligation.
If I just see if my dominance, it says that Abdul just can't find this particular file.
It's because of the extension and it doesn't know that now we're having a different extension for our
app.
So let's just redeem for this.
So then again, will been floating our app.
This time it is going to be Abdul GSX, so here that Abdul GSX Nazir and the children find, OK, we
have compiled everything successfully and it's running on localhost three thousand.
So let's take a look at our application.
So how does that up that this is completely what I wondering why it has suddenly changed places from
the center of the screen to the left of the screen?
Well, it's because we have defeated the ABDEL-ATI society, which contain the safest property to enter
this particular element.
So now we have made the necessary changes and now will be discussing the full structure of our application.
So that is next on our list.