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