1
00:00:00,540 --> 00:00:03,330
Now, the first thing that will do is to import a React module.

2
00:00:05,810 --> 00:00:08,790
Just import react from React module.

3
00:00:13,260 --> 00:00:20,220
Once again, now is creating a functional component function app with a written statement in it, and

4
00:00:20,220 --> 00:00:22,670
every written statement should have a parent container.

5
00:00:22,680 --> 00:00:24,450
In this case, it is going to be active.

6
00:00:28,450 --> 00:00:34,000
Once you have made up it in container, are first element is going to be the block element of class

7
00:00:34,000 --> 00:00:35,920
name BCG black.

8
00:00:41,830 --> 00:00:45,880
If you might remember, this is the same element of that black banner, which we saw on our app.

9
00:01:00,250 --> 00:01:04,840
Now there has to be another component, and this is going to be a day of class named Block.

10
00:01:12,620 --> 00:01:17,840
And in this debate, there's going to be another day of class name container.

11
00:01:18,320 --> 00:01:20,000
This is going to container card element.

12
00:01:33,640 --> 00:01:39,160
Now, the first element inside our container element is going to be an image with no source element

13
00:01:39,730 --> 00:01:45,640
for the time being, we'll be just leaving it empty and give it a class name of user image.

14
00:01:59,190 --> 00:02:03,030
Now we'll be creating two paragraph elements, one with a class name user title.

15
00:02:06,030 --> 00:02:09,750
And hardcoded the value title just in the paragraph element.

16
00:02:14,340 --> 00:02:21,660
And another paragraph element of class name user value, as you might recall in our ad, there were

17
00:02:21,660 --> 00:02:25,140
two paragraph elements right below our image element.

18
00:02:25,350 --> 00:02:28,200
And they were the title and value elements.

19
00:02:28,650 --> 00:02:33,300
So these are those two elements and how could the value well in it?

20
00:02:38,150 --> 00:02:47,270
Now we are going to create another day of class name value lists, and it is going to contain six principal

21
00:02:47,270 --> 00:02:51,020
button icons of class name value list.

22
00:02:53,220 --> 00:02:54,530
Now Leo's list.

23
00:02:58,120 --> 00:03:02,980
And this is going to contain a six button element, so now recreating six button elements with the class

24
00:03:02,980 --> 00:03:07,810
name of icon and later on we'll be adding or wrapping the icons in them.

25
00:04:21,370 --> 00:04:26,470
Now that we have a six button elements, maybe importing icons from React icons.

26
00:04:27,190 --> 00:04:29,740
So the six icons that will be needing as.

27
00:04:38,530 --> 00:04:43,360
And since these are fantasy Americans, therefore you can see a react, I can slash FAA.

28
00:05:06,450 --> 00:05:09,510
Now, let's have this elements in our elements.

29
00:05:16,370 --> 00:05:19,910
And before we do that, we'll actually give them a label.

30
00:05:27,150 --> 00:05:30,330
For example, the first Italy bill is going to be named.

31
00:05:48,970 --> 00:05:52,690
And the second level is going to be let's name it.

32
00:05:59,580 --> 00:06:02,370
It's because this is going to display our address.

33
00:06:12,920 --> 00:06:15,800
And the third debate will be just putting up.

34
00:06:25,050 --> 00:06:28,170
No, let's just put a point in this and

35
00:06:30,690 --> 00:06:31,950
important for an icon.

36
00:06:37,270 --> 00:06:39,430
And the food they delivered is going to be.

37
00:06:43,790 --> 00:06:50,570
Kalinda, what age HMRC, because this isn't just about age, therefore, we are using Kalinda again

38
00:06:50,570 --> 00:06:50,930
in this?

39
00:06:59,690 --> 00:07:00,890
And the next day, the level.

40
00:07:11,420 --> 00:07:14,320
It's going to be email because this is going to display an e-mail.

41
00:07:15,020 --> 00:07:18,320
And let's just put they can and will open.

42
00:07:20,550 --> 00:07:22,260
Fines basically fund us awesome.

43
00:07:24,330 --> 00:07:31,200
It's the convention which they use, and the next day is going to be digital label of password because

44
00:07:31,200 --> 00:07:32,910
this is going to display our password.

45
00:07:36,520 --> 00:07:39,140
Let's put up for love.

46
00:07:43,770 --> 00:07:48,060
That we had actually made a static HTML recap.

47
00:07:48,810 --> 00:07:50,250
We need to export this.

48
00:07:50,460 --> 00:07:54,810
So just write export default app at the end of the document.

49
00:07:55,650 --> 00:07:59,580
Now hit Save and let's review our app in our browser.

50
00:08:00,350 --> 00:08:05,850
And before we do that, we are also saying at image a source element so that we can actually show up

51
00:08:05,850 --> 00:08:07,320
our image in this way.

52
00:08:07,320 --> 00:08:10,560
This is going to just be a random image, but later on we be adding dynamics to it.

53
00:08:11,220 --> 00:08:14,770
Now, if we see that app, well, it's not that great, right?

54
00:08:14,790 --> 00:08:16,710
But again, this is just as Gmail.

55
00:08:17,250 --> 00:08:20,880
So our next step is to add CFS to it racked up.

56
00:08:20,880 --> 00:08:22,020
So that's an extra.