Creating React Nodes With JSX

Go through the previous chapter you should be familiar with creating React nodes using the React.createElement() function. Below I use this familiar function to create one React nodes:

//React node, which represents an actual HTML DOM node
var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');

To use JSX instead (assuming you have Babel setup) of React.createElement() to create these React nodes one just has to replace React.createElement() function calls with the HTML/XML like tags which represent the HTML you’d like the virtual DOM to spit out. The above code can be written in JSX like so:

//React node, which represents an actual HTML DOM node
var HTMLOption = <option value="1">one</option>;

Notice that the JSX is not in a JavaScript string format and can just be writing as if you are writing it inside of an .html file.

JSX is transformed back into the React.createElement() functions calls by Babel. You can see the transformation below:

See the Pen odJLPe by Bunlong (@Bunlong) on CodePen.

HTML produced in the above CodePen it would look like so:

<body>
  <div id="app"><option value="1" data-reactid=".0">one</li></div>
</body>

Creating React nodes using JSX is as simple as writing HTML like code in your JavaScript files.

Note:

  • The class attribute has to be written className
  • The for attribute has to be written htmlFor
  • The style attribute takes an object of camel-cased style properties
  • All attributes are camel-cased (e.g. accept-charset is written as acceptCharset)

Updated: