Rendering with JSX

You might be thinking that for more complex user interfaces, you will have to use React.createElement a lot, which would be messy. React provides a JavaScript extension called JSX, which allows you to describe React components with HTML-like syntax. Remember the h1 element we created earlier?

React.createElement('h1', {}, 'hello world!')

With JSX, it would look like this:

<h1>hello world!</h1>

JSX is an HTML-like syntax, but not exactly HTML. You have to be careful in some cases because the attributes are named after the DOM property names. For example, you cannot write:

<h1 class="title">hello world!</h1>

You have to use className instead because that is the name of the DOM property:

<h1 className="title">hello world!</h1>

Thankfully, most HTML attributes have the same name as their DOM properties. class is special because it is a reserved keyword in the JavaScript language.