React is bundled with a Javascript transpiler called JSX. It gives the ability to write <html> tags within Javascript. The advertised way to use JSX is React.DOM to create React light DOM elements, but it is not the only way. We can create another JSX backend, called JSXDOM, to create real DOM elements.
Example
Here is an example (JSFiddle) of how the code looks like with JSX and JSXDOM:
/** @jsx JSXDOM */ var defaultValue = "Fill me ..."; document.body.appendChild( <div> <input type="text" value={defaultValue} /> <button onclick="alert('clicked!');">Click Me!</button> <ul> {['un', 'deux', 'trois'].map(function(number) { return <li>{number}</li>; })} </ul> </div> ); |
var defaultValue = "Fill me …";
document.body.appendChild(
<div>
<input type="text" value={defaultValue} />
<button onclick="alert(‘clicked!’);">Click Me!</button>
<ul>
{[‘un’, ‘deux’, ‘trois’].map(function(number) {
return <li>{number}</li>;
})}
</ul>
</div>
);
Advantages
There are many libs that attempt to do this in pure Javascript (dom-o, htmlr, ThinAir …) but none of them look like XML. With JSX, you can copy and paste HTML in your Javascript code and it works (if you close your tags).
The great benefit outside of looking like XML is interpolation. Anything you put inside of {} is a regular Javascript expression. This way you don’t need to learn yet another templating language.
var defaultValue = "Fill me ..."; <input type="text" value={defaultValue} /> |
It is useful for attributes but even more for children. You can create any array using Javascript functions such as map, filter, reduce, reverse … and pass it down to JSXDOM.
<ul> {['un', 'deux', 'trois'].map(function(number) { return <li>{number}</li>; })} </ul> |
Conclusion
JSX is a very exciting technology that, while being developed for React, can be used standalone and provide benefits on its own.