1
00:00:00,720 --> 00:00:05,700
Showing multiple code editors is fantastic, but now we're going to work on the layout of an individual

2
00:00:05,700 --> 00:00:06,850
code cell by itself.

3
00:00:07,170 --> 00:00:11,600
So remember, we currently have a code editor and a preview window underneath it.

4
00:00:11,610 --> 00:00:12,810
It's kind of invisible right now.

5
00:00:12,990 --> 00:00:16,190
And we refer to these two things put together as a code cell.

6
00:00:16,800 --> 00:00:20,190
Remember, back to the original kind of demo of this application I had showed you.

7
00:00:20,550 --> 00:00:24,210
We eventually want to have the code editor and the preview window right next to each other.

8
00:00:24,510 --> 00:00:29,100
And then very importantly, I want to have a little kind of grabby pain right here that I can use to

9
00:00:29,100 --> 00:00:33,610
either expand or shrink the code editor and expand or shrink the preview window.

10
00:00:34,230 --> 00:00:39,120
In addition, I want to have a second little grabby thing right here that I can use to vertically expand

11
00:00:39,300 --> 00:00:41,640
the code editor and the preview window at the same time.

12
00:00:42,520 --> 00:00:47,680
So we're going to start to building in these little resize elements to do so, we're going to build

13
00:00:47,680 --> 00:00:50,860
one single component and we're going to use this component.

14
00:00:50,870 --> 00:00:56,050
We're going to add some kind of functionality to it to allow ourselves to either expand stuff horizontally

15
00:00:56,050 --> 00:00:56,740
or vertically.

16
00:00:57,520 --> 00:01:01,000
We're not going to build up this entire component by ourselves from scratch.

17
00:01:01,210 --> 00:01:07,120
Instead, we're going to make use of a package called React Sizable to get just a little bit of functionality

18
00:01:07,120 --> 00:01:08,650
around the kind of expand behavior.

19
00:01:08,770 --> 00:01:12,850
And we're going to add in a little bit of customization to it to make it work, as we would expect.

20
00:01:13,690 --> 00:01:15,280
So let's pull up our browser.

21
00:01:16,790 --> 00:01:23,750
Navigate to NPM News.com and take a look at the documentation for this package called React, very sizable.

22
00:01:25,030 --> 00:01:26,590
So I'm going to find the first result right here.

23
00:01:27,940 --> 00:01:33,460
And then on the documentation, you can find very easily at the very top a link to view the demo, I'm

24
00:01:33,460 --> 00:01:36,880
going to open that up and you'll see a demo page that looks something like this.

25
00:01:37,630 --> 00:01:40,290
There are a lot of different examples of how to use this react.

26
00:01:40,450 --> 00:01:41,470
Sizable component.

27
00:01:42,130 --> 00:01:46,870
We are most interested in this one right here and this one right here, where we can configure this

28
00:01:46,870 --> 00:01:51,940
thing to only allow resizing along the horizontal axis or the vertical axis.

29
00:01:52,500 --> 00:01:58,630
So on this only sizable by x axis, you can see that we can resize it horizontally, but not vertically.

30
00:01:59,410 --> 00:02:03,430
And with this other one, we can resize vertically, but not horizontally.

31
00:02:04,510 --> 00:02:09,699
So to implement our little code sell thing right here, we're going to have one instance of this component,

32
00:02:09,699 --> 00:02:13,630
more or less, that's going to resize vertically and another horizontally.

33
00:02:14,410 --> 00:02:18,490
We're going to wrap up all the functionality for both these inside of one single component and then

34
00:02:18,490 --> 00:02:23,630
pass it some props to tell it whether or not we want to allow resizing on the X or the Y.

35
00:02:24,400 --> 00:02:25,180
So that's pretty much it.

36
00:02:26,630 --> 00:02:32,330
So to get started on this, let's go back over to our code editor or our terminal to get started, and

37
00:02:32,330 --> 00:02:34,870
we're going to first install this package into our project.

38
00:02:35,660 --> 00:02:37,070
So back at my terminal.

39
00:02:38,060 --> 00:02:44,180
Here we go, I'm inside of my book project directory and inside of here, as usual, we'll do a quick

40
00:02:44,180 --> 00:02:44,900
and install.

41
00:02:46,150 --> 00:02:48,550
With a dash, dash, save.

42
00:02:50,030 --> 00:02:53,330
Exact, we're going to get react sizable.

43
00:02:55,440 --> 00:03:00,660
At version one point one, one point zero, and then we're also going to get some type definitions for

44
00:03:00,660 --> 00:03:01,260
this as well.

45
00:03:01,290 --> 00:03:03,750
So at type's react.

46
00:03:05,190 --> 00:03:05,880
Sizable.

47
00:03:07,780 --> 00:03:10,000
At one point, seven point two.

48
00:03:11,530 --> 00:03:16,900
All right, so let that installer go, come back in next video and get started on our sizable component.