1
00:00:00,790 --> 00:00:04,240
So here is the big test inside of our text area.

2
00:00:04,450 --> 00:00:08,070
I want to try to create a react component and then render it out.

3
00:00:08,080 --> 00:00:10,320
I want to display it inside of our iFrame.

4
00:00:10,960 --> 00:00:16,600
Remember inside that HTML snippet we just put together a moment ago, we had added in a div with ID

5
00:00:16,600 --> 00:00:19,270
root, so inside the iframe this div exists.

6
00:00:19,460 --> 00:00:23,830
That means we can create a react component in attempt to render it into that div right there.

7
00:00:24,130 --> 00:00:27,070
If you don't believe me, you can always inspect the iFrame itself.

8
00:00:28,240 --> 00:00:34,090
Inspect the iFrame and expand that HTML element, here's body and there's the did with the idea root

9
00:00:34,090 --> 00:00:35,170
inside of the iFrame.

10
00:00:35,620 --> 00:00:40,480
So again we're going to make a react component and then use react to render it into that div right there.

11
00:00:41,470 --> 00:00:46,720
All right, so inside of our text area, I'm going to import, react from react.

12
00:00:48,470 --> 00:00:50,060
React from react, Dom.

13
00:00:51,700 --> 00:00:53,320
I'm going to create an app component.

14
00:00:54,620 --> 00:00:59,150
And I'll show inside there in each one that says, you guessed it by their.

15
00:01:00,070 --> 00:01:03,040
And then finally react that render.

16
00:01:05,120 --> 00:01:12,320
Create an instance of my app component and as a second argument document where you Selecter LB route.

17
00:01:15,450 --> 00:01:20,610
All right, here's a moment of truth, Zimet, that's going to bundle our code, take the bundle, push

18
00:01:20,610 --> 00:01:24,570
it down into the frame through that event system where we are going to eval that code.

19
00:01:25,080 --> 00:01:26,250
Our bundle is going to run.

20
00:01:26,440 --> 00:01:31,510
We're going to attempt to render our component and there it is inside the iFrame and that's it.

21
00:01:31,590 --> 00:01:32,330
Hurray!

22
00:01:32,380 --> 00:01:33,240
It works.

23
00:01:33,240 --> 00:01:37,620
We can create a real component while loading up react and react.

24
00:01:37,620 --> 00:01:39,990
Dom directly from unpackaged dot com.

25
00:01:40,200 --> 00:01:43,550
We're bundling inside the browser and seeing the result right there.

26
00:01:44,100 --> 00:01:46,830
And what's more, all this runs rather quickly.

27
00:01:47,280 --> 00:01:49,260
So if I look at my network request tab right now.

28
00:01:50,410 --> 00:01:51,170
Clear everything out.

29
00:01:51,190 --> 00:01:51,850
I'm going to submit.

30
00:01:53,280 --> 00:01:55,890
Let me try changing the text first so we see something else.

31
00:01:55,920 --> 00:01:56,640
Here we go, Simit.

32
00:01:56,880 --> 00:01:57,720
There's the update.

33
00:01:57,750 --> 00:02:01,110
We did not even make a single request in doing this bundle.

34
00:02:01,410 --> 00:02:05,600
So it is just about as snappy and fast as it can possibly be.

35
00:02:06,030 --> 00:02:09,690
There is technically one or two very small improvements we can make to the performance that we might

36
00:02:09,690 --> 00:02:10,259
go into later.

37
00:02:10,259 --> 00:02:12,060
But this is pretty darn fast.

38
00:02:12,340 --> 00:02:14,040
We are now bundling inside the browser.

39
00:02:14,040 --> 00:02:14,940
We are executing it.

40
00:02:15,060 --> 00:02:17,940
The entire process is just ridiculously quick.

41
00:02:18,480 --> 00:02:22,680
So I know that we have spent a lot of time in this course so far talking about a lot of crazy topics

42
00:02:22,860 --> 00:02:26,250
and going through a lot of very crazy stuff, very painful stuff.

43
00:02:26,520 --> 00:02:28,310
But this is really the payoff right here.

44
00:02:28,350 --> 00:02:30,810
This is a pretty good accomplishment.

45
00:02:30,810 --> 00:02:32,460
This is a really, really solid.

46
00:02:33,680 --> 00:02:39,860
Well, as happy as I am about this result, we are left right now with some pretty nasty code that could

47
00:02:39,860 --> 00:02:44,450
definitely get some refactoring and we should probably start to think about how we're going to eventually

48
00:02:44,450 --> 00:02:49,940
show, of course, multiple text areas and multiple frames, because remember, we eventually want a

49
00:02:49,940 --> 00:02:53,690
user to be able to add in as many of these different code cells as we want.

50
00:02:54,260 --> 00:02:56,520
So it's still a tremendous amount of work for us to do.

51
00:02:56,870 --> 00:02:58,570
Let's continue in just a moment.