1 00:00:01,160 --> 00:00:07,470 In the last to we got started with the reactor creation and all, so now in this video will create the 2 00:00:07,680 --> 00:00:14,130 packages and then we'll start knowing about what our components are and how these components work and 3 00:00:14,130 --> 00:00:14,460 react. 4 00:00:15,630 --> 00:00:21,450 So first thing you have to do is we have been strong some libraries and packages, so go to your terminal. 5 00:00:22,700 --> 00:00:28,190 You have to go to the narrative video React project is present, and now here the first thing you have 6 00:00:28,190 --> 00:00:31,160 to install is Google Material Design Library. 7 00:00:32,120 --> 00:00:32,480 OK. 8 00:00:33,230 --> 00:00:36,250 So for this, the command is and beam. 9 00:00:38,070 --> 00:00:38,760 Install. 10 00:00:41,070 --> 00:00:41,490 Maybe. 11 00:00:43,810 --> 00:00:46,330 That thesis and the next. 12 00:00:47,380 --> 00:00:48,370 And then click on into. 13 00:00:49,500 --> 00:00:53,760 So this bill and strong to materialize CSIS next package. 14 00:00:59,740 --> 00:01:04,700 Just wait for a moment, and after this, you have been strong reaction out of them. 15 00:01:05,200 --> 00:01:07,540 So you want to know what this means. 16 00:01:08,110 --> 00:01:09,490 Simply, you can go here. 17 00:01:12,430 --> 00:01:13,060 React. 18 00:01:14,130 --> 00:01:15,220 Filter down. 19 00:01:16,090 --> 00:01:18,000 There'll be a whole documentation for that. 20 00:01:19,330 --> 00:01:19,480 You. 21 00:01:23,150 --> 00:01:24,380 So if you can see it. 22 00:01:28,090 --> 00:01:32,950 This will be the command for installing it and the model one like have back. 23 00:01:33,190 --> 00:01:39,400 So yeah, so this reactor on the dome will have the function modules, but browser browser drought links. 24 00:01:39,880 --> 00:01:46,490 So these are used for creating a multi-page reactor like, for example, getting the reactor. 25 00:01:46,900 --> 00:01:50,710 This is the home page, but if you want to create another page, as you can see here, if I click on 26 00:01:50,710 --> 00:01:53,560 skins, I'm getting this page at slash skills. 27 00:01:54,070 --> 00:01:58,600 So how to get that so that that will be achieved using this reactor? 28 00:01:59,140 --> 00:02:02,230 This is basically, first of all, just helping multiple pages. 29 00:02:03,610 --> 00:02:06,490 Similarly, it can also search for materials. 30 00:02:08,500 --> 00:02:09,490 See this next. 31 00:02:16,230 --> 00:02:18,060 Materializes as if you can see it. 32 00:02:24,750 --> 00:02:27,880 You can see you can go to the documentation. 33 00:02:28,230 --> 00:02:33,330 This is basically framework based on material design that means for the styling and the responsiveness 34 00:02:33,330 --> 00:02:33,960 of the page. 35 00:02:34,560 --> 00:02:38,520 For this kind of stuff, we'll be using these packages to have been stronger. 36 00:02:39,330 --> 00:02:43,740 So one, citizens from the next step is to react to the dome and beam. 37 00:02:45,490 --> 00:02:47,620 Instant react. 38 00:02:48,720 --> 00:02:50,270 I don't. 39 00:02:51,890 --> 00:02:55,730 So after this, you have to install a font on some major credit. 40 00:02:56,120 --> 00:03:02,000 So for this, you can visit the website font awesome dot com, visit that website. 41 00:03:03,580 --> 00:03:04,150 On. 42 00:03:05,210 --> 00:03:06,520 Are some broken? 43 00:03:14,130 --> 00:03:15,330 And I thought for free. 44 00:03:18,970 --> 00:03:23,380 You have to create an account and everything, so once you create the counter, they'll give you. 45 00:03:25,210 --> 00:03:28,040 You know, there will be a clean, OK. 46 00:03:29,230 --> 00:03:36,040 You you can download the equity and then you can select the Google Clean Copy, the latest equity version. 47 00:03:36,250 --> 00:03:36,610 OK. 48 00:03:37,090 --> 00:03:38,800 So basically, it should be like this. 49 00:03:39,190 --> 00:03:44,470 So we basically score directly in the index HTML in the style section. 50 00:03:45,450 --> 00:03:46,560 If you can see here. 51 00:03:47,940 --> 00:03:48,720 Will be script. 52 00:03:51,530 --> 00:03:52,550 Sauce will be. 53 00:03:53,890 --> 00:03:54,910 Its GDP is. 54 00:03:56,510 --> 00:03:59,600 To longing for that, to get this attack, not. 55 00:04:01,530 --> 00:04:02,010 Google. 56 00:04:03,310 --> 00:04:04,030 Airbus. 57 00:04:07,290 --> 00:04:07,560 Com. 58 00:04:08,690 --> 00:04:13,730 Slash addax slash lip, just slash equity. 59 00:04:16,200 --> 00:04:18,210 Slash three, four and five point. 60 00:04:19,290 --> 00:04:21,640 One flashy but. 61 00:04:23,240 --> 00:04:25,730 Graduate query document. 62 00:04:27,620 --> 00:04:28,340 Gorgeous. 63 00:04:33,510 --> 00:04:38,610 So this will be what is the CD that you'll be getting if you create the account and then search for 64 00:04:38,610 --> 00:04:38,850 that? 65 00:04:39,340 --> 00:04:41,220 And you can do this, this is the website for that. 66 00:04:43,170 --> 00:04:45,000 So now the next step is. 67 00:04:47,160 --> 00:04:50,610 We have to link the Google Material Library designed in that Abdul. 68 00:04:51,300 --> 00:04:51,550 Right? 69 00:04:52,350 --> 00:04:52,980 So now. 70 00:04:54,380 --> 00:04:55,490 To apologize. 71 00:04:57,960 --> 00:05:03,600 And then here you have to import all the materials, materials, CIA cases and everything that you install 72 00:05:03,840 --> 00:05:05,340 that you installed in the back of your sleep. 73 00:05:05,730 --> 00:05:08,430 So how to know whether they're installing the packages or not? 74 00:05:09,000 --> 00:05:13,940 The package that John, you can see your react, Dom React. 75 00:05:14,910 --> 00:05:17,850 And then materials, cases and everything can see. 76 00:05:17,850 --> 00:05:23,040 These are instruments where if you had having them in the dependencies of package design, that means 77 00:05:23,040 --> 00:05:24,000 this, of course, would instruct. 78 00:05:24,990 --> 00:05:26,880 So now after it started, I think for them. 79 00:05:27,180 --> 00:05:29,640 So basically an import them, you import. 80 00:05:32,190 --> 00:05:35,460 Material access slash this. 81 00:05:36,520 --> 00:05:41,590 And scissors slash, he, Elyse. 82 00:05:43,180 --> 00:05:43,570 Not. 83 00:05:44,590 --> 00:05:46,930 Men see as. 84 00:05:48,390 --> 00:05:50,010 Once that is done, similarly, you can. 85 00:05:52,310 --> 00:05:52,850 Import. 86 00:05:54,730 --> 00:05:58,030 The same thing, the same stuff we have to repeat. 87 00:05:58,570 --> 00:06:01,660 But you didn't hear, of course, this will be installing the jets. 88 00:06:03,450 --> 00:06:03,980 Yes. 89 00:06:07,850 --> 00:06:08,930 So now they're in strong. 90 00:06:10,700 --> 00:06:17,900 So now, before moving on to the next hour, we'll see how this Abdul disinfects charges and in general 91 00:06:17,900 --> 00:06:18,320 are linked. 92 00:06:19,340 --> 00:06:21,290 So if we can see it in next hour to be minute. 93 00:06:22,540 --> 00:06:25,120 We're having this division ideas rule. 94 00:06:25,810 --> 00:06:30,050 And if you were to elect Doug Jones, he had your important duties react and reacted. 95 00:06:30,880 --> 00:06:35,650 So what they're doing is that they're creating this group, they're creating the act up and they want 96 00:06:35,650 --> 00:06:38,860 to render this reactive somewhere that they won't render the complex. 97 00:06:39,430 --> 00:06:44,350 So you react to normal doctrine, that means it will render the component to same address. 98 00:06:44,740 --> 00:06:49,910 So this is the address document that get element by 80 in the bracket group. 99 00:06:49,940 --> 00:06:54,700 So is the diary of the division that we have searching for that address point. 100 00:06:55,660 --> 00:07:00,390 So it is that president, if you can see the next deputy chairman, it is present here, right? 101 00:07:00,880 --> 00:07:04,770 They to address this reacted on function. 102 00:07:04,840 --> 00:07:05,890 We have two parameters. 103 00:07:06,160 --> 00:07:09,040 One will be the component that is the app component. 104 00:07:09,370 --> 00:07:10,600 So what do you mean by component? 105 00:07:10,970 --> 00:07:15,430 So if you can see here, everything here is a part of competence, and now that is a component. 106 00:07:15,460 --> 00:07:18,200 This particular part is a button. 107 00:07:18,550 --> 00:07:19,960 This about me is a component. 108 00:07:19,990 --> 00:07:23,200 Professional skills is a component for what the components mean. 109 00:07:23,320 --> 00:07:25,020 This means that parts of the set. 110 00:07:25,390 --> 00:07:33,520 So before we act like before few years, what the did is the distributed base using HDMI and JavaScript. 111 00:07:34,030 --> 00:07:38,410 So what happens if there is some change in the code like, for example, changing some education part 112 00:07:38,410 --> 00:07:41,240 of the website, then the website Naperville? 113 00:07:41,560 --> 00:07:41,890 OK. 114 00:07:42,250 --> 00:07:48,480 So instead of reloading whenever there is a change, you know, in a part only that complement gets 115 00:07:48,540 --> 00:07:50,020 in or not the full page. 116 00:07:50,140 --> 00:07:51,570 So that is the use of components. 117 00:07:52,030 --> 00:07:58,090 So the more dynamic data and more data are big, big websites, it is impossible to have freedom reload 118 00:07:58,150 --> 00:08:04,540 when the information gets updated, like if you can see in the social media website every time the newsfeed 119 00:08:04,540 --> 00:08:07,210 will get updated, every time it should get refreshed. 120 00:08:07,420 --> 00:08:12,700 So instead of that, for example, if you see a post, the comments will get updated. 121 00:08:12,700 --> 00:08:16,180 So you will only refresh the company only the comments to see what they have. 122 00:08:16,480 --> 00:08:18,220 What are the new comments that are coming? 123 00:08:18,640 --> 00:08:20,830 You will not refresh the whole whole page. 124 00:08:21,220 --> 00:08:22,310 So that is similar to this. 125 00:08:22,570 --> 00:08:24,490 They work with components in there also. 126 00:08:25,090 --> 00:08:26,440 That is what we are doing the same. 127 00:08:27,010 --> 00:08:31,630 So these are the components where only the component changes to what we are doing here. 128 00:08:31,870 --> 00:08:35,980 We are rendering the act component inside this division, inside the courtroom. 129 00:08:36,670 --> 00:08:45,400 So basically our whole code, what happens if he decides inside this Aparajith Abajo stage one so that 130 00:08:45,400 --> 00:08:50,930 we are entering into the next address where it is rendering vintage generally in Yemen? 131 00:08:51,580 --> 00:08:52,960 That is why we are able to see it. 132 00:08:52,960 --> 00:08:55,570 Welcome to the as you represent over Orient. 133 00:08:57,710 --> 00:08:58,040 OK. 134 00:08:59,200 --> 00:09:07,480 So this is what basically happening with this components and the, you know, the state management or 135 00:09:07,490 --> 00:09:09,520 not, that project Typekit and everything. 136 00:09:10,600 --> 00:09:16,000 So in our bodies inside this room, we can have the all the career itself. 137 00:09:16,360 --> 00:09:20,780 Similarly, we can create other components in for them and Set said after audit and then use it in the 138 00:09:20,780 --> 00:09:21,610 lab dodges. 139 00:09:22,330 --> 00:09:29,080 So that thing creating the React files and all the components and importing them in the after jet will 140 00:09:29,080 --> 00:09:30,130 see that in the next few. 141 00:09:30,310 --> 00:09:30,610 Thank.