1 00:00:00,120 --> 00:00:09,360 Now, after we created the portrait, we can go to the client and then I ampm start and you can see 2 00:00:09,360 --> 00:00:11,370 the portrait is running in the browser. 3 00:00:11,520 --> 00:00:18,930 And since last week, we will use your own Web site to do the fertigation, but now we will not focus 4 00:00:18,930 --> 00:00:20,380 on Authentications. 5 00:00:20,400 --> 00:00:26,720 And so we will use the use contest to create the dummy users for our trepang. 6 00:00:27,870 --> 00:00:32,340 So under the source photo, we are going to create a new file. 7 00:00:32,640 --> 00:00:43,860 We use a contest test and inside the user contest, we are going to import the query content from we 8 00:00:43,860 --> 00:00:48,000 add and then we export the content. 9 00:00:49,940 --> 00:00:56,500 The contest is equal to the eight contest, No. 10 00:00:59,410 --> 00:01:08,470 Now, under the source code, we create components, so we create components folder and then under the 11 00:01:08,470 --> 00:01:10,990 components we create two folders. 12 00:01:10,990 --> 00:01:12,670 One is the room. 13 00:01:13,060 --> 00:01:14,180 So we create a track. 14 00:01:16,390 --> 00:01:20,130 And also we create another is for the home page. 15 00:01:20,140 --> 00:01:22,270 So we create our folders for home. 16 00:01:23,610 --> 00:01:34,620 So inside the chat, we create a chat box and then we create another yes, and we are going to use the 17 00:01:34,830 --> 00:01:35,760 functional component. 18 00:01:35,770 --> 00:01:41,220 So you type our F.P. and I'm inside here. 19 00:01:41,220 --> 00:01:43,970 We type one and then type cat. 20 00:01:43,980 --> 00:01:46,020 So we know that this page is Chad. 21 00:01:47,140 --> 00:01:49,120 And we do the same at home page. 22 00:01:53,410 --> 00:01:57,190 And then we type one and then we type on. 23 00:01:59,820 --> 00:02:01,590 So why can we use our. 24 00:02:03,210 --> 00:02:13,140 You can download the we app extensions and the extension page and you can download this one so you can 25 00:02:13,650 --> 00:02:20,370 compare with these documentations and he will teach you why we can use our FC 26 00:02:22,980 --> 00:02:30,150 so our AFC will automatically output this bunch of code. 27 00:02:31,940 --> 00:02:40,370 So we back with a budget and now we are going to do the rounds, so we need to install another package 28 00:02:42,560 --> 00:02:49,520 so we cancel the SSAFA at the inside and then we type. 29 00:02:52,050 --> 00:02:54,360 NPM install, we add. 30 00:02:56,040 --> 00:02:56,760 Throughout her. 31 00:02:59,370 --> 00:03:04,550 And at the same time, actually, we can delete this airport not passed onto us. 32 00:03:08,020 --> 00:03:09,700 We can't let these local. 33 00:03:13,650 --> 00:03:15,040 And then we back to the airport. 34 00:03:15,120 --> 00:03:15,570 Yes. 35 00:03:17,010 --> 00:03:20,700 And since we do not need this, Hadass. 36 00:03:22,500 --> 00:03:30,390 So from here, we can delete this whole header and also we can delete this import logo. 37 00:03:31,850 --> 00:03:33,500 Now we are going to import. 38 00:03:35,480 --> 00:03:47,520 From the storm, so import Browder brought her as brought her to which. 39 00:03:49,390 --> 00:03:59,920 And root from way at the door and then import you the contest from 40 00:04:03,790 --> 00:04:04,780 user contact. 41 00:04:07,440 --> 00:04:14,190 Since we already export this USA contest so we can import the user content from this faux. 42 00:04:16,330 --> 00:04:26,010 And now we can also import the component that we just created, so we import the chad from the component 43 00:04:28,480 --> 00:04:33,910 and Chad, now we have difficulties and import the whole. 44 00:04:38,250 --> 00:04:43,560 And this is the small size, but so we change these. 45 00:04:45,760 --> 00:04:48,610 So here we are going to use the rather. 46 00:04:57,690 --> 00:05:06,090 And then use a contest parameter and here we are going to import the USA because at last we are going 47 00:05:06,090 --> 00:05:10,420 to change the USA at the USA contest. 48 00:05:10,800 --> 00:05:14,790 So here we are going to import. 49 00:05:18,690 --> 00:05:25,170 We add and you say we add. 50 00:05:35,210 --> 00:05:47,870 And then we have constant yuzu that youth is equal to use state and then no, and then we passed the 51 00:05:47,880 --> 00:05:50,090 value by using the provider. 52 00:05:50,750 --> 00:05:56,630 So where do you go to user and user? 53 00:05:58,100 --> 00:05:59,270 And then we type switch. 54 00:06:04,550 --> 00:06:05,810 And then we talk about. 55 00:06:08,680 --> 00:06:09,490 Set pop. 56 00:06:11,270 --> 00:06:17,240 Is eco to slash and component is equal to oh. 57 00:06:21,650 --> 00:06:28,760 Now, I think everything is ready so we can pass the route by NPM, start the survey again. 58 00:06:30,380 --> 00:06:40,730 Now we can see the home page is accessed here, and if we change this to a chat, we can also change 59 00:06:40,730 --> 00:06:41,330 to the chat. 60 00:06:44,300 --> 00:06:50,690 So the route is ready, and in the next part, we are going to at some point turn to changed the user.