The right side of our application is in a great spot, so we're not going to go back over to the back
side of things and add in a couple of components to handle, showing a list of all of our different
cells and allowing a user to move them around as well.
We're going to first focus on two rather basic components, cell list and cell list item.
So list will be a component that is all about showing a simple, well, you guessed it, list of cells
to the user.
That's all cell.
This really does.
So as you can imagine, this component is probably going to have to reach into our reduc store and get
a list of all the current cells we have.
And also take a look at that order property as well to figure out what order to render these things
in.
We're also going to have a list item, this will be a component that shows each individual cell.
So Selous items job for the most part, is going to be all about figuring out what kind of cell it is
trying to show.
Is it trying to show either a tech cell or a code cell and then render out the appropriate inner cell
appropriately?
So list item is also going to be in charge of showing these little buttons that allow a user to delete
a cell or move it up and down.
So this item is going to have a couple of other responsibilities.
But beyond that.
But we'll figure out what those are in due time.
OK, we are going to have a couple of components beyond what you see right here, but this is just enough
to get us started.
So let's go back over to our editor and create a list and sell list item.
Back inside of my editor, I will find the components directory, I'm going to add in sell list TSX
and sell list item.
Then in each of these right away, let's just put together a little bit of boilerplate, so inside of
cell list, how about we.
Create a sell list component.
I will annotate its type as React FC and do an export default of sell list at the bottom.
I'm going to return a dip right now.
That just says sell list.
I'm then going to copy all this, take it over to sell list item.
Is this all in put in sell this item as a name, I'll change the debate to say sell this item and then
export that at the bottom as well.
OK, so back over to sell list, which is going to be where we focus on for right now, so so list is
really one of the root components of our application.
We don't really necessarily have any headers or footers or anything like that.
So we're going to import sell list into our main index file and show this component inside there in
place of whatever we currently have.
So I will go back over to our root index TSX file again, I don't really want to show any text editor
or anything like that anymore.
The only job of our app component now is to really just set up our provider and then show the cell list
component.
So I will import the list from components cell list.
And then show, sell list.
On the screen.
I'm not sure we really need this wrapping Divx anymore, to be honest, we actually kind of do because
we're going to add in a little bit of styling and just a little bit.
So we're going to leave in the d'Hiv, although right now technically not required.
OK, that looks good.
Let's go back over to our browser.
Do a quick refresh and of course, we see nothing but list on the screen.
OK, so that is a reasonable place to get started.
Let's take a pause right here.
Come back to the next video.
We're going to add in some logic to sell list and make sure that it knows how to go into our reduc store,
get the list of all the order of cells we want to display and get the cell data object as well and eventually
take the two and assemble a big ordered list to show on the screen.