react-jadeify

A Browserify Transform for react-jade.

Install

$ npm install --save-dev react-jadeify

Usage

Must use .rjade extention because some people (include me) want to use .jade extention for jade or jadeify. Can use .rjade and .react.jade extentions as default. And you can change extentions by option

option

extentions

can set String or Array

browserify
  extensions: ['.jade']
  transform: [
    [
      'react-jadeify'
      {extensions: '.jade'}
    ]
  ]

browserify
  extensions: ['.jade', '.react.jade']
  transform: [
    [
      'react-jadeify'
      {extensions: ['.jade', '.react.jade']}
    ]
  ]
  

gulp

gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'

gulp.task 'browserify', ->
  browserify
    entries: ['./src/app.coffee']
    extensions: ['.coffee', '.rjade']
    transform: ['coffeeify', 'react-jadeify']
  .bundle()
  .pipe source 'app.js'
  .pipe gulp.dest './build'

app.coffee

React = require 'react'
template = require './templates/hello' # hello.rjade

reactElement = template data: 'hello react-jadeify world'
React.render reactElement, document.body

hello.rjade

h1= data

index.jade

doctype html
html
  head
    title hello react-jadeify
  body
    script(src="./app.js")

A Little Bit More Practical Example

app.coffee

'use strict'
React = require 'react'

initTemplate = require './templates/init' # init.rjade
rootTemplate = require './templates/root' # root.rjade

RootCompornent = React.createClass
  getInitialState: -> 'data': 'hello'
  render: rootTemplate.locals localData: 'react-jadeify'

React.render initTemplate(InitCompornent: RootCompornent, data: 'world'), document.body

init.rjade

InitCompornent(data=data)

root.rjade

h1= this.state.data + ' ' + localData + ' ' + this.props.data