1 00:00:01,030 --> 00:00:05,560 So now before we move into that hurdle, G6 to configure this one piece of information that I'd like 2 00:00:05,560 --> 00:00:06,220 to share with you. 3 00:00:06,640 --> 00:00:14,140 And that is if we just go in this import, react from React, React won't be yelling at us or we won't 4 00:00:14,140 --> 00:00:20,230 be blamed for this because since the introduction of 20 is 60, we are no longer a requirement to import 5 00:00:20,230 --> 00:00:21,280 react from the Act module. 6 00:00:21,610 --> 00:00:24,100 It has already been done to us for us. 7 00:00:24,400 --> 00:00:28,300 So if I just remove this particular statement, it is completely fine. 8 00:00:28,370 --> 00:00:30,790 It app is going to work a function normally. 9 00:00:31,660 --> 00:00:35,290 So we are no longer requirement to create or import react manually. 10 00:00:35,920 --> 00:00:41,740 So let's just move forward and look at the other component that is the head of logistics. 11 00:00:43,000 --> 00:00:50,830 So if we just moved into a head-to-toe G6 now, the first step is to import react from the opened up 12 00:00:50,950 --> 00:00:51,460 component. 13 00:00:51,790 --> 00:00:57,580 So we'll be importing component because this time also we'll be working with a class component, so 14 00:00:57,580 --> 00:01:01,450 we'll be importing bill component from the module. 15 00:01:04,100 --> 00:01:09,140 And now we have imported your component from the Act module and all that a piece of code that we need 16 00:01:09,140 --> 00:01:13,370 in an application is the head of the TSA. 17 00:01:13,370 --> 00:01:18,800 So we'll be putting on notice because that's where this is going to be fetched from. 18 00:01:19,520 --> 00:01:26,240 So just go back one directly and we'll having our head up notices. 19 00:01:31,270 --> 00:01:34,780 So we haven't put it in a test now, it's time to create the application. 20 00:01:35,140 --> 00:01:36,970 So let's just export. 21 00:01:41,230 --> 00:01:43,030 The world class head of. 22 00:01:49,250 --> 00:01:52,400 Which is extending to fewer components. 23 00:01:54,840 --> 00:01:56,640 No, this is a class component. 24 00:01:56,850 --> 00:01:57,900 We will be agenda. 25 00:01:58,230 --> 00:01:59,580 It will be having a render function. 26 00:02:03,390 --> 00:02:06,210 Which is, in turn, is going to have a written statement. 27 00:02:08,020 --> 00:02:13,930 And in this written statement, we are going to have a parent container so we can at any minute are 28 00:02:13,930 --> 00:02:17,040 there, but in this case, I would like to have a header. 29 00:02:18,550 --> 00:02:22,810 Okay, Judy, you and really give the last name of. 30 00:02:25,630 --> 00:02:26,980 And Heather. 31 00:02:30,050 --> 00:02:34,580 And let's just close this now inside this hotel, they are going to have other companies that are going 32 00:02:34,580 --> 00:02:37,640 to be a image by now leaving the source. 33 00:02:37,670 --> 00:02:39,740 Are we adding the sources afterwards? 34 00:02:39,740 --> 00:02:41,060 So let's just give it. 35 00:02:41,360 --> 00:02:46,400 Let's just put the image with an empty string with the source, and we'll give it an alternative name. 36 00:02:47,990 --> 00:02:49,850 Let's just name it empty string. 37 00:02:49,850 --> 00:02:51,080 And that's all I want. 38 00:02:51,410 --> 00:02:54,500 And OK, so here it should be a self-closing image. 39 00:02:55,610 --> 00:03:02,030 Apart from this image, we also want inside this image emerging after this image of emoji. 40 00:03:03,220 --> 00:03:05,410 And will you search text? 41 00:03:07,550 --> 00:03:14,780 And we're going to have another image after image search, and this is going to have the similar configurations 42 00:03:14,780 --> 00:03:16,790 as the previous one, so let's just copy it. 43 00:03:18,010 --> 00:03:20,170 And after the images are pasted again. 44 00:03:21,920 --> 00:03:25,970 Now, as far as source will be high, they will having different sources for these images. 45 00:03:26,360 --> 00:03:29,120 So let me just bring out the source in here. 46 00:03:34,810 --> 00:03:36,550 So when we pasting of passports now. 47 00:03:37,970 --> 00:03:41,220 And again, so this is going to be the same. 48 00:03:41,870 --> 00:03:45,170 But let's just make it a we'll get out of here. 49 00:03:45,170 --> 00:03:48,800 There are two images emoji, search, text and source. 50 00:03:49,220 --> 00:03:52,880 So now we want the height and weight of these images to be around. 51 00:03:56,000 --> 00:04:01,520 I wonder how it would be at least 32, as well as the vets to be at least 30 to. 52 00:04:07,700 --> 00:04:10,340 OK, and we won the same height and weight on the second image. 53 00:04:13,570 --> 00:04:16,940 So this copied and pasted again now hit save. 54 00:04:17,260 --> 00:04:23,050 So we have made our images, so now let's viewer up just 10 pm started. 55 00:04:23,530 --> 00:04:28,720 And once it started, you'll see that Apple didn't compile, but you can see these two warnings, and 56 00:04:28,730 --> 00:04:34,270 that's basically because we have imported our search bar and Animoji users, but we haven't used them 57 00:04:34,270 --> 00:04:34,540 yet. 58 00:04:35,020 --> 00:04:40,280 So just commend them out if you are not comfortable with them and just hit it there. 59 00:04:40,330 --> 00:04:47,440 So our app has been compiled successfully and now we can and we up on this particular URL that is looking 60 00:04:47,440 --> 00:04:51,250 to 2000 as well as on a browsers, or let's just open up our browser. 61 00:04:52,390 --> 00:04:56,900 So here are two images cat with a happy looking face and under happy care. 62 00:04:56,980 --> 00:04:58,020 Get better with this. 63 00:04:58,030 --> 00:05:01,360 Don't even face an emoji search text in between them. 64 00:05:01,750 --> 00:05:07,000 So no, it is not at the place where we want them, as well as the text is not of the desired color 65 00:05:07,000 --> 00:05:08,020 that we want it to be. 66 00:05:08,350 --> 00:05:11,560 So let's just add Texas to it before we do anything else. 67 00:05:11,890 --> 00:05:15,280 So move back into your head to thesis. 68 00:05:18,290 --> 00:05:23,750 OK, so this component will be having a hard headed notice, so let's just move into a. 69 00:05:24,900 --> 00:05:27,210 Headed out to assess Insider Headers folder. 70 00:05:30,080 --> 00:05:36,620 So here is an to assess, just move into it and now will be creating about styles for head of.