JSX for the real DOM

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>
);

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.

If you liked this article, you might be interested in my Twitter feed as well.
 
 

Related Posts

  • October 12, 2011 Intercept and alter <script> include (3)
    For a project, I want to transparently be able to intercept all the included javascript files, edit the AST and eval it. This way I can manipulate all the code of an application just by inserting a custom script. Hook the <script> tag insertion. Download the Javascript file […]
  • September 17, 2011 WoW Interface Anchor Positioning (10)
    I've always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors. Anchor The concept is extremely simple. You can tell where you want the element […]
  • August 23, 2011 Javascript – Hook Technique (8)
    Let's go back 5 years ago during the World of Warcraft beta. I was working on Cosmos UI, a projects that aimed to improve the World of Warcraft interface. As interface modification was not officially supported by Blizzard, we went ahead and directly modify the game files written in […]
  • February 23, 2012 Dassault Systemes Javascript Evangelism Talk (5)
    I recently had the chance to do a 2-hour Javascript evangelism talk at Dassault Systèmes. Unfortunately the presentation has not been recorded. I reused my the presentation I did at EPITA at the beginning and added a second part with a lot of demos. I've written down notes about the […]
  • August 19, 2011 Javascript – Stupid Idea: Hoisting at the end (133)
    JSLint imposes us to do manual hoisting of variables. What if we did it but at the end of the function? :P How you write function print_array (array) { var length = array.length; for (var i = 0; i < length; ++i) { var elem = array[i]; console.log(elem); […]