Showing multiple code editors is fantastic, but now we're going to work on the layout of an individual
code cell by itself.
So remember, we currently have a code editor and a preview window underneath it.
It's kind of invisible right now.
And we refer to these two things put together as a code cell.
Remember, back to the original kind of demo of this application I had showed you.
We eventually want to have the code editor and the preview window right next to each other.
And then very importantly, I want to have a little kind of grabby pain right here that I can use to
either expand or shrink the code editor and expand or shrink the preview window.
In addition, I want to have a second little grabby thing right here that I can use to vertically expand
the code editor and the preview window at the same time.
So we're going to start to building in these little resize elements to do so, we're going to build
one single component and we're going to use this component.
We're going to add some kind of functionality to it to allow ourselves to either expand stuff horizontally
or vertically.
We're not going to build up this entire component by ourselves from scratch.
Instead, we're going to make use of a package called React Sizable to get just a little bit of functionality
around the kind of expand behavior.
And we're going to add in a little bit of customization to it to make it work, as we would expect.
So let's pull up our browser.
Navigate to NPM News.com and take a look at the documentation for this package called React, very sizable.
So I'm going to find the first result right here.
And then on the documentation, you can find very easily at the very top a link to view the demo, I'm
going to open that up and you'll see a demo page that looks something like this.
There are a lot of different examples of how to use this react.
Sizable component.
We are most interested in this one right here and this one right here, where we can configure this
thing to only allow resizing along the horizontal axis or the vertical axis.
So on this only sizable by x axis, you can see that we can resize it horizontally, but not vertically.
And with this other one, we can resize vertically, but not horizontally.
So to implement our little code sell thing right here, we're going to have one instance of this component,
more or less, that's going to resize vertically and another horizontally.
We're going to wrap up all the functionality for both these inside of one single component and then
pass it some props to tell it whether or not we want to allow resizing on the X or the Y.
So that's pretty much it.
So to get started on this, let's go back over to our code editor or our terminal to get started, and
we're going to first install this package into our project.
So back at my terminal.
Here we go, I'm inside of my book project directory and inside of here, as usual, we'll do a quick
and install.
With a dash, dash, save.
Exact, we're going to get react sizable.
At version one point one, one point zero, and then we're also going to get some type definitions for
this as well.
So at type's react.
Sizable.
At one point, seven point two.
All right, so let that installer go, come back in next video and get started on our sizable component.