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()
.pipesource'app.js'
.pipegulp.dest'./build'

app.coffee

React=require'react'template=require'./templates/hello'# hello.rjadereactElement=templatedata:'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.rjaderootTemplate=require'./templates/root'# root.rjadeRootCompornent=React.createClassgetInitialState:->'data':'hello'render:rootTemplate.localslocalData:'react-jadeify'React.renderinitTemplate(InitCompornent: RootCompornent, data:'world'), document.body

init.rjade

InitCompornent(data=data)

root.rjade

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