Hello and welcome to the new way.
So until now, we saw how to write the code for home page component.
In this, we will finish the Nasdaq component.
So as I said, the styling is not a part, is not the area of our interest.
So we've completed the styling part.
You can see the home docs here says these are all the basics of styling that you can refer in using
the modern documentation or revelatory documentation.
Anything?
Let's just see how do we use that documentation?
So.
And the Indian, yes.
He opened this so you can see the good documentation of what he had.
You can search, for example, I want to search the styling for, for example, let me see display.
So search for display.
You can see I have different values, so like display, great display, nine flags in my rock.
You can see all the content for that, like how they work, but what does that mean and everything can
be for this documentation?
So basically, these are all have different default public height to display flags up aligned items
for center left margin.
Picture all the basics.
See, it's only basically in the colors and everything.
So similar to home that CSIS have completed the code for now, but the boxes and boxes of cases you
can get to see the score and you can use in your project or else you can also manipulate the code and
also change the styling, according to you.
OK.
So before that, since we have completed the home page access, we'll see how our page looks like.
So this is our page looks like once we complete the home page, docs see it.
But the styling for page there is a book symbol of place here and everything.
Once you click on logging in, log in with the Google.
You will get, you know, a pop up window for that.
Since we have logged in on, we are not rendering anything now, but we're not getting anything, so
I'll refresh, you can come back to the original pitch.
So now we'll see the court for home page.
So the no company.
So I've created a file called now, but I'll just insert components.
Open it.
You can see the whole code for this.
We'll see what this mean.
So line by line.
So first thing.
As we saw in the previous videos, we have come, we have been struggling to material into white coat
package using npm install can see here and demonstrate Axios allows npm installed material to upward.
You can check whether the packages are installed or not are going to package.
Back in Iraq, Jason.
You can see all the experts in starting material to strawberry tax toolkit installed at Google Logging
React Redux, everything is installed, so we have installed everything that is needed for the project,
so no need to use the terminal again.
So busy enough now.
But so this avatar comes from literally like, could you say?
But that is a component.
So what?
What do you mean?
The material you?
This is not like a library where we have a lot of components developed by other users.
For example, here I have completed the Coding for Home Page Company.
I can deploy this component and we have not a package manager repository website for that.
And then anyone in the world can access that by downloading that, they can use it in their dependencies
and they can import a net project.
Similarly, reducing developer community.
What does this avatar component does?
It does.
A classroom like that is that we can do it without a source, an alternative.
What is the source?
The source is the profile picture of the user with the which do you manage logging in?
I wouldn't see that.
Five important discovered that important the remarkable level they should be allowed option, right,
use dispatch, you still have to import like, you know, I imported all the things that are necessary
from the users lives in my novel.
But so now what is basically, as you can see, the can have it here on our bodies.
We have a title.
We have a search badge, we have a button.
We have a profile for our photo.
We can also get the name will have a lot of symbol and then the blocks.
So basically in this area of concentration is this number Alphabet is now.
But this now everybody will be saying that the rule of law.
All right.
So I will have this now.
But what do you?
Now by.
So before having that, we have been boarded.
And both.
I have one.
Some.
But slash company slash.
So we exporting it as now we are importing it inside.
Adaptogens.
So there is and that we'll see that inner shark dump.
So before that, we'll basically see what does the coating inside the number has.
So these are the users familiar with the homebuilder.
Wilson offer that we are using hooks input values that input valuable.
So this looks what it does is.
For example, we take one example.
In some websites, there will be a clock running like you can see the time changing.
Every time you open some website, you have some.
Sometimes you, for example, if you open a social networking website, you will somebody will post
a photo and there will be time beside it underneath it or something.
Like a few seconds ago, one minute ago, two minutes ago, three minutes ago, four minutes ago, one
hour ago.
Such a change every second.
The time should change every second.
So whenever it's changing, whenever it's changing, it should refresh based on the, you know, like
the basic programming practice.
So when the website or the page gets refreshed every single second, then like the users will not use
that web page for short.
So that is what the basic disadvantage of that, that in a systematic way.
Programming note.
But does it mean that the default web programming for the city yet what it does is it only changes the
component that's necessary.
It not refreshes the whole page.
So that example, we use this you state for this fact, we're using it for the input value.
That means we are using it for this input area.
So whenever we click on, for example, search the news for sports and click on Search.
Then you can see only the blogs data is changing, not the pages refreshing.
If you refresh, you'll get someone of their value, right?
Now you can see the whole pages and it's not about fishing, it's only changing the things that are
needed to be changed.
So that's why what we have to change every time we lose the state looks for that.
There are different types of hooks we'll have used to cook.
We'll have to use a peacock or we can also have a different use history hook and everything.
If you want to know details about them, you can refer to the documentation that is present on the internet.
So, OK, we have understood what this looks does, but how we use that first thing, we are having
input two arguments we are having.
The first thing is input value.
This is a con is a man of a variable or a constraint that is storing some value.
So they change.
This value will be using set input.
So initially, it should have a value that values pick.
We can change this guy leading this set input value.
OK.
So as you can see, we're never on change.
We are taking nine eight.
That will be the input that the user is giving.
And we are changing that input value, but you don't get that value for that value.
Value will be the input value that the user is giving.
OK, so now we have some water use status, we have we have, you know, define the selectors, we have
defined the method dispatch method.
We are logging so similarly to log in when we used a home similar to log in function.
Whenever the user clicked on the log, it will dispatch the reducer function from the user slice and
then it will set the sign in default and the user did not do this.
So you can see this dispatch and everything we are getting from React Redux is out of everything the
package that we are simply using.
So these will be ready for coding that you have to remember.
It will be back is going to be you can remember them through practice.
So these are basically the things that we saw until the next thing is how we will see that in a way.
The first thing they're doing, we are having some division with each one had a blocked menu, so they
usually sign them.
If the incitement is true, then only this block of food will get executed.
So what is this block of?
It would have some division called block search that will take some input they input as a place, or
it will have a value of the input that the user is giving the input value and then it unchanged whenever
it's genuinely upsetting this input value to that change.
So, for example, if the user is clicking OK, we can see one example.
So.
Well, basically, you know.
Consultant Long.
You can a lot.
Input value.
So we'll see what's happening.
So we will get an idea of that open now.
Developer tools to control.
So you're inside the search.
When I'm typing.
So there's an element.
Well, we're getting out of control not long.
So you will see that.
So what will happen is, for example, I imagine the takeover here.
So now, instead of that, I'm adding seat.
So first, the value of the.
Impact will be seen now when I get a letter, for example, and then it will automatically change the
input value so that whenever on change on genuine, even a single letter which will trigger that function.
So it will trigger the input setting this on change and then on, General said take the second put value
function.
It will call this function and change the value to target value.
It will be the function that is triggering.
Target will be the target of that function.
The value will be the what is the value of that target, the function of triggering.
So this is what it does.
So long as this is not in our modern culture, such when the user clicks on search, we'll call a function
call and you click on Click.
So Anglican will is hanging on hand and will be so basically the, you know.
Let me pass this basic feature, like whenever we are submitting a button, then the page will reload
automatically.
It will refresh.
So why do that?
What is the purpose of react?
It's going to do I won't be fishing everything like that.
Will you just eat or prevent a default?
Is the event that is triggering this high click function.
We'll take that as the parameter for this function eight or 24 and then dispatch that input the input
value.
So he had the input set.
Such input will be the input value that we are dispatching.
Yeah.
So this is what they saw and the signing the search feature is doing now, when the user is signed and
then what we have to render, we have to render the photo of the avatar of that particular, you know,
the user, the profile picture of that user's Gmail.
And also, I need to give it a name for that user.
What is the user name and also the Google?
Or what would the lourde button right?
And on level success, you have to call the log what function if the user is not present, that that
means the log Innisfail, then we have to give the title user not available.
That means if they is signing this false, then it will end up this, combined with an individual can't
use are not available.
So for everything, we have done the styling part here.
So no need to worry.
You will get the court files.
You can refer them.
If you have any doubts, you can use the documentation.
So now we will discuss about this now, but like what is happening here in the Avatar and Google will
see that in the next video.
Thank.