1 00:00:01,260 --> 00:00:06,600 In this video, we'll see how to use the grit component of a material. 2 00:00:06,910 --> 00:00:07,250 Yeah. 3 00:00:08,070 --> 00:00:10,550 So first, we have to import that grade from material you. 4 00:00:18,160 --> 00:00:18,550 From. 5 00:00:19,510 --> 00:00:20,320 Materially way. 6 00:00:23,870 --> 00:00:25,640 So as you can see, there is a difference here. 7 00:00:25,920 --> 00:00:31,100 Very important, the YouTube without Carly basis, whereas great, we are importing with cuddly presses. 8 00:00:31,430 --> 00:00:36,410 This is because when you go to YouTube, yes, we are definitely exploiting it as default. 9 00:00:36,860 --> 00:00:40,670 So whenever you are, you are like importing something that is exported as default. 10 00:00:41,090 --> 00:00:45,890 No need of curly braces like you can simply export it, but instead, this may be really good. 11 00:00:45,950 --> 00:00:48,530 There are a lot of components, as you can see over here. 12 00:00:49,460 --> 00:00:54,080 When you go to material, you write components here and do that in many components. 13 00:00:54,080 --> 00:00:55,820 Box content upgrade great to any middle. 14 00:00:56,300 --> 00:00:57,440 So there are many components. 15 00:00:57,950 --> 00:01:02,690 So like there is no the grid is not default exploitation. 16 00:01:02,720 --> 00:01:04,670 It is not exported, but not as default. 17 00:01:04,940 --> 00:01:09,050 So that is why we have specified inside the calibrations as grid. 18 00:01:09,530 --> 00:01:11,180 So once this is done now. 19 00:01:12,570 --> 00:01:15,370 Now it'll be like returning the green that we want. 20 00:01:15,870 --> 00:01:20,730 So basically coming to the styling, all that mattered anyway, but you need to know about the deep 21 00:01:20,730 --> 00:01:26,640 material you like, how these all work and everything will basically use the, you know, the attributes 22 00:01:26,640 --> 00:01:28,800 like given the excesses of culture. 23 00:01:28,870 --> 00:01:33,150 Well, the break point is I'm six and everything will be directly using it inside the grid. 24 00:01:33,600 --> 00:01:34,740 We'll see the code for that. 25 00:01:35,640 --> 00:01:37,470 First will create the great. 26 00:01:57,010 --> 00:02:01,420 So inside this group will be having the style. 27 00:02:02,450 --> 00:02:04,740 The standard customs like mainland style. 28 00:02:05,060 --> 00:02:09,590 Actually, I want prefer you there in line styling because if you are having a lot of styles, then 29 00:02:09,860 --> 00:02:11,810 the inline style will be tough to label. 30 00:02:12,140 --> 00:02:15,690 So what we have to do is we have to basically create obnoxiousness, right? 31 00:02:15,690 --> 00:02:18,080 Write the styles over here and then import the style. 32 00:02:18,590 --> 00:02:24,920 But as of now, inside in this project will be handling only small styling, but so no need to create 33 00:02:24,920 --> 00:02:29,890 explicitly the file and everything will be everything that all the styling will be doing in that boxy 34 00:02:29,900 --> 00:02:31,190 or jet itself. 35 00:02:31,820 --> 00:02:33,590 So he had the style will be. 36 00:02:35,320 --> 00:02:36,670 Justify Content Center. 37 00:02:37,860 --> 00:02:45,360 Justify, you can also see whether we have installed the material in the package that you can see the 38 00:02:45,360 --> 00:02:48,780 material you quoted and strong, and we did not have any problem. 39 00:02:50,470 --> 00:02:52,810 Very content, police enter. 40 00:02:55,560 --> 00:02:58,740 After that, the container spacing will be 10. 41 00:03:02,620 --> 00:03:04,630 The container and then the spacing will be 10. 42 00:03:06,670 --> 00:03:12,070 So why we are giving this reality is basically dependent on the material, your documentation, how 43 00:03:12,070 --> 00:03:13,540 it will access the values. 44 00:03:15,720 --> 00:03:21,180 So you can refer to the documentation, but also search for other documentations of how they will work 45 00:03:21,180 --> 00:03:21,660 and everything. 46 00:03:21,870 --> 00:03:25,860 Basically, we're using the, you know, the competence built by some other developers. 47 00:03:26,250 --> 00:03:29,790 These are all the components, the material you either exiles and everything. 48 00:03:29,790 --> 00:03:32,550 We have the component of functionalities that are built by other developers. 49 00:03:33,030 --> 00:03:37,790 Are using them to build a custom, you know, a website that we want to look like. 50 00:03:37,800 --> 00:03:41,160 So that way, we're not going to detail what this spacing an artist. 51 00:03:41,460 --> 00:03:46,500 This basically gives you the output that you do that will we more interesting into the boilerplate code? 52 00:03:46,500 --> 00:03:53,040 How the video item should look like outlanded the React React, props, the react, you know, react 53 00:03:53,040 --> 00:03:58,670 status to the state management and then the flow of the body and everything into that. 54 00:03:59,580 --> 00:04:02,100 And then there will be other great. 55 00:04:07,340 --> 00:04:09,410 So here in this great we love item. 56 00:04:12,430 --> 00:04:12,910 I don't. 57 00:04:15,050 --> 00:04:16,010 Is equal to 11. 58 00:04:17,400 --> 00:04:22,170 I it this was basically the documentation that we have for how they react app should look like they're 59 00:04:22,200 --> 00:04:22,620 using it. 60 00:04:24,730 --> 00:04:27,670 And inside this great will have three grids. 61 00:04:29,270 --> 00:04:32,390 So first thing, like we have the container spacing as opposed to. 62 00:04:38,130 --> 00:04:38,470 You know. 63 00:04:39,770 --> 00:04:39,920 It. 64 00:04:41,290 --> 00:04:42,580 And spacing basically ghostwritten. 65 00:04:49,650 --> 00:04:54,630 Now, instead, this will have three different grades for one is for research, but one is one major 66 00:04:54,630 --> 00:04:56,090 detail and one is what Middle East? 67 00:04:59,020 --> 00:04:59,310 Great. 68 00:05:00,100 --> 00:05:02,320 So here we have the Middle East component. 69 00:05:03,550 --> 00:05:10,210 VIDEO It's like we'll first have the search bar, right, but it will be the search bar. 70 00:05:11,280 --> 00:05:13,350 But a common thing you can use controlled slash. 71 00:05:15,530 --> 00:05:18,660 So tomorrow and then the next great. 72 00:05:20,880 --> 00:05:25,110 Next meal will contain a component, and I'll be your detail. 73 00:05:26,880 --> 00:05:27,960 The detail of the video. 74 00:05:29,430 --> 00:05:30,330 And then another great. 75 00:05:34,570 --> 00:05:35,950 It will contain the media list. 76 00:05:39,230 --> 00:05:44,180 Read your list, so I'll comment this, but as of now. 77 00:05:44,480 --> 00:05:46,610 Once we built the company, then we can use it. 78 00:05:48,000 --> 00:05:54,660 So often we do a list of that before everything is good now we have some inside attributes and that 79 00:05:54,660 --> 00:05:55,080 this great. 80 00:05:57,360 --> 00:05:58,920 The item will be. 81 00:06:00,760 --> 00:06:01,420 Excess. 82 00:06:03,410 --> 00:06:05,180 Excess Rebate Credit. 83 00:06:05,600 --> 00:06:11,040 That means it will take the whole sites the surge, but should be the whole size of the listing, right? 84 00:06:11,060 --> 00:06:13,850 So that's why we're using excessive excesses. 85 00:06:14,360 --> 00:06:20,990 Well, this was the debate and then the video detail will have eight the same thing. 86 00:06:22,280 --> 00:06:23,510 Can copy what are you? 87 00:06:24,290 --> 00:06:25,610 And then access will be eight. 88 00:06:27,410 --> 00:06:29,390 And then the same thing over there, but it will be fought. 89 00:06:30,260 --> 00:06:34,730 That means we want the ape should be like it should take this science. 90 00:06:34,910 --> 00:06:40,130 The form will take the list, the list of leaders that we get from the YouTube and YouTube, as you 91 00:06:40,130 --> 00:06:44,600 see there, that I tell you, will be having the videos related to the main video and the main media 92 00:06:44,600 --> 00:06:45,440 and then the search box. 93 00:06:45,440 --> 00:06:47,440 So that is what we want to believe. 94 00:06:53,040 --> 00:06:58,440 So this is the grid system now will be billing the components for this search by immediately telling 95 00:06:58,440 --> 00:06:59,040 media list. 96 00:07:00,410 --> 00:07:04,310 But that go to source, create a left for components. 97 00:07:06,910 --> 00:07:11,300 And in the components will be creating the components for the search bar. 98 00:07:11,360 --> 00:07:15,250 We know it'll be two item Middle Eastern America first. 99 00:07:16,400 --> 00:07:18,740 Search bar Dot GSX. 100 00:07:19,970 --> 00:07:26,130 The difference between GSX and Jessi's, if you like what I value, if you give the extension is geez, 101 00:07:26,180 --> 00:07:28,400 you have to import everything related to react. 102 00:07:28,700 --> 00:07:33,830 But if you give J.S. only to import the statement like import react from react in order to write this 103 00:07:33,830 --> 00:07:34,180 statement. 104 00:07:34,200 --> 00:07:37,110 So I prefer using edge by not J6. 105 00:07:37,370 --> 00:07:38,300 But there is no problem. 106 00:07:38,300 --> 00:07:43,100 If you used it, there's just a one or two lines will be extra like import react from React is a basic. 107 00:07:43,120 --> 00:07:47,930 Accepting that you have another component will be with your detail. 108 00:07:49,930 --> 00:07:57,540 VIDEO detailed art and jazz sex, and then a third component will be released. 109 00:07:58,660 --> 00:07:59,060 Sex. 110 00:08:01,470 --> 00:08:01,740 Yeah. 111 00:08:02,400 --> 00:08:06,450 So now he will write the code for the search about how the search bar should look. 112 00:08:06,460 --> 00:08:11,820 All detainees should look out the video list and inside the building to use the video from the YouTube 113 00:08:11,820 --> 00:08:12,350 episode. 114 00:08:12,750 --> 00:08:16,080 And then we really will have a subcomponents of video item and everything. 115 00:08:16,290 --> 00:08:20,580 And also how to export all these videos together with a single file using the index to. 116 00:08:21,900 --> 00:08:23,850 So these are let's see from the next freedom.