1 00:00:00,840 --> 00:00:04,960 The right side of our application is in a great spot, so we're not going to go back over to the back 2 00:00:04,980 --> 00:00:10,230 side of things and add in a couple of components to handle, showing a list of all of our different 3 00:00:10,230 --> 00:00:12,880 cells and allowing a user to move them around as well. 4 00:00:13,470 --> 00:00:18,990 We're going to first focus on two rather basic components, cell list and cell list item. 5 00:00:19,470 --> 00:00:24,930 So list will be a component that is all about showing a simple, well, you guessed it, list of cells 6 00:00:24,930 --> 00:00:25,440 to the user. 7 00:00:25,600 --> 00:00:26,230 That's all cell. 8 00:00:26,250 --> 00:00:27,000 This really does. 9 00:00:27,360 --> 00:00:32,009 So as you can imagine, this component is probably going to have to reach into our reduc store and get 10 00:00:32,009 --> 00:00:33,960 a list of all the current cells we have. 11 00:00:34,320 --> 00:00:38,640 And also take a look at that order property as well to figure out what order to render these things 12 00:00:38,640 --> 00:00:38,880 in. 13 00:00:39,780 --> 00:00:44,490 We're also going to have a list item, this will be a component that shows each individual cell. 14 00:00:45,180 --> 00:00:50,250 So Selous items job for the most part, is going to be all about figuring out what kind of cell it is 15 00:00:50,250 --> 00:00:50,880 trying to show. 16 00:00:51,090 --> 00:00:57,090 Is it trying to show either a tech cell or a code cell and then render out the appropriate inner cell 17 00:00:57,090 --> 00:00:57,720 appropriately? 18 00:00:58,600 --> 00:01:04,120 So list item is also going to be in charge of showing these little buttons that allow a user to delete 19 00:01:04,120 --> 00:01:05,670 a cell or move it up and down. 20 00:01:06,190 --> 00:01:08,830 So this item is going to have a couple of other responsibilities. 21 00:01:08,830 --> 00:01:09,640 But beyond that. 22 00:01:09,790 --> 00:01:11,620 But we'll figure out what those are in due time. 23 00:01:12,410 --> 00:01:16,970 OK, we are going to have a couple of components beyond what you see right here, but this is just enough 24 00:01:16,970 --> 00:01:17,600 to get us started. 25 00:01:17,830 --> 00:01:21,230 So let's go back over to our editor and create a list and sell list item. 26 00:01:22,660 --> 00:01:29,620 Back inside of my editor, I will find the components directory, I'm going to add in sell list TSX 27 00:01:30,160 --> 00:01:33,310 and sell list item. 28 00:01:36,560 --> 00:01:41,030 Then in each of these right away, let's just put together a little bit of boilerplate, so inside of 29 00:01:41,030 --> 00:01:42,950 cell list, how about we. 30 00:01:43,930 --> 00:01:47,340 Create a sell list component. 31 00:01:48,040 --> 00:01:55,570 I will annotate its type as React FC and do an export default of sell list at the bottom. 32 00:01:56,510 --> 00:01:58,220 I'm going to return a dip right now. 33 00:01:59,600 --> 00:02:01,310 That just says sell list. 34 00:02:03,680 --> 00:02:06,890 I'm then going to copy all this, take it over to sell list item. 35 00:02:07,820 --> 00:02:14,300 Is this all in put in sell this item as a name, I'll change the debate to say sell this item and then 36 00:02:14,300 --> 00:02:16,070 export that at the bottom as well. 37 00:02:19,080 --> 00:02:24,390 OK, so back over to sell list, which is going to be where we focus on for right now, so so list is 38 00:02:24,390 --> 00:02:26,850 really one of the root components of our application. 39 00:02:27,060 --> 00:02:30,300 We don't really necessarily have any headers or footers or anything like that. 40 00:02:30,600 --> 00:02:36,330 So we're going to import sell list into our main index file and show this component inside there in 41 00:02:36,330 --> 00:02:37,950 place of whatever we currently have. 42 00:02:38,940 --> 00:02:45,210 So I will go back over to our root index TSX file again, I don't really want to show any text editor 43 00:02:45,210 --> 00:02:46,530 or anything like that anymore. 44 00:02:46,860 --> 00:02:52,740 The only job of our app component now is to really just set up our provider and then show the cell list 45 00:02:52,740 --> 00:02:53,230 component. 46 00:02:53,820 --> 00:02:59,400 So I will import the list from components cell list. 47 00:03:00,320 --> 00:03:01,940 And then show, sell list. 48 00:03:03,190 --> 00:03:03,850 On the screen. 49 00:03:04,710 --> 00:03:08,940 I'm not sure we really need this wrapping Divx anymore, to be honest, we actually kind of do because 50 00:03:08,940 --> 00:03:11,280 we're going to add in a little bit of styling and just a little bit. 51 00:03:11,590 --> 00:03:14,670 So we're going to leave in the d'Hiv, although right now technically not required. 52 00:03:16,600 --> 00:03:17,570 OK, that looks good. 53 00:03:17,620 --> 00:03:19,180 Let's go back over to our browser. 54 00:03:20,730 --> 00:03:25,910 Do a quick refresh and of course, we see nothing but list on the screen. 55 00:03:26,970 --> 00:03:30,060 OK, so that is a reasonable place to get started. 56 00:03:30,480 --> 00:03:31,520 Let's take a pause right here. 57 00:03:31,680 --> 00:03:32,760 Come back to the next video. 58 00:03:32,790 --> 00:03:36,930 We're going to add in some logic to sell list and make sure that it knows how to go into our reduc store, 59 00:03:37,320 --> 00:03:44,280 get the list of all the order of cells we want to display and get the cell data object as well and eventually 60 00:03:44,280 --> 00:03:47,940 take the two and assemble a big ordered list to show on the screen.