React JSX via ECMAScript 6 template strings

Facebook’s React has an optional language extension that enables you to embed HTML inside JavaScript. This extension can make your code more concise, but it also breaks compatibility with the rest of the JavaScript ecosystem. ECMAScript 6 will have template strings [1], which enable you to implement JSX (or something close to it) inside the language. Jonathan Raphaelson has done so and the result looks as follows.

    define(function(require) {
        ...
        var EchoComponent = React.createClass({
            ...
            render: function() {
                return jsx`
                    <div>
                        <input 
                            ref='input' 
                            onChange='${this.handleChange}' 
                            defaultValue='${this.state.value}' />
                        ${this.state.value}
                    </div>
                `;
            }
        });
        return function() {
            var comp = jsx`<${EchoComponent} />`;
            React.renderComponent(comp, document.body);
        };
    });

More information:

• You can check out the full example and the implementation of the template handler jsx on GitHub.


• [1] explains what a template handler is and how you can write one yourself.

Reference:

1. Template strings: embedded DSLs in ECMAScript 6