react-jade
Compile Jade to React JavaScript
Installation
npm install react-jade
Usage
With Browserify
If you are using browserify, just write a file that looks like the following, then use react-jade
as a transform. It will then inline the result of calling jade.compileFile
automatically.
var React = ;var jade = ; var template = jade; React;
browserify index.js --transform react-jade > bundle.js
Without Browserify
If you are not using browserify, you could manually compile the jade to some client file. e.g.
var fs = ;var jade = ; fs;
Then on your html page:
Server Side
You can also use react-jade to render templates on the server side via React.renderToString
. This is especially useful for building isomorphic applications (i.e. applications that run the same on the server side and client side).
var fs = ;var React = ;var jade = ; var template = jade; var html = React;fs;
ES6
If you are using ES6 server side, or the browserify transform client side (even without any other ES6 support), you can use Tagged Literals to embed your jade code directly within your JavaScript components:
var TodoList = React;var TodoApp = React;React;
API
var jade = ;
jade(options) / jade(file)
Acts as a browserify transform to inline calls to jade.compileFile
. The source code looks something like:
{ { return ; //stream to do the transform implemented here } if typeof options === 'string' var file = options; options = arguments2 || {}; return ; else return transform; }
jade.compileFile(filename, options) => fn
Compile a jade file into a function that takes locals and returns a React DOM node.
jade.compileFileClient(filename, options)
Compile a jade file into the source code for a function that takes locals and returns a React DOM node. The result requires either a global 'React' variable, or the ability to require 'React' as a CommonJS module.
jade.compile(jadeString, options) => fn
Same as jade.compileFile
except you pass an inline jade string instead of a filename. You should set options.filename
manually.
jade.compileClient(jadeString, options)
Same as jade.compileFileClient
except you pass an inline jade string instead of a filename. You should set options.filename
manually.
template.locals(locals)
You can set default locals
values via the template.locals
api. e.g.
var React = ;var jade = ; var template = jade; React;
Differences from jade
React Jade has a few bonus features, that are not part of Jade.
on
functions
Automatic partial application of In react, you add event listeners by setting attributes, e.g. onClick
. For example:
button(onClick=clicked) Click Me!
var fn = jade;React
Often, you may want to partially apply a function, e.g.
input(value=view.text onChange=view.setProperty.bind(view, 'text'))
{}Viewprototype { thisname = etargetvalue; ;};var view = ; { React;}
Because you so often want that .bind
syntax, and it gets pretty long and cumbersome to write, react-jade lets you omit it:
input(value=view.text onChange=view.setProperty('text'))
This is then automatically re-written to do the .bind
for you.
Style
In keeping with React, the style attribute should be an object, not a string. e.g.
div(style={background: 'blue'})
valueLink
The valueLink
property supports two way binding to this.state.name
by default. e.g.
input(valueLink=this.state.name)
is eqivalent to:
input(valueLink={value: this.state.name,requestChange:function(v){ this.setState({name:v})}.bind(this)})
This makes building simple forms where each input should use a property of the state very easy.
Unsupported Features
Although a lot of jade just works, there are still some features that have yet to be implemented. Here is a list of known missing features, in order of priority for adding them. Pull requests welcome:
- mixins
- attribute extension/merging (via
&attributes
) - case/when
- using each to iterate over keys of an object (rather than over items in an array)
- interpolation
- attribute interpollation
- special handling of data-attributes
- outputting unescaped html results in an extra wrapper div and doesn't work for attributes
License
MIT