1
00:00:00,390 --> 00:00:04,850
Okay, so now we'll be building some other components like loading and so on.

2
00:00:05,310 --> 00:00:13,800
So the reserve component will be going at the last because that requires that like the contribution

3
00:00:13,800 --> 00:00:16,440
of all of the components so that we make it the last.

4
00:00:16,950 --> 00:00:22,980
So now we'll move on and we'll create the loading component, like when the data is being fed from the

5
00:00:22,980 --> 00:00:23,510
API.

6
00:00:23,520 --> 00:00:26,490
So we want to display something on the screen.

7
00:00:26,910 --> 00:00:30,990
So that is basically our loader on our loading component.

8
00:00:31,410 --> 00:00:36,810
So we will create that inside the components will create the loading daughter GS.

9
00:00:37,500 --> 00:00:44,340
So Loading Dodges or GSX, whatever you want to call, there's no problem with that.

10
00:00:44,910 --> 00:00:51,780
So now we will import the basic boilerplate code of React using our extension.

11
00:00:52,290 --> 00:00:59,820
So snippets search RDF, see how we got the import, export and the function.

12
00:01:00,330 --> 00:01:04,620
And now we will also import the React loader spinner.

13
00:01:04,620 --> 00:01:07,590
But before that, we need to install that.

14
00:01:07,950 --> 00:01:12,750
So we need to go to the terminal and inside our project directory.

15
00:01:12,780 --> 00:01:14,580
What we do is we need to just.

16
00:01:15,570 --> 00:01:17,490
So here we will type the command.

17
00:01:17,490 --> 00:01:27,330
But before that, let me take you to the npm website and we would search for the the loader basically

18
00:01:27,870 --> 00:01:28,860
loader spinner.

19
00:01:30,740 --> 00:01:39,170
Roman p.m. So it's always a good idea to go to the and being paid and look out like what's the size

20
00:01:39,170 --> 00:01:43,210
of the package and downloads and all and last object.

21
00:01:43,610 --> 00:01:49,700
This is the React Laura spinner and it's really, really tiny package.

22
00:01:49,700 --> 00:01:50,840
It's not so bulky.

23
00:01:50,840 --> 00:01:52,630
It's just of 83 cubes.

24
00:01:53,210 --> 00:01:58,070
And you can see there's a code for it and you can customize it according to your needs.

25
00:01:58,640 --> 00:02:03,170
I was searching for the display that how it looks, I just wanted to show you.

26
00:02:03,170 --> 00:02:06,140
But unfortunately, that is not here.

27
00:02:06,320 --> 00:02:06,980
No problem.

28
00:02:07,520 --> 00:02:12,080
We'll see it live when we are done with it.

29
00:02:12,440 --> 00:02:15,650
So what we need to do is we need to install that.

30
00:02:16,100 --> 00:02:18,440
I think I told you, no, I did not.

31
00:02:18,690 --> 00:02:27,050
So that this is the command and beam, install, react and load the loader and the spinner.

32
00:02:27,480 --> 00:02:33,170
So this is the code for installing this command for installing the reader claudel spinner.

33
00:02:33,650 --> 00:02:39,680
The Just Tab command inside your terminal, inside your project data, and you will be able to install

34
00:02:39,680 --> 00:02:40,880
this OK.

35
00:02:41,240 --> 00:02:46,880
And the ones it is, it will not take more than five seconds or five to six seconds, but.

36
00:02:48,920 --> 00:02:53,960
Before, like after it is done, so you can come to this loading gorgeous and then you can just import

37
00:02:53,960 --> 00:02:56,420
it, so import loader.

38
00:02:58,260 --> 00:03:00,910
Loader from not from.

39
00:03:01,110 --> 00:03:02,970
I keep on writing form instead of foam.

40
00:03:03,570 --> 00:03:07,530
OK, so react loader spinner all.

41
00:03:09,370 --> 00:03:16,060
So now inside this deal, we were to give some classes, of course, so there would be a class name.

42
00:03:16,450 --> 00:03:19,120
And so the class name we will give.

43
00:03:19,210 --> 00:03:26,660
Of course, the Flexbox will be using or display flags and will be justifying the content to senators.

44
00:03:26,660 --> 00:03:28,000
So justify.

45
00:03:28,540 --> 00:03:29,770
And Senator.

46
00:03:30,160 --> 00:03:33,480
And then we'll have the items a line item sent out.

47
00:03:33,490 --> 00:03:39,310
So basically, they have just made the terms a little bit shorter so that you have you need to write

48
00:03:39,310 --> 00:03:41,410
less code just that.

49
00:03:41,530 --> 00:03:42,800
Nothing else, if you know basics.

50
00:03:42,970 --> 00:03:47,660
So this is just a piece of cake for you and cake walk for you.

51
00:03:47,740 --> 00:03:51,550
Oh, I said the phrase wrong cake walk, a piece of cake.

52
00:03:51,910 --> 00:03:53,920
So here will make use of the loader.

53
00:03:54,400 --> 00:03:55,510
So loader.

54
00:03:57,060 --> 00:03:58,010
No order.

55
00:03:58,050 --> 00:04:05,130
And this is a stealth clothing tech bag, so inside the loader, what we'll do is we'll give the type,

56
00:04:05,880 --> 00:04:08,250
the type we are giving the puff.

57
00:04:08,730 --> 00:04:14,370
We are using we are making use of the puff loader and I'll show you how that looks exactly.

58
00:04:14,790 --> 00:04:19,890
So after that, there would be a color and like after the tie up, there would be a color to it.

59
00:04:20,040 --> 00:04:24,990
So color and that color would be hex code, basically.

60
00:04:25,450 --> 00:04:27,390
So I would tell you, what is the tax code?

61
00:04:27,580 --> 00:04:34,470
So this hash tag and zero zero and beta be one two three.

62
00:04:34,560 --> 00:04:37,410
So this is the color, and that would also be a height.

63
00:04:39,750 --> 00:04:43,530
Height and height would be off by 50.

64
00:04:44,760 --> 00:04:46,740
And that it would be over with.

65
00:04:47,840 --> 00:04:51,730
And that is of it all sounds fair enough.

66
00:04:51,770 --> 00:04:52,370
We will save it.

67
00:04:52,820 --> 00:04:54,590
And this is our lord in command.

68
00:04:54,600 --> 00:04:55,580
Yes, that's it.

69
00:04:55,610 --> 00:04:56,720
That is the only thing.

70
00:04:56,720 --> 00:04:59,080
OK, there's a spelling mistake now.

71
00:04:59,090 --> 00:04:59,660
It's better.

72
00:05:00,140 --> 00:05:07,220
OK, now let's let's go ahead and create, ah, further, like our balloting is done, we'll save it.

73
00:05:07,220 --> 00:05:09,580
And now we'll go and create a footprint.

74
00:05:09,590 --> 00:05:14,650
I'm putting aside the component so that it would be a footprint or this superchargers.

75
00:05:15,140 --> 00:05:20,000
And next, we would import the basic boilerplate code.

76
00:05:20,450 --> 00:05:22,550
And let me tell you what it is.

77
00:05:22,550 --> 00:05:32,540
So when those are PDX them, but sort of basic boilerplate code that a functional component within export?

78
00:05:33,620 --> 00:05:36,560
So yeah, you don't need to import anything, just react.

79
00:05:36,980 --> 00:05:41,990
And then inside this, Dave, you need to just provide some class names, basically.

80
00:05:41,990 --> 00:05:50,990
So class name and a last name would be text, and then this should be the sender and there should be

81
00:05:50,990 --> 00:05:59,150
a pairing of then and there should be the margin top off for then and there should be be border.

82
00:06:00,370 --> 00:06:01,150
And the top.

83
00:06:01,600 --> 00:06:02,740
So that is it.

84
00:06:02,790 --> 00:06:08,830
Next, we will have the dark order, which is the great color dark and.

85
00:06:11,160 --> 00:06:19,710
Border, and that is the three and that is four 700 is the intensity basically so will again give the

86
00:06:19,710 --> 00:06:24,990
border and that is the gray and the shirt off to wondered.

87
00:06:25,630 --> 00:06:27,030
Yeah, that's off 200.

88
00:06:27,660 --> 00:06:33,120
And next, we'll have the text, which should be displayed inside of this.

89
00:06:33,600 --> 00:06:36,210
So we'll write the text as well.

90
00:06:37,200 --> 00:06:40,680
And the what should be the text inside this?

91
00:06:40,680 --> 00:06:41,550
We'll right.

92
00:06:41,550 --> 00:06:44,040
First of all, we'll make use of the copyright symbol.

93
00:06:44,040 --> 00:06:50,510
So let me tell you what is the code for legal protection that is the end sign copy and semicolon.

94
00:06:50,520 --> 00:06:55,530
So this would give you a copyright symbol on the browser.

95
00:06:56,220 --> 00:07:05,080
So that is 20 21 and are imaginary company Google Inc. So that is.

96
00:07:06,360 --> 00:07:07,250
So that is it.

97
00:07:07,260 --> 00:07:11,400
I think that will be displaying odd photo component.

98
00:07:11,760 --> 00:07:17,040
But as of now, we are just creating the components and we are not going to, like, render it on skin

99
00:07:17,040 --> 00:07:23,430
because we want the text to like, fetch the data and distribute the data among the components.

100
00:07:23,430 --> 00:07:31,620
So that is why I am waiting for the context to be created and then we will definitely try to render

101
00:07:31,620 --> 00:07:32,730
everything in the browser.

102
00:07:33,000 --> 00:07:35,760
Now we do, there will be some errors, basically.

103
00:07:36,150 --> 00:07:44,970
So and the one more thing I missed out, I think inside the I think Na'vi inside the nav bar, we could

104
00:07:44,970 --> 00:07:52,250
have all make use made use of the links because that they never are not known inside the now bar.

105
00:07:52,260 --> 00:07:53,640
I think inside the.

106
00:07:54,730 --> 00:07:55,930
What is the.

107
00:07:56,620 --> 00:08:00,970
Yeah, actually, that was search only, so here we will import links.

108
00:08:02,860 --> 00:08:07,510
So import and links from.

109
00:08:09,440 --> 00:08:10,130
Links.

110
00:08:10,550 --> 00:08:11,190
OK.

111
00:08:11,330 --> 00:08:21,290
And now we'll make use of these links, so that link back will be open from inside like wherever we

112
00:08:21,320 --> 00:08:24,350
are giving the links or here.

113
00:08:24,530 --> 00:08:27,800
So it's a self-closing bag and we'll give it after this button.

114
00:08:28,280 --> 00:08:34,100
So here we'll call that links and we'll save it.

115
00:08:34,760 --> 00:08:41,120
And now we would definitely get the links on our page.

116
00:08:41,720 --> 00:08:47,960
So next, we'll be creating, ah, I don't know, we will create the context first or the reserve first

117
00:08:48,500 --> 00:08:51,020
so that we will see in the next video.

118
00:08:51,020 --> 00:08:54,390
And as of now, we have created the nav bar.

119
00:08:54,410 --> 00:08:59,480
These search component, the links, the learning component and the footer.

120
00:08:59,960 --> 00:09:03,020
So like almost the basic structuring has been done.

121
00:09:03,380 --> 00:09:12,030
But when the user will search for some keyword so and the request will be sent to the end point.

122
00:09:12,560 --> 00:09:15,230
So after that, the data would be received.

123
00:09:15,230 --> 00:09:18,590
Part time data should be displayed on the screen.

124
00:09:18,920 --> 00:09:22,400
And for that, we will be making use of the component that is called results.

125
00:09:22,760 --> 00:09:27,680
So that result component will be creating in the upcoming video.

126
00:09:28,130 --> 00:09:37,610
So let me just create the results, or we can also create the context context component because from

127
00:09:37,610 --> 00:09:40,370
there, only like most of the things will be done.

128
00:09:40,880 --> 00:09:45,080
And the results, though, would also be done from there.

129
00:09:45,620 --> 00:09:49,640
So we'll be creating the context component like the global context.

130
00:09:49,650 --> 00:09:57,560
So we will we will call it as the state index provider, and that will be the global context and that

131
00:09:57,560 --> 00:10:01,490
will be responsible for distributing data among the components.

132
00:10:01,760 --> 00:10:03,470
So that will do in the next video.