Black lives matter
Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “JavaScript for impatient programmers”
Book, exercises, quizzes
(free to read online)
Cover of book “Deep JavaScript”
Book (50% free online)
Cover of book “Tackling TypeScript”
Book (first part free online)
Logo of newsletter “ news”
Newsletter (free)

React JSX via ECMAScript 6 template strings

(Ad, please don’t block)

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`
                        defaultValue='${this.state.value}' />
    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:1] explains what a template handler is and how you can write one yourself.


  1. Template strings: embedded DSLs in ECMAScript 6 ↩︎ ↩︎