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.
 
  • Jeremy

    more more more more info!

  • Troy Gardner

    Doesn't this bypass one of the primary reason's to use React, meaning it's internal dom? to avoid unnecessary updates of the DOM?

  • johndurbinn

    Bro, jsx desugars to javascript expressions which eventually get built into the virtual DOM at runtime

 

Related Posts

  • October 12, 2011 -- Intercept and alter <script> include (0)
    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 using XHR....
  • September 17, 2011 -- WoW Interface Anchor Positioning (5)
    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 to be, rel...
  • August 23, 2011 -- Javascript – Hook Technique (4)
    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 Lua and XM...
  • February 23, 2012 -- Dassault Systemes Javascript Evangelism Talk (0)
    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 second part s...
  • September 22, 2011 -- URLON: URL Object Notation (42)
    #json, #urlon, #rison { width: 100%; font-size: 12px; padding: 5px; height: 18px; color: #560061; } I am in the process of rewriting MMO-Champion Tables and I want a generic way to manage the hash part of the URL (#table__search_results_item=4%3A-slot). I no longer want to wr...