We could describe our application's UI by using the React.createElement

method over and over again, it really is possible to do.

However, it's not convenient.

It's a lot of extra typing, and all of those React.createElement calls make

things pretty confusing, especially when working with larger apps.

This is where JSX comes in.

JSX is an extension to the to the JavaScript language

that uses mark-up-like syntax to create React elements.

Most React developers write their UI was JSX,

because as you'll see, it resembles writing HTML.

Now that you've gained an understanding of the React.element API,

I'll teach you how JSX is a simple abstraction on top of it.

So let's start by converting our createElement calls for

title and desk to JSX.

First, I'll replace the titles React.createElement function

with opening and closing h1 tags, and

the text My First React Element.

Then, replace React.createElement in the description with a set of p tags and

the text, I just learned how to create a React node and render it into the DOM.

Now, this isn't really HTML that we're writing,or actual JavaScript syntax.

This is JSX, a syntax extension to JavaScript, and

you're going to use it a lot while working with React.

So let's save up that desc and

head over to the console, refresh and notice how we get a syntax error.

JSX is not valid JavaScript, so the browser cannot interpret it.

To create React elements with JSX,

it needs to be transfiled into react.createElement calls.

We can use the Babel compiler to do this.

Normally during development, you'd have a build system set up with Babel in

a tool-like web pack to automatically process your JavaScript files.

For instance, the tool create app provides a built system out of the box to do this.

But it's also possible to use bubble directly in the browser via a script tag.

And index.HTML, I'll add a script tag that points to Babel stand alone and

you can copy the script tag from the teachers notes with this video.

This is going to allow us to use JSX without a built step.

Now, there's one more thing we need to do in order for babel to work in the browser.

In the script tag to our app.js file, add the type text/babel.

This signals to the babel script that the JavaScript and

app.js should be complied before being executed.

I'll give this file a save and over in the console once I refresh,

the error goes away.

And the same elements are displayed on the page.

You have a header, with the child h1 and p elements.

Keep in mind that in production you would not use this text/babel type attribute.

Most likely your code would already be recompiled using babel and

a build tool like webpack before serving it to the browser.

Now JSX still produces objects that describe a DOM node.

For example, if I console/log(title), notice how

it's still the same object describing the h1 element like we saw earlier.

To demonstrate, I'll bring up the online Babel compiler or repl so

you can see how JSX gets to convert it to JavaScript.

I'll simply copy the title and desc variables from app.js and

paste them into this left panel.

Over in the right panel, we see that babel converts the JSX

into React.create element calls just like we wrote earlier.

So this should look a familiar to you.

During this course feel free at any time to copy and paste parts of your React code

into this online compiler to check out and learn what's happening under the hood.