I'm going to go ahead and create a div, close it. It's going to be a little hard to see here before we style it. If it does fail, we're going to set our error to ssage. Assuming that doesn't fail, we're going to set our error to empty string. What we're doing is we're saying window.babel transform our code using these presets, and then give us that code back. Into that, we're going to say, 'Yes, 2015 and React.' From the result of that, we need code. What we need is the presets, which is an array. Along with our code, we need to pass our options. I'm going to break this up a little bit, so we can see it a little better. We're going to call its transform method.

We're accessing that library that we're bringing in over CDN. What we're going to try to do is set our state of output to window.babel. We're going to throw the rest of this in a try catch block. We're going to say let code=e.target.value. This is going to take in an event off of our text area. Let's go ahead and create our update method. That will just be an empty string, and it will have our error. We're going to go and set that to a default of, 'Add your JSX here.' We'll have our output. We're going to say this.state= first, we're going to have our input. Create a constructor called super to get our context. Its content is going to be for the output. Next to that, we're going to have a pre tag.

That's going to be for the code that we're typing that we want to transpile. This guy is going to have an onChange event=this.update, and we'll bind that to the context of this. We're going to have a div with a class name of container. This is where we're going to place our error, if we have one. Here, in our code, we've got a simple component that says returning a div. Here, in our index.html of our Create React App application, I'm bringing in the standalone version of Babel. In this lesson, we're going to create an in-browser JSX transpiler.

Live html compiler