Now, the first thing that will do is to import a React module.
Just import react from React module.
Once again, now is creating a functional component function app with a written statement in it, and
every written statement should have a parent container.
In this case, it is going to be active.
Once you have made up it in container, are first element is going to be the block element of class
name BCG black.
If you might remember, this is the same element of that black banner, which we saw on our app.
Now there has to be another component, and this is going to be a day of class named Block.
And in this debate, there's going to be another day of class name container.
This is going to container card element.
Now, the first element inside our container element is going to be an image with no source element
for the time being, we'll be just leaving it empty and give it a class name of user image.
Now we'll be creating two paragraph elements, one with a class name user title.
And hardcoded the value title just in the paragraph element.
And another paragraph element of class name user value, as you might recall in our ad, there were
two paragraph elements right below our image element.
And they were the title and value elements.
So these are those two elements and how could the value well in it?
Now we are going to create another day of class name value lists, and it is going to contain six principal
button icons of class name value list.
Now Leo's list.
And this is going to contain a six button element, so now recreating six button elements with the class
name of icon and later on we'll be adding or wrapping the icons in them.
Now that we have a six button elements, maybe importing icons from React icons.
So the six icons that will be needing as.
And since these are fantasy Americans, therefore you can see a react, I can slash FAA.
Now, let's have this elements in our elements.
And before we do that, we'll actually give them a label.
For example, the first Italy bill is going to be named.
And the second level is going to be let's name it.
It's because this is going to display our address.
And the third debate will be just putting up.
No, let's just put a point in this and
important for an icon.
And the food they delivered is going to be.
Kalinda, what age HMRC, because this isn't just about age, therefore, we are using Kalinda again
in this?
And the next day, the level.
It's going to be email because this is going to display an e-mail.
And let's just put they can and will open.
Fines basically fund us awesome.
It's the convention which they use, and the next day is going to be digital label of password because
this is going to display our password.
Let's put up for love.
That we had actually made a static HTML recap.
We need to export this.
So just write export default app at the end of the document.
Now hit Save and let's review our app in our browser.
And before we do that, we are also saying at image a source element so that we can actually show up
our image in this way.
This is going to just be a random image, but later on we be adding dynamics to it.
Now, if we see that app, well, it's not that great, right?
But again, this is just as Gmail.
So our next step is to add CFS to it racked up.
So that's an extra.