1 00:00:00,880 --> 00:00:02,350 So now we'll start trading at a. 2 00:00:04,500 --> 00:00:10,530 Create an app, let's just move into Abdul-Jabbar, or you can just head control PSP and move into a 3 00:00:10,540 --> 00:00:12,750 file by typing the word dodges. 4 00:00:13,650 --> 00:00:21,360 So if you just close this and it controls, press will have a search bar and we just type the ideas 5 00:00:21,390 --> 00:00:21,870 here that I'm. 6 00:00:23,130 --> 00:00:28,470 So there's a little hack for, you know, the first thing that will do is remove all the codes that 7 00:00:28,530 --> 00:00:30,820 in there because they'll be starting everything from fish. 8 00:00:30,930 --> 00:00:35,370 And in this project, we are using glass components, not functional components. 9 00:00:35,370 --> 00:00:36,570 Therefore, we do not need them. 10 00:00:37,110 --> 00:00:40,990 So just control glass and remove all the code that in your app dodgeball. 11 00:00:42,550 --> 00:00:43,390 Now hit safe. 12 00:00:43,560 --> 00:00:46,360 Now, the first thing that will do is import react module. 13 00:00:47,290 --> 00:00:48,850 So let's just import react. 14 00:00:51,130 --> 00:00:52,670 From React when you. 15 00:00:53,800 --> 00:00:59,260 OK, so once you have embodied react now, we'll be importing all all those components, like the components 16 00:00:59,260 --> 00:01:03,910 like our header and search bar as well as our filter from our images. 17 00:01:05,020 --> 00:01:07,000 So for that purpose, we'll be importing them. 18 00:01:07,240 --> 00:01:12,160 So this is a third option from images now. 19 00:01:12,160 --> 00:01:17,130 Just close the dashboard and let's just import these components because these are the components that 20 00:01:17,140 --> 00:01:19,570 will be using in our app digest. 21 00:01:21,990 --> 00:01:23,400 So we'll go back when victory. 22 00:01:25,670 --> 00:01:30,500 And from there, we want to move into a dashboard from a dashboard where it went ahead. 23 00:01:31,220 --> 00:01:40,430 And we want that header, the G6, no, the other component that we need is a search input because right 24 00:01:40,430 --> 00:01:41,970 after that we had that inputs. 25 00:01:41,970 --> 00:01:44,750 So let's just input a search input. 26 00:01:49,470 --> 00:01:51,600 And let's name it. 27 00:01:52,200 --> 00:01:58,020 It'll be cutting it from dashboard and then again from search bar and search bar GSX. 28 00:01:58,260 --> 00:02:03,090 Now one thing I like to tell you that it doesn't matter what you name it over here, I can name a search 29 00:02:03,090 --> 00:02:03,390 bar. 30 00:02:06,730 --> 00:02:10,330 And then use it, or I could name it, just search. 31 00:02:11,880 --> 00:02:17,070 Because as long as you are defining its functionalities that are over here, so they will be just getting 32 00:02:17,070 --> 00:02:22,710 an alias of this name, so I can just name it anything, so for sanity, perversely, let's just name 33 00:02:22,710 --> 00:02:23,340 it searchable. 34 00:02:28,070 --> 00:02:28,530 Such. 35 00:02:30,460 --> 00:02:37,000 So I see like as if the spelling of search has quite messed up, so let's just read it in our dashboard. 36 00:02:38,510 --> 00:02:40,020 Went to a search bar. 37 00:02:40,440 --> 00:02:41,140 That's fine. 38 00:02:42,490 --> 00:02:42,820 OK. 39 00:02:44,060 --> 00:02:49,750 So we haven't put it out as much work as well as now we need the emojis. 40 00:02:50,940 --> 00:02:52,700 It'll be importing moderators. 41 00:02:58,780 --> 00:03:02,420 On our components from my dashboard. 42 00:03:05,090 --> 00:03:07,540 And then we'll be searching for. 43 00:03:09,100 --> 00:03:09,880 Images. 44 00:03:12,180 --> 00:03:16,590 And after the images we want in our images are filled up images, results option. 45 00:03:16,980 --> 00:03:18,930 So we'll be importing our emoji results. 46 00:03:20,800 --> 00:03:23,110 And that's all that we need for now. 47 00:03:23,500 --> 00:03:25,120 Now let's create a component. 48 00:03:26,170 --> 00:03:28,990 So this time we're not going to use functional components. 49 00:03:28,990 --> 00:03:31,120 This time we're using glass components. 50 00:03:31,540 --> 00:03:36,070 So let's just make up a glass component, and there is one other feature that will be using. 51 00:03:36,610 --> 00:03:39,370 So for now, just let us export. 52 00:03:43,770 --> 00:03:45,960 Const Expert default. 53 00:03:50,540 --> 00:03:51,410 Class Act. 54 00:03:53,290 --> 00:03:56,740 Which is going to extend to bill component. 55 00:03:58,210 --> 00:03:59,800 Now, what are the other components? 56 00:04:00,730 --> 00:04:03,130 Let me just give a brief description. 57 00:04:03,520 --> 00:04:09,330 So if you're talking about power components, so pure components in reactor components, which actually 58 00:04:09,340 --> 00:04:14,040 do not read Ender when the value of state and props has been updated with the same. 59 00:04:14,350 --> 00:04:18,640 That means if we are going to change our value and this is going to happen a lot in that application, 60 00:04:18,990 --> 00:04:24,910 well, I suppose if I just create a particular order, a particular list of emojis. 61 00:04:25,090 --> 00:04:26,860 And so we are not changing any values, right? 62 00:04:26,860 --> 00:04:32,260 So therefore, we are using big companies because we do not want our app to read and then we are providing 63 00:04:32,260 --> 00:04:34,270 with the same values of the state and thoughts. 64 00:04:34,810 --> 00:04:43,390 So that's why using state power companies now as this is a class component will be having a render and 65 00:04:43,390 --> 00:04:45,880 inside out and I will be having a written statement. 66 00:04:48,240 --> 00:04:53,350 And now will be creating a pain in death because all the react elements should have appeared in class, 67 00:04:53,350 --> 00:04:54,740 so let's just be repetitive. 68 00:04:55,380 --> 00:04:59,970 And inside this day will be first calling on Haider, then a search bar and then our immediate results. 69 00:05:00,390 --> 00:05:01,800 So first, let's call our of. 70 00:05:04,000 --> 00:05:09,100 Forget that we have got lightheaded in it and we have exported our company class component. 71 00:05:10,420 --> 00:05:14,800 So now let's take a look at that hair component because we'll be configuring it first. 72 00:05:14,800 --> 00:05:21,070 Later, then will come the tone of the search bar and then we'll be configuring the emoji list immediately. 73 00:05:21,760 --> 00:05:27,970 So let's just move into a header section and inside that handle GSX, let's just configure it first.