1 00:00:00,390 --> 00:00:08,220 In this part, we are going to create a room list which show the rooms at the right side and scenes 2 00:00:08,250 --> 00:00:16,740 at this stage we do not have any database, so we have to go to the home party and create some commentators. 3 00:00:17,680 --> 00:00:25,720 So under here, we create Cornerstone's rooms is DeCota and sees the room object, we just have the 4 00:00:25,720 --> 00:00:26,110 name. 5 00:00:29,980 --> 00:00:41,720 And also just the ID from the database, so we create a I.D. and we just similary the ID from Mongoloids 6 00:00:41,980 --> 00:00:43,750 so that you underscore here. 7 00:00:44,820 --> 00:00:46,470 And then we create another room. 8 00:00:47,610 --> 00:00:57,960 And which is Rome two and four or five, six and under the podium voters, we create a new file which 9 00:00:57,960 --> 00:01:08,280 is really starting and we are again creating the we at our function component. 10 00:01:08,700 --> 00:01:11,640 And then, for example, we type role here. 11 00:01:12,540 --> 00:01:15,870 And at the home page, we import this component. 12 00:01:17,000 --> 00:01:23,870 And we import the homeless from homeless. 13 00:01:29,180 --> 00:01:39,160 And then here we type the cross U.S. column and it takes up six unit of space, which indicates that 14 00:01:39,170 --> 00:01:48,800 more size and five unit of space when medium size and so offset one and then replace the Romneys here 15 00:01:49,130 --> 00:01:52,350 so we can see the room is already exist here. 16 00:01:53,240 --> 00:01:57,860 Now, we are going to pass the data that we just create on the top. 17 00:01:59,120 --> 00:02:02,510 So we use Rom's is equal to Rom's. 18 00:02:10,070 --> 00:02:17,390 And then here with the structure, these rooms, and then we can see the rooms here, for example, 19 00:02:17,420 --> 00:02:20,690 we used to sort of 25 rooms. 20 00:02:21,530 --> 00:02:23,760 Now we can see the Jayton object here. 21 00:02:23,930 --> 00:02:29,540 Now, instead of just displayed adjacent, we are going to render the name one by one. 22 00:02:29,630 --> 00:02:32,720 So we will check if there is rooms here. 23 00:02:33,620 --> 00:02:37,250 And then we use the functions and then we have the tape. 24 00:02:37,790 --> 00:02:42,440 And the key is room thought, Heidi. 25 00:02:43,040 --> 00:02:45,990 And the name is room name. 26 00:02:46,040 --> 00:02:52,310 So now if you take a look on the website, you can see room one and room to these two names. 27 00:02:52,350 --> 00:02:58,130 Now, instead of just Grandaddy's, a simple task, we are going to use the card to display the room 28 00:02:58,130 --> 00:02:59,980 and we find this is suitable. 29 00:02:59,990 --> 00:03:10,860 So we copy this one back to the home and we create a new component room as in every place here, and 30 00:03:11,390 --> 00:03:13,310 need the shelf coating pack. 31 00:03:13,310 --> 00:03:20,420 But we can delete this because we do not have any image and we do not have any paragraph and we do not 32 00:03:20,420 --> 00:03:23,270 have any questions so we can delete this. 33 00:03:23,540 --> 00:03:31,670 And now like before we have to import and like before we have to go to the Romneys and import the room 34 00:03:31,670 --> 00:03:40,010 from the room and then instead of using them, we are going to be using card so we do not have to for 35 00:03:40,010 --> 00:03:41,030 the room here. 36 00:03:41,060 --> 00:03:49,150 Instead, we passed a name is equal to room dot, name to be room card. 37 00:03:50,780 --> 00:03:53,610 And then we take a look on the website. 38 00:03:53,810 --> 00:03:59,570 Now you can see the card already exist here, but there is horizontal card. 39 00:03:59,690 --> 00:04:04,630 So we are back to the room and see we have the title here. 40 00:04:05,000 --> 00:04:12,980 So we do not need this do now we can see the card here and now we can restructure the name. 41 00:04:14,240 --> 00:04:17,780 And then instead of passing this test, we are going to use the name. 42 00:04:18,170 --> 00:04:20,960 Oh, we can see the room name here.