1 00:00:01,260 --> 00:00:03,120 Welcome back to the new video of this project. 2 00:00:03,630 --> 00:00:09,160 In this video, until now, we have seen the how we get started with the reactor. 3 00:00:09,780 --> 00:00:16,530 In this video, we'll see how to get started with the components will bend each component one by one. 4 00:00:16,770 --> 00:00:20,580 First, the helicopter component and then the technical component. 5 00:00:20,580 --> 00:00:23,400 The node component, the footer, everything. 6 00:00:24,780 --> 00:00:27,420 The first thing we have to build the header component. 7 00:00:30,030 --> 00:00:33,450 So now what we'll do is create a folder called components. 8 00:00:36,570 --> 00:00:43,290 Components and then inside this folder are now start building the components, the first component that 9 00:00:43,290 --> 00:00:49,080 will be listed at a company so that Dargis X, you can use any syntax. 10 00:00:49,090 --> 00:00:50,000 Dance is fine. 11 00:00:50,020 --> 00:00:51,630 Yes, it's sexy, it's fine. 12 00:00:51,930 --> 00:00:57,000 But sometimes the jazz sex gives us the feature to skip this import react statement. 13 00:00:57,270 --> 00:01:00,840 If you are, if you have you started use that box, then you have been for them. 14 00:01:01,110 --> 00:01:04,350 But if you have like the basic import react, some react. 15 00:01:04,350 --> 00:01:05,100 You can skip that. 16 00:01:07,570 --> 00:01:13,510 So now, actually in this region, this is what we are going to build the new component, if you use 17 00:01:13,510 --> 00:01:20,110 that tool, which decided to use the, you know, the extension that I would use for their labor purposes. 18 00:01:20,740 --> 00:01:23,650 So this had an error component. 19 00:01:23,650 --> 00:01:26,020 We are going to win this in this way. 20 00:01:27,550 --> 00:01:33,220 So now what we have to do inside the set up, so as you can see, there is a no go area. 21 00:01:33,670 --> 00:01:35,180 That goal came from material. 22 00:01:35,950 --> 00:01:38,770 If you go to material, you are dot com and search for a logo. 23 00:01:39,430 --> 00:01:40,750 So fun for that. 24 00:01:41,020 --> 00:01:47,220 First, we need to import the, you know, installed this material component type. 25 00:01:53,010 --> 00:01:55,230 So a minstrel at that age. 26 00:01:56,500 --> 00:02:00,070 Material like flash forward. 27 00:02:01,920 --> 00:02:03,900 And direct material. 28 00:02:04,870 --> 00:02:07,540 You are flash icons. 29 00:02:09,090 --> 00:02:13,320 So this will install the material you write code and icons, maybe using this icon. 30 00:02:14,930 --> 00:02:16,280 The flashlight icon. 31 00:02:17,600 --> 00:02:19,960 So let us search for this icon. 32 00:02:20,560 --> 00:02:23,750 This is basically in the shape of some highlight icon, right? 33 00:02:23,990 --> 00:02:24,770 Some torch. 34 00:02:25,170 --> 00:02:27,710 So rather than having the torch on. 35 00:02:29,930 --> 00:02:31,460 Dodge, if you go. 36 00:02:32,990 --> 00:02:34,010 Otherwise you can. 37 00:02:34,940 --> 00:02:36,370 Orbital components. 38 00:02:38,120 --> 00:02:38,510 OK. 39 00:02:40,040 --> 00:02:43,250 Just search for the icons or what do you? 40 00:02:48,460 --> 00:02:50,470 In broad daylight, you can search for icons. 41 00:03:00,420 --> 00:03:01,710 And do a Google search. 42 00:03:11,620 --> 00:03:17,950 So, yeah, so this is all we can use the icons like if, for example, if we take a home icon, there 43 00:03:17,980 --> 00:03:19,510 is a component name home icon. 44 00:03:19,900 --> 00:03:22,900 If you want to change the color, you can give the attribute color. 45 00:03:22,900 --> 00:03:24,100 These are basically props. 46 00:03:24,610 --> 00:03:27,970 These are their custom components that some user created that we are using. 47 00:03:28,300 --> 00:03:31,930 So all these components are documented and said this material is a component that we can use. 48 00:03:32,230 --> 00:03:33,670 So now we can search like a. 49 00:03:34,850 --> 00:03:36,020 Torch icon. 50 00:03:42,890 --> 00:03:43,640 Our highlight. 51 00:03:45,400 --> 00:03:46,270 I like I from. 52 00:03:54,770 --> 00:03:56,820 You can switch like torch. 53 00:03:57,920 --> 00:03:59,000 Indicating I think so. 54 00:03:59,200 --> 00:04:00,200 Search for highlights. 55 00:04:01,070 --> 00:04:01,230 Yeah. 56 00:04:01,700 --> 00:04:04,550 So this is the icon that will be using this icon. 57 00:04:04,550 --> 00:04:09,020 You can see it is a white in color, so the color we can do, it exists. 58 00:04:09,380 --> 00:04:11,090 So basically, we have to import this statement. 59 00:04:12,320 --> 00:04:17,380 Let's first check weather, yeah, so as you can see, the packages really writing material, white 60 00:04:17,430 --> 00:04:19,250 code icons have been installed. 61 00:04:19,490 --> 00:04:22,220 If you want to check, you can go to package our Jason. 62 00:04:22,520 --> 00:04:27,830 And you can see the dependencies that your code and icons have been installed successfully. 63 00:04:28,490 --> 00:04:34,610 So they're not just an import, the statement in particular icon from the your white flash icon slash 64 00:04:34,610 --> 00:04:35,000 pilot. 65 00:04:35,810 --> 00:04:38,000 And for that, now we'll basically import React. 66 00:04:38,240 --> 00:04:40,820 No need to do that, but I love good programming practice. 67 00:04:41,270 --> 00:04:48,560 If you want some practice on some practice, then you can simply go and find this one line of code. 68 00:04:49,520 --> 00:04:54,020 In Mexico, a court for everything you can, and also the exit extension, I said before, it can be 69 00:04:54,260 --> 00:04:55,820 either jazz or jazz. 70 00:04:57,020 --> 00:04:58,070 So once this is done. 71 00:05:03,850 --> 00:05:05,380 So now we can create the function. 72 00:05:07,240 --> 00:05:08,990 Function at a. 73 00:05:12,230 --> 00:05:13,880 You can return. 74 00:05:17,010 --> 00:05:17,380 No. 75 00:05:17,850 --> 00:05:22,830 And so basically, this is all hatched in Malcolm Miller default conference that we're giving her, 76 00:05:22,830 --> 00:05:28,050 that intel will have a Toronto and insider join me, this satellite icon. 77 00:05:30,100 --> 00:05:30,850 I like. 78 00:05:33,400 --> 00:05:36,850 So, yeah, we don't need this. 79 00:05:38,530 --> 00:05:45,970 This is a self intact, and after the contest, we can have the name of the total list, as you can 80 00:05:45,970 --> 00:05:50,020 see over here and having a to do list name, so I can have it here. 81 00:05:52,610 --> 00:05:56,360 So once this is done, you can simply export the harder component. 82 00:06:04,380 --> 00:06:08,760 Once you explore this now, you have to import this component in your app drawer, just right. 83 00:06:09,060 --> 00:06:14,070 So go grab dodges and simply import the genetic component and bought. 84 00:06:17,880 --> 00:06:18,330 From. 85 00:06:19,660 --> 00:06:23,200 Dot slash conference slash. 86 00:06:24,210 --> 00:06:24,380 And. 87 00:06:29,210 --> 00:06:34,810 So long as this is done yet, instead of the very comfortable that we want to display here, that so 88 00:06:34,900 --> 00:06:35,830 will display her. 89 00:06:39,030 --> 00:06:40,200 Boeing wanted company. 90 00:06:41,810 --> 00:06:44,360 Now, if you open your Web site. 91 00:06:44,900 --> 00:06:50,120 Yeah, so here you can see we have got the icon and also the entry to the list. 92 00:06:50,600 --> 00:06:56,150 But what we are missing the background, the styling, some adding the marginal list. 93 00:06:56,420 --> 00:06:59,750 So all of these things we can do in cases, we do that now. 94 00:07:00,110 --> 00:07:04,100 So basically, for Australians to understand what happened until now, they have created a component 95 00:07:04,180 --> 00:07:10,010 called J6 product, the code for the header, not just like we used icon, they had to not to do list. 96 00:07:10,310 --> 00:07:12,560 And then we exported this as the default export. 97 00:07:12,980 --> 00:07:16,250 Now this export been wouldn't have done this and use it. 98 00:07:16,460 --> 00:07:21,890 So that largest importer had it and then use it inside the division of that, that we are ready. 99 00:07:23,030 --> 00:07:32,960 So now we have to do the driving part to the public and here in public, create a new file called Style 100 00:07:32,960 --> 00:07:33,980 Start CSIS. 101 00:07:35,150 --> 00:07:36,320 Once this is created. 102 00:07:37,910 --> 00:07:40,410 Now we're going to operate like all the styles that. 103 00:07:41,480 --> 00:07:46,670 So initially, the whole package will have to be for batting and margin to really make that zero. 104 00:07:49,580 --> 00:07:54,170 So that's the best fighting big, you actually work in the way that we want. 105 00:07:55,260 --> 00:07:57,120 Rock sizing should be a. 106 00:07:59,260 --> 00:08:03,640 So basically, we have ordered in a default given by the Chrome browser. 107 00:08:04,820 --> 00:08:07,730 And then basically, it's general funds will get. 108 00:08:09,840 --> 00:08:13,410 Font family will be on track. 109 00:08:17,500 --> 00:08:19,180 Sans serif. 110 00:08:21,070 --> 00:08:23,680 So once this is done now, we'll do. 111 00:08:25,080 --> 00:08:25,500 Body. 112 00:08:27,990 --> 00:08:36,100 Know how to get down a tag, as you can see inside the head or not, just as there is an adult that 113 00:08:36,280 --> 00:08:43,380 we, well, we are basically targeting that had that original tag of the etched, in fact, should have 114 00:08:43,380 --> 00:08:44,850 a background color of. 115 00:08:46,060 --> 00:08:46,650 Ash. 116 00:08:49,660 --> 00:08:50,680 I find we're. 117 00:08:52,410 --> 00:08:52,800 We. 118 00:08:54,190 --> 00:08:54,460 One. 119 00:08:55,920 --> 00:08:58,800 So now we'll see whether this is reflected on. 120 00:09:00,000 --> 00:09:03,610 As you are refreshing, you can see this is not reflected, right? 121 00:09:03,630 --> 00:09:06,750 We'll see that before that will complete the styling, but. 122 00:09:09,750 --> 00:09:11,820 Margin will be auto. 123 00:09:13,880 --> 00:09:15,500 Minus 16 cents. 124 00:09:16,070 --> 00:09:20,720 So this are top and bottom should be auto left and right should be minus 16 cents. 125 00:09:22,820 --> 00:09:25,400 And then batting will be 16 pixel and 32 pixels. 126 00:09:27,090 --> 00:09:30,660 Seeking pixels are top and bottom, digital pixels right and left. 127 00:09:33,060 --> 00:09:38,970 And then box shadow will be zero zero and extensive zero. 128 00:09:40,110 --> 00:09:41,050 Our GBA. 129 00:09:42,410 --> 00:09:43,790 I've seen them. 130 00:09:46,620 --> 00:09:48,150 Needles, you know, and 0.3. 131 00:09:49,880 --> 00:09:53,570 Zero point zero and zero point. 132 00:09:58,210 --> 00:10:00,940 Off the bat, we have got to find each one. 133 00:10:05,310 --> 00:10:06,140 Inside the hotel. 134 00:10:09,380 --> 00:10:10,310 They had to run banks. 135 00:10:10,550 --> 00:10:17,590 We have to target this hedge one that that is present inside there, so I should have a color of f f 136 00:10:17,630 --> 00:10:17,930 f. 137 00:10:21,040 --> 00:10:22,330 Font family should be. 138 00:10:25,380 --> 00:10:27,140 McLaren, because the. 139 00:10:28,390 --> 00:10:30,190 This is your always this is your style. 140 00:10:30,850 --> 00:10:36,800 Stylistic choice here I am preferring McLennan because I feel that is like, you know, more attractive 141 00:10:36,800 --> 00:10:40,210 place just simply a style stylistic choice. 142 00:10:40,420 --> 00:10:43,840 You can go to the Google Fonts and select what font to want and then use it. 143 00:10:46,000 --> 00:10:49,290 And we want it should be some boy of the. 144 00:10:54,430 --> 00:10:56,860 So now we have a the styling, but. 145 00:10:57,900 --> 00:11:04,920 Styling part of the webpage, but if you open up a and refresh, you can see there are no styling like 146 00:11:04,920 --> 00:11:06,510 you know that there are no changes that are visible. 147 00:11:07,020 --> 00:11:10,240 The reason is because if you go to the next hour. 148 00:11:11,310 --> 00:11:13,710 So if you go to Nexo, Dr. Denman. 149 00:11:14,830 --> 00:11:19,660 Then you can see you are not importing the same ship, so we have created the code, it's OK. 150 00:11:19,840 --> 00:11:24,460 But where we are calling this code to work, that is what we have to do in the head. 151 00:11:24,820 --> 00:11:26,950 After the title, you link the stylesheet. 152 00:11:28,450 --> 00:11:33,370 The relationship between stylesheet and it should be standard, she insists. 153 00:11:34,740 --> 00:11:40,890 So once you do this line up for sale and open now, you can see the changes have been reflected about 154 00:11:40,890 --> 00:11:47,010 a good deal of water, the padding is somewhat different because it might be some like you can check 155 00:11:47,010 --> 00:11:50,890 the padding, like giving some more padding for that and everything will see that. 156 00:11:50,940 --> 00:11:54,300 And also, there is some different background, like there's some texture in the background. 157 00:11:54,570 --> 00:11:57,090 You don't see that in the upcoming because all of the styling and everything. 158 00:11:57,480 --> 00:12:00,870 So now in this regard, we have completed the added part. 159 00:12:01,140 --> 00:12:06,420 What we learned in this region is using the material you write, importing, exporting and also using 160 00:12:06,420 --> 00:12:10,110 the, you know, how to like the basic style cases. 161 00:12:10,320 --> 00:12:15,300 This is basically simplified, it seems, as a margin padding watercolor, find the shadow and everything 162 00:12:15,600 --> 00:12:16,250 can go through. 163 00:12:17,010 --> 00:12:24,420 The next redo will be actually starting the end of that date, not part and not create area. 164 00:12:24,590 --> 00:12:28,920 And this is basically to create area that button, the delete button of the Note B and see everything 165 00:12:28,920 --> 00:12:29,760 in the upcoming.