In the previous report, we have set up a React application.
So now we can see the next step that is building the React shopping using the React Champignon Library.
So.
And so it's very challenging.
You will be getting this website.
So first thing you have to do is you have to sign up or log in.
If you are already having an iPhone, you can logging audience, you're going to sign up.
So I signed up with my email and password.
So once you sign up, you can see this homepage.
So now we are here, we are going to create a new project to project.
I will be chat application.
Get started.
We seeing you are getting some project targeting API key and letting someone see what it is and where
to use it.
So now we have to go get.
And then as you can see, where to determine and import the packages that are required to start building
the chat application.
And vehement, strong.
So we're using the design icons.
Axios Andrea chapping and.
Chalk Indian.
So for a few seconds, this will take some time to install.
So the packages are in front, so on the back, I thought you can start using them or not.
I'm not just.
So I've been putting the shopping in.
And pork chop in the first letter of each word should be capital while important.
Because here we are importing by object restructuring.
So this is how it should be.
So if you want to take military action to Indonesia installed or not, you can put your packages on
and then start looking for the libraries and you can see the Axios all independent, this object oriented
Axios React chat engine and everything and design icons have been struggling.
The latest version is strong.
So this is our easy way to check whether that installed or not, if they're not in Australia, Canada,
rather simply to install them in the terminal and install them one by one.
So sometimes what happens is when you are installing some packages together, it might not work every
time to install one by one.
And also, it's still not working.
Then at a flat minus minus save that set at the end of the install, for example, npm eight Axios minus
Rennison.
So this should work if it is not installing.
They all after importing like now there is there should be some states for the Afghan side, so we imported
the stage at the end, so I'll be creating the Nigerian.
OK, fine, so the fight is already exists or benign budget.
Now what I will be doing is I will copy pasting some court since here.
Our target is to learn advanced concept of free access sockets, react sharp engine props and, you
know, state providers, the producer dance.
So as I was going to learn advanced concepts of topics, including the right steps, so I don't want
to bother you by writing the court of the CSF styling control.
What I'll do is I'll copy paste support.
Like Dorian, you can see it's basically simple like batting position and everything like you can do
this by training level, by explaining something for it.
So the board will be available for you.
So you can check that and then you can do the same.
You can feel free to change the code in it and then customize the styling if you want.
So once I say this.
And what about this and as important to Japan know, be using the Jordanian component?
So now the props part comes.
So what props we have to send to this component?
First thing is I.
How much hype you want the chopping and pubic your website.
So basically, we want the full website, so I'll be giving it and we hit that went vertical hype.
So why do we have to remember while giving props is that the props are like that rebukes of the amended
tax?
So basically we are using one bag on a farm that you have some attributes.
So similarly chopping it is also a bag, but it is up to the fact that we are using like we are building
or using sap that someone else did.
But that's why it is same, like giving attributes to the before general tax without any common side,
without any foodstuff, anything like it should be a attribute equals true and attribute value.
So that might.
Will rely want the Project I.D..
So this is the area that we saw when we created the project.
You can see the project idea area, so you can copy paste this.
So now we're under username.
And Foster.
Our poll results are far less user secret.
This is a naming convention of the Titans and props.
So it'll be user secret.
So once we're done with this and I will go to the shop in June and we'll create a new user.
So let me give you the names, something regarding John.
A password will be worthy.
Q W E R P, right, so basically the first six letters on the keyboard.
So let us give her some random email like.
John and Reggie Miller come.
First name will be John.
So there's going to be little to naughtiness like these three are important for creating the used only
to give the same last sentence since there is no strict even that is not important like so we'll be
skipping everything will be just giving the name secret and talented person.
Since we are using a very simple password com gives us a warning like your password is found in a database.
Since we are doing this for testing purposes, we are using that password.
But when you create the real app, you have to use the passwords that are highly not encrypted.
OK, so I'm taking the user, you can see the user present over it.
Then we can create a new chat.
Job title will be.
Chad application.
Then admin menus and I'm like, well, give badminton players, John, since we have considered only
one you create.
Say a softer this, you can use the user's password and username, Audiard.
In our and drops.
Password will be.
Well, I think we can use that environment variables like data, and we file and then store this password
using them and protecting them.
And then one day and we read and we file and then use as the variable so that if someone has access
to that in the cabinet, just fine, they cannot see your username password.
So for now, we'll keep it like this.
So this is done.
Open your chat application.
So as you can see with one simple thing, like we are able to build this complete life with some small
amount of thought like not what we have done, we have just used some stating in Ambrosius broadcast,
we have used the React chat engine in our apologies.
So this will create this website.
We can add charts over there and then let me type.
So this will take some time, but and that seems like we haven't completed the complete code, it will
take some time.
So you can view of the work.
So this is all the basic tracking and we have got it.
So now what we'll do is like we have port in the part like John is the only user to have the access
to the chat application.
Like what if multiple users can log in and chat as their complex?
By default, only John can use the website now.
So if we want like 100 users, they should have a log in password.
When you enter the log in password, it has to check the authentication and then allow you.
You can chat with one person with another person.
So this connection between two end points will be using the socket and also that step part.
And then there are many other React products coming up in the front row.
So we'll check out them from the next few.