1 00:00:01,420 --> 00:00:03,640 This is where we left out in the last video. 2 00:00:04,000 --> 00:00:08,470 So now we have created the React chat engine, we have imported it and also created the basic structure 3 00:00:08,470 --> 00:00:09,590 that is required for the charging and. 4 00:00:10,030 --> 00:00:10,560 We have green. 5 00:00:10,570 --> 00:00:15,910 We have created a project and gave this project idea to the project and then the user name and then 6 00:00:15,910 --> 00:00:16,690 the user secret. 7 00:00:17,590 --> 00:00:24,920 So now what we want to do, we have to see the chart three of the user like in that group, in that 8 00:00:24,940 --> 00:00:25,660 current group. 9 00:00:26,080 --> 00:00:30,790 What are the messages that are sent by him, but also that that he was present in the group? 10 00:00:31,030 --> 00:00:36,190 That means we want to see that chocolate over here, since there are no messages that if a user sends 11 00:00:36,190 --> 00:00:41,530 a message or someone in the group center, as of now, there is only one person joining the group. 12 00:00:41,890 --> 00:00:45,340 But if someone sends a message, you should appear to see it. 13 00:00:45,610 --> 00:00:47,260 So this is how we will do now. 14 00:00:47,830 --> 00:00:50,740 We'll be starting to build a component chat feed. 15 00:00:53,800 --> 00:00:57,070 So now to render the chart, we have to at some point. 16 00:00:58,600 --> 00:01:01,450 Then the product called chocked food. 17 00:01:05,830 --> 00:01:11,320 I will take the chop, chop up, props up, props. 18 00:01:14,470 --> 00:01:16,100 So this should be inside. 19 00:01:19,190 --> 00:01:20,030 The backups. 20 00:01:21,650 --> 00:01:23,930 So, yeah, and I will be adding that don't function. 21 00:01:24,970 --> 00:01:28,540 And now it will return the chocolate chocolate component. 22 00:01:31,670 --> 00:01:37,010 This chocolate component will take props, will be using this Fred operator to send all the props, 23 00:01:37,010 --> 00:01:38,660 all the props. 24 00:01:40,810 --> 00:01:46,330 So, yeah, so this is how we can read the chart, we have to build a chocolate company now and then. 25 00:01:46,720 --> 00:01:52,540 I also want like whenever you jump sends a message or I receive a notification, I usually like to get 26 00:01:52,540 --> 00:01:56,680 a sound so that I'll be notified in the fact that we can use. 27 00:01:58,920 --> 00:01:59,490 Sorry for that. 28 00:02:00,390 --> 00:02:01,320 A new message. 29 00:02:02,920 --> 00:02:03,880 So these results are from. 30 00:02:09,540 --> 00:02:12,130 New audio, some creating a new audio object. 31 00:02:13,350 --> 00:02:16,020 So you're not going to be using the GDP as. 32 00:02:23,870 --> 00:02:24,620 It's pretty basic. 33 00:02:24,950 --> 00:02:30,390 So this is basically the audio sound of capture that you are like after from online, then basically 34 00:02:30,410 --> 00:02:32,030 saying, is this from Jack? 35 00:02:32,030 --> 00:02:35,020 And this comes from the chart engine assets. 36 00:02:42,640 --> 00:02:46,810 So on you played a clip, it automatically. 37 00:02:50,630 --> 00:02:52,550 Now it should play on clips of a do. 38 00:02:56,850 --> 00:02:59,790 So this is how the all new message works. 39 00:03:00,900 --> 00:03:08,070 So now as we are using cockpit audio and millennial component inside the components section, so yeah, 40 00:03:08,290 --> 00:03:12,630 so now we are going to start building the components, so I'll be creating a new folder for conference. 41 00:03:18,940 --> 00:03:23,710 And insect components we can stock chart food, Doug Sex. 42 00:03:24,760 --> 00:03:33,040 It's also OK if you only keep it as the extension, it still works because it always gets on this X-Files, 43 00:03:33,040 --> 00:03:33,490 I think. 44 00:03:34,120 --> 00:03:37,900 So no problem for that, but I like to use the GSX extension. 45 00:03:39,640 --> 00:03:44,590 So instead of simply, you can know, since when we are using gay sex, we don't need to import to react 46 00:03:44,590 --> 00:03:49,690 every time it is auto important so that we can directly create the chocolate. 47 00:03:51,590 --> 00:03:54,350 Since we are sending troops, we need to catch the proper 48. 48 00:04:00,190 --> 00:04:05,460 And then we can get done something like and I say or do. 49 00:04:11,890 --> 00:04:12,550 Okay. 50 00:04:13,240 --> 00:04:13,440 Yeah. 51 00:04:16,250 --> 00:04:18,050 They would like John to. 52 00:04:20,710 --> 00:04:26,080 And then you can, for example, if you want, you can count on law and console.log and see what that 53 00:04:26,350 --> 00:04:28,270 costs, what kind of crops you are getting. 54 00:04:36,050 --> 00:04:42,940 So now, once we say this, we can go, Oh, they're going to chop food is not defined, so we are not 55 00:04:42,940 --> 00:04:44,020 exporting chocolate. 56 00:04:44,410 --> 00:04:45,220 So export. 57 00:04:45,730 --> 00:04:46,930 So this is a good practice. 58 00:04:47,050 --> 00:04:50,750 But no, it is not really a component in the basic constant chocolate. 59 00:04:51,160 --> 00:04:56,830 It done some before today with the name of the company and also export it so that you can check whether 60 00:04:56,830 --> 00:04:57,640 it's working or not. 61 00:04:59,210 --> 00:05:00,110 It's one day for. 62 00:05:02,150 --> 00:05:02,770 Chopped fruit. 63 00:05:07,680 --> 00:05:08,700 So there's still an analog. 64 00:05:09,180 --> 00:05:12,450 Is not defending our borders, so I'm not judge, you have to import it. 65 00:05:12,990 --> 00:05:15,450 Yeah, you should not forget the important. 66 00:05:17,800 --> 00:05:19,680 Seems that the components for much. 67 00:05:21,210 --> 00:05:22,340 Draft Dodgers. 68 00:05:25,080 --> 00:05:26,160 Tonight, I think that you're not. 69 00:05:28,760 --> 00:05:29,620 There's still another. 70 00:05:30,770 --> 00:05:38,330 Part of that, I feel I guess it's OK important, I'm forgetting to import the car component. 71 00:05:40,240 --> 00:05:41,290 Glad you're in the area. 72 00:05:41,440 --> 00:05:44,320 So now we can you can see, like beyond the chocolate, already it. 73 00:05:45,580 --> 00:05:46,120 The Typekit. 74 00:05:47,310 --> 00:05:48,720 That's looking pretty fine. 75 00:05:52,320 --> 00:05:56,910 So now the next step we have to do is we have to create the other components, such as my message, 76 00:05:56,970 --> 00:05:58,740 their message and message form. 77 00:05:59,070 --> 00:06:01,050 So let me start creating the components. 78 00:06:05,030 --> 00:06:06,620 My message dodgy assets. 79 00:06:09,770 --> 00:06:16,280 Their messages are dated, so this is great, too, like, for example, if you take any job application, 80 00:06:16,400 --> 00:06:20,900 your messages will be on one side and the opposite person's messages will be on either side. 81 00:06:21,050 --> 00:06:25,190 So this rendered in this fashion will be using different components for each messages. 82 00:06:29,170 --> 00:06:35,680 So unsophisticated will be using the message from message phone means that input field to send messages. 83 00:06:42,000 --> 00:06:48,480 And then finally, he will be creating the log form after completing of all this components, the login 84 00:06:48,480 --> 00:06:54,180 form is basically for users to log in into the app and then start using it. 85 00:06:54,750 --> 00:06:58,410 So as you put it, everything you're going to basically create a constant for them bounced. 86 00:06:59,890 --> 00:07:01,360 My message is it wants to. 87 00:07:05,790 --> 00:07:06,240 And then. 88 00:07:09,100 --> 00:07:09,460 I do. 89 00:07:11,910 --> 00:07:17,280 Saying my message the next four default. 90 00:07:22,310 --> 00:07:22,970 My message. 91 00:07:23,900 --> 00:07:28,970 So I'd be copping this and then using its audio version of my message. 92 00:07:30,320 --> 00:07:30,980 I can use. 93 00:07:33,690 --> 00:07:34,890 Their message out it. 94 00:07:40,410 --> 00:07:43,530 After their message, you can do it over there. 95 00:07:45,840 --> 00:07:49,680 So I'll be using the shortcut control shift to select all the. 96 00:07:50,850 --> 00:07:52,830 Politics items with the same name. 97 00:07:56,970 --> 00:07:57,720 He says from. 98 00:08:01,340 --> 00:08:02,000 A from. 99 00:08:03,260 --> 00:08:04,220 When we are equitable. 100 00:08:05,360 --> 00:08:10,980 Now, there are no adults like we have started building all the components, and in the next few don't, 101 00:08:11,210 --> 00:08:17,420 we'll see the business logic to right in center field so that we can see all the users messages that 102 00:08:17,420 --> 00:08:17,960 they're sending.