<commit_before># react-jade

Compile Jade to React JavaScript

[![Build Status](https://img.shields.io/travis/jadejs/react-jade/master.svg)](https://travis-ci.org/jadejs/react-jade)
[![Dependency Status](https://img.shields.io/gemnasium/jadejs/react-jade.svg)](https://gemnasium.com/jadejs/react-jade)
[![NPM version](https://img.shields.io/npm/v/react-jade.svg)](https://www.npmjs.org/package/react-jade)

## 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.

```js
var React = require('react');
var jade = require('react-jade');

var template = jade.compileFile(__dirname + '/template.jade');

React.render(template({local: 'values'}), document.getElementById('container'));
```

```
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.

```js
var fs = require('fs');
var jade = require('react-jade');

fs.writeFileSync(__dirname + '/template.js', 'var template = ' + jade.compileFileClient(__dirname + '/template.jade'));
```

Then on your html page:

```html
<div id="container"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="template.js"></script>
<script>
  React.render(template({local: 'values'}), document.getElementById('container'));
</script>
```

### 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).

```js
var fs = require('fs');
var React = require('react');
var jade = require('react-jade');

var template = jade.compileFile(__dirname + '/template.jade');

var html = React.renderToString(template({local: 'values'}));
fs.writeFileSync(__dirname + '/template.html', html);
```

### 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:

```js
var TodoList = React.createClass({
  render: jade`
ul
  - each item in this.props.items
    li= item
`
});
var TodoApp = React.createClass({
  getInitialState: function() {<commit_msg>Fix typo in example on readme<commit_after># react-jade

Compile Jade to React JavaScript

[![Build Status](https://img.shields.io/travis/jadejs/react-jade/master.svg)](https://travis-ci.org/jadejs/react-jade)
[![Dependency Status](https://img.shields.io/gemnasium/jadejs/react-jade.svg)](https://gemnasium.com/jadejs/react-jade)
[![NPM version](https://img.shields.io/npm/v/react-jade.svg)](https://www.npmjs.org/package/react-jade)

## 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.

```js
var React = require('react');
var jade = require('react-jade');

var template = jade.compileFile(__dirname + '/template.jade');

React.render(template({local: 'values'}), document.getElementById('container'));
```

```
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.

```js
var fs = require('fs');
var jade = require('react-jade');

fs.writeFileSync(__dirname + '/template.js', 'var template = ' + jade.compileFileClient(__dirname + '/template.jade'));
```

Then on your html page:

```html
<div id="container"></div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="template.js"></script>
<script>
  React.render(template({local: 'values'}), document.getElementById('container'));
</script>
```

### 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).

```js
var fs = require('fs');
var React = require('react');
var jade = require('react-jade');

var template = jade.compileFile(__dirname + '/template.jade');

var html = React.renderToString(template({local: 'values'}));
fs.writeFileSync(__dirname + '/template.html', html);
```

### 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:

```js
var TodoList = React.createClass({
  render: jade`
ul
  each item in this.props.items
    li= item
`
});
var TodoApp = React.createClass({
  getInitialState: function() {
{'fraction_non_alphanumeric': 0.15171717171717172, 'fraction_numerical': 0.0028282828282828283, 'mean_word_length': 4.894047619047619, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4950768', 'n_tokens_mistral': 1575, 'n_tokens_neox': 1534, 'n_words': 463}