ForbesLindesay/react-jade — pull request #22 by ForbesLindesay (2014-10-02 13:55:42+00:00)
Title: Template literals

This lets you inline your jade, making it easier to build components:

```js

var TodoList = React.createClass({
render: jade`
ul
each item in this.props.items
`
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: jade`
h3 TODO
TodoList(items=this.state.items)
form(onSubmit=this.handleSubmit)
input(onChange=this.onChange value=this.state.text)
button= 'Add #' + (this.state.items.length + 1)
`.locals({TodoList: TodoList})
});
React.renderComponent(TodoApp(), mountNode);
```

Unlike JSX though, this is using fully standards compliant JavaScript, so it will work server side without compilation (in an environment that supports ES6) and will be well supported by tooling (although it looks like GitHub's syntax highlighter hasn't quite caught up yet)