Build a JSX Live Compiler as a React Component

[00:00] In this lesson, we're going to create an in-browser JSX transpiler. Here, in our index.html of our Create React App application, I'm bringing in the standalone version of Babel.

[00:14] Here, in our code, we've got a simple component that says returning a div. We're going to add to that a header. This is where we're going to place our error, if we have one. That's going to come from our state. We're going to have a div with a class name of container. We'll be styling that in just a moment.

[00:31] We're going to have a text area. 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 default value=this.state.input. That's going to be for the code that we're typing that we want to transpile.

[00:54] Next to that, we're going to have a pre tag. Its content is going to be for the output. We'll get that from this.state.output.

[01:02] Let's go ahead and set up our state. Create a constructor called super to get our context. We're going to say this.state= first, we're going to have our input.

[01:14] We're going to go and set that to a default of, "Add your JSX here." We'll have our output. That will just be an empty string, and it will have our error. That will also be an empty string. Let's go ahead and create our update method. This is going to take in an event off of our text area. We're going to say let code=e.target.value. We're going to throw the rest of this in a try catch block.

[01:43] What we're going to try to do is set our state of output to window.babel. We're accessing that library that we're bringing in over CDN. We're going to call its transform method. Into that, we're going to pass our code.

[02:01] I'm going to break this up a little bit, so we can see it a little better. Along with our code, we need to pass our options. What we need is the presets, which is an array.

[02:11] Into that, we're going to say, "Yes, 2015 and React." From the result of that, we need code. What we're doing is we're saying window.babel transform our code using these presets, and then give us that code back.

[02:27] Assuming that doesn't fail, we're going to set our error to empty string. If it does fail, we're going to set our error to error.message.

[02:39] Let's go ahead and save that. See if we messed anything up. It's going to be a little hard to see here before we style it. I'm going to go ahead and create a div, close it. It looks like everything is working.

[02:52] Now, we need to create our style. Right here in source, I'm going to create a new file, app.css. We're going to import that into our component right here. After we import our React package, we're going to say import app.css, and we'll go ahead and start setting that up.

[03:09] On our body, we're going to have a margin of zero, a padding of zero. We're going to try to set everything up to be a font family of monospace.

[03:20] Our header, which is going to house our error, I'm going to say display block on that guy, give it a height of five viewport height units. Just in case our errors get long, we're going to say overflow auto. Give that a background color. I'm going to go with pink. We're going to give it a bit of color. Since it's an error, we'll make that red.

[03:43] I'm going to set up a font size of 28 pixels. We can see that there in the browser.

[03:51] Now, on our container, which holds our text area and our pre, we're going to have that take up the remaining viewport height, and we're going to set that to display with flex. We've got our pre, which is going to house our output. That's going to be the element down the right below the header. We're going to give that a light grey background, so we'll do F8.

[04:13] For our pre and our text area, give each of those a width of 50 percent. Use that monospace family. We'll have the font size match the header size, so 28 pixels.

[04:29] Give that a margin of zero, a padding of, let's go with 10. A color, something blackish. That's starting to come together.

[04:38] In OS X, we're going to get this outline here. Let's go ahead and get rid of that. We'll say text area focus outline zero. Let's blow this up. If we start typing here, let's say starting off our div, we haven't enclosed it. We are getting an error message.

[04:58] If I close that, we get a react.create element over on the right. Let's try a class name really quick. This seems to be working just fine.