Hello, and welcome back with this new video of the project.
Until now, we have seen of the users lives today is the stone, the reducer functions.
How to set up the project basically now in the studio, we'll get started with the homepage.
So for that, inside the components, you have to create a.
Page called.
Home page dodges.
OK.
So basically, what this is on page is we have.
So I have used RDF snippet.
So what it will do is so you can also have it as a package redux snippets.
Yeah.
So these are simple extension E7 React Redux Craft, you'll react native snippet.
Once you enable this, you can use basically shortcuts so that your code will autofill.
So the shortcut I use, these are FC.
So this is from an automatic outcry either called out of sea.
Yeah.
So this is giving the functional component, but if we type out, if you react at a function component
and anything you it little out of function is the new trend, like many of them will follow arrow function.
So you can use that no problem in that.
So once this is done, I couldn't directly atone for this.
Now what we need to import.
We have to import many things like we have to import the stylesheet.
The features the Google log into dispatch, a new selector from React Redux and also the features from
the users digest everything.
So first, we'll import all of them.
So important we will.
From the Google Google.org, credit is not beaten out of it.
Next.
But.
Usually dispatch.
We'll see how to like help with this huge dispatch, and you select that in other videos or in this
video itself.
Basically be frustrating putting all the necessary things that we want and now we'll import.
Select.
Simon.
Oh, sorry.
Said sounding.
Safety was a data.
So this will import from where we have to import from.
You just use our slice.
And then we have to import the stylesheet.
Inside the styling, there is a folder called Boondocks Versus.
So we our area of concern is not about the styling, the styling part.
You know, you have you will have access to the court files so that you can see how the styling is done.
We'll be not concentrating on the styling, but I will create all the styling, you know.
Bob, inside this hour, no doubt of in the hole that I have in my.
System, so your main area of concentration should be under the act.
What are the features that we are using already?
We are importing how we are using the props, props and stage management.
We'll see when we go deeper into the project.
So you have to not basically have concentration on the sphere.
Styling is impolite.
Like, you know, you can understand by seeing it, you can.
I feel an not understanding.
You can use the Google documentation, you have the Indian box or many other military schools kind of
websites where you can search.
And styling is basically most of the thing is, try it and we will see some value in some give value
and see how the webpage looks made it on that you will adjust the values so that you want.
We want to see your website based on your preference.
That's not a big deal.
You can do it.
So after importing the styles.
Now we have input on everything, OK, digital will bring some welcome message.
Welcome to Home Beach.
We have expert on the home page, novel importance are dodges.
We will import and not slash compliance slash.
Home page.
Report on page from.
So where we have to use this old homepage, we use this embed instead of this Hello blog website, we
lose this saw on page component.
Homepage.
We'll see whether the changes have occurred or not.
Can see the anxiety or that component, which can't resolve styling or not since this.
Styling.
Talk.
So there is a small little area.
So there is a lot in the military course, so nothing to change, or it's basically have to refresh
it or control shift B and click on Reload.
You can see the window click on individual record.
That's not a problem so often, but if you refresh, you can see the message will come to homepage.
So basically, we have completed this on pages and that we are using this component and said this apologies.
OK, so this one page is rendered and then instead of we, we're having the welcome home page message,
right?
So this is basically the starting of the homepage.
Now we have to use everything like, you know, as you see here, when we logged.
So it is our logging in by default.
So whenever you are refreshing it, you can see a page with, you know, the header, the blog readers
and everything, the book symbol and everything.
So how to build that since I am, I am already logged in with my Google account that is automatically
redirecting it.
That's not a problem.
So can basically delete the cookies, but we want to see the one page that the user gets whenever it
is not logged in.
So for that will start, according.
First thing we have to do is.
Here we have a class name off.
Homepage.
So what I'll do is I'll basically complete off this court, the right, the home should return, and
then we'll explain then what this code does because you know that fighting every plane, of course,
will take some time.
So I'll just copy and paste a snippet of code that would be around 10 lines and then explain that clearly.
So this will be the finish of court for the home based on Jess.
So what we are doing here, as you can see, these are we have somehow to import them exported and also
the home page component with which we will never come to homepage.
But yet you can see we are not rendering simply text.
We are rendering a class with home page plus them.
So this class won't Bedouin style it inside the home that CSIS.
And also it will do some default style for it.
Default style will be display, is signed in, is signed, then will have the value of you self-select
sign them.
This will get from the users lives that we are using.
This will be none.
If this is true, if it is resigning, it would be none or else it will not be anything.
And you can see this edge to edge and of a book similar reader's favorite place, and we have some content
and also this thing is very important.
The Google Log.
So what we are doing, the first thing you have to do before doing this is go to.
This cloud platform.
Counsellor, Google doctor, you know, Dr.
Well, welcome, once you go to this, you'll be getting a dashboard, right?
And you would have to create a project.
Why don't you create the project?
Yeah.
Seemed to work with this controller, Google or Airbus.
When you Google apps and services, if you have a project inside the credentials, you have API keys,
you have been able to point a client ideas when when you are creating the project.
So when you end up with this, you will get the client ready for that project.
So I already had a project name.
The secrets for that.
Had this client side be using this client can copy this what line data and simply can paste it already
at?
OK, so now when you pasted what is happening is Google are getting direct line data so that all you
know to make sure whether the client who is making this website is secure or not.
And then this global log in will have a button component button we are using, and then the button will
be log in with Google.
They are pushing the button and let a few drops.
So water drops, so to discuss about drops.
So we'll take one example.
Take one image tag image that will have you attributes.
So what are those attributes?
It will be source.
It will be alternative.
It will be until afterwards.
For example, if you take a.
Pitch difference.
Then you need to give the link of that reference, make it should do that.
So these are the attributes of the female tax.
Those these are definitely a male tax.
We are calling them as attributes.
But yet this Google log in order of your take on example, such as other companies like Google Pay down
other components of it now bar food, blogs, data and everything.
So those components will have some of those will be will export and use them to these other components
created by us.
Are customizing the companies based on the requirements.
This Google organizer, this is a component that we got from where we are.
Google like this is also a package that is developed by some other programmers like us on it.
But these are the, you know, the companies that we are creating and the attributes that these components
possess are called as props.
So blind, it is an attribute we have to give it a value, but that is a natural render means what we
have to render.
And that will take the argument cardiac random props.
And it will render a button so that whenever a button on click, that means whenever someone is clicking
on that button, it will block all the functions and props not on click OK.
So this render props will can see one.
So we build that on everything.
So the class name will be logging.
But as I said, this class, there will be numerous cases.
You can check through the code whenever it's in or when you can get the code fed and then on success
logging on failure logging is Sinestro Cookie Policy Single Horse Start again.
So these are basically available in the documentation of what does this mean like on success.
So we have to use the log in function and everything.
So that log in function will take a responsible control of the response and it will dispatch, said
Simon to dispatch said give the data that's part of the profile object.
So we'll I'll show you one thing.
This is the the blog applet that we have completed, so you can install the extension, react there
to this extension.
Right.
Here you can see the state state of the U.S.
You can see the East, I need to search this blog that does not disturb, that is action.
There is stress that is best.
You can see everything using this reactor developer tools.
So this is what we are doing, we are concerned about the response of what this log in is giving.
This will give the data of the user like the Gmail, what is using all the data of the packets and the
network that he's working on.
Dispatch user data, so dispatch.
We are getting from React Redux, right?
So basically, we are dispatching this inside to use dispatch.
We are dispatching this so that we can use this, all the six assignments activated and everything.
We are calling this at CNN to prove whenever the user clicks on login and setting the transponder profile
object profile object is basically the.
It contains the image of the user with which email is signing in since the attack should be followed
and not having any in a profile picture.
But if you are using your thing, you can have your profile picture.
On suction, on failure, resistance island cookie policy.
So these these should be rendered when the user is not signed in, right?
So the when the user is not signed and then he approved this, everything like log in with Google button
and everything.
Once the user is signed and then what we have after render we the end of the blocks.
So we have turned of the head that there is as usual, but nobody's in action in the upper end of the
blocks.
So how would enter blocks?
So I guess we have to change the policy.
So here.
It should be now, but so basically will create the now war component in the next video so we can see
how to create the network component and then help it enter the blogs based on the signing and not print
it out in the next few.