Precompile JSX

Hey, guys. In this video, we're going to talk about precompiling our JSX and why you may or may not want to use JSX in your React application. Here on the left, I've got a very simple, stateless function component. Just returning a div with an innerHTML of Hello. Of course, this is in JSX.

Now, what I'm going to use to transpile that is something called Babel CLI. You npm install babel-cli. Tack G on that guy to make it global. I've already got that installed of course. To run this, I'm going to say Babel. I'm going to pass in a preset slug with React.

Now, you'll notice I'm not transpiling from ES6 to ES5 because I want us to be able to look at the ES6 version both ways. I'm going to pass in our source of JS. I'm going to tack on an output of dist.js which is the file I have open in this right window.

I'm going to go ahead and tell it to watch. It will watch our source file and then keep generating our dist file every time we make a change. Let's get that guy running.

Here is our output code. Of course, it's using react.create element rather than JSX. If I make a change over here and save it, we should see that change reflected pretty much immediately. There we go.

When you're developing with React, you actually have the choice. It's totally up to you whether you want to use react.create element or JSX. My personal opinion is that if your React component is very simple and you're not dealing with a large amount of HTML, skip JSX entirely and just use react.create element. You don't need to worry about transpiling.

However, as things get more complicated, I certainly feel that JSX gives us a huge benefit, saves us a lot of time. What we're going to do to illustrate that is here in my div, I'm going to create something arbitrarily complex so that we're going to have a Thead, TR. Let's wrap a T. Sorry, this should be a TH. There, we'll just say, "heading." Do that three times.

Then, we'll wrap up this entire head. We'll do Tbody, TR, TD. Drop a form in there for good measure. Go ahead and render that out. Save it. We can see on the right here, our non-JSX version of our component has gotten pretty complex.

Granted, I've got the font blown up here and everything. We could compress this a little bit. What's happening is it's getting very, very tricky to figure out exactly where we are.

For example on this TR, if I want to add an ID of the row, save that. We can see that was added here. However, if we wanted to do that manually, we would certainly spend a good amount of time hunting around for the particular table row where we want to add that ID.

One other benefit of this is that if you're working with a designer, you can get some HTML from them. We can drop that right in here and automatically have that transpiled to the react.create element syntax.

However, again, it's completely a preference. It's totally your option, but that would be my argument for using JSX.