
上QQ阅读APP看书,第一时间看更新
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.
The only other attribute that is renamed because of these conflicts is for, which got renamed to htmlFor.