So here is the big test inside of our text area.
I want to try to create a react component and then render it out.
I want to display it inside of our iFrame.
Remember inside that HTML snippet we just put together a moment ago, we had added in a div with ID
root, so inside the iframe this div exists.
That means we can create a react component in attempt to render it into that div right there.
If you don't believe me, you can always inspect the iFrame itself.
Inspect the iFrame and expand that HTML element, here's body and there's the did with the idea root
inside of the iFrame.
So again we're going to make a react component and then use react to render it into that div right there.
All right, so inside of our text area, I'm going to import, react from react.
React from react, Dom.
I'm going to create an app component.
And I'll show inside there in each one that says, you guessed it by their.
And then finally react that render.
Create an instance of my app component and as a second argument document where you Selecter LB route.
All right, here's a moment of truth, Zimet, that's going to bundle our code, take the bundle, push
it down into the frame through that event system where we are going to eval that code.
Our bundle is going to run.
We're going to attempt to render our component and there it is inside the iFrame and that's it.
Hurray!
It works.
We can create a real component while loading up react and react.
Dom directly from unpackaged dot com.
We're bundling inside the browser and seeing the result right there.
And what's more, all this runs rather quickly.
So if I look at my network request tab right now.
Clear everything out.
I'm going to submit.
Let me try changing the text first so we see something else.
Here we go, Simit.
There's the update.
We did not even make a single request in doing this bundle.
So it is just about as snappy and fast as it can possibly be.
There is technically one or two very small improvements we can make to the performance that we might
go into later.
But this is pretty darn fast.
We are now bundling inside the browser.
We are executing it.
The entire process is just ridiculously quick.
So I know that we have spent a lot of time in this course so far talking about a lot of crazy topics
and going through a lot of very crazy stuff, very painful stuff.
But this is really the payoff right here.
This is a pretty good accomplishment.
This is a really, really solid.
Well, as happy as I am about this result, we are left right now with some pretty nasty code that could
definitely get some refactoring and we should probably start to think about how we're going to eventually
show, of course, multiple text areas and multiple frames, because remember, we eventually want a
user to be able to add in as many of these different code cells as we want.
So it's still a tremendous amount of work for us to do.
Let's continue in just a moment.