A Browserify Transform for react-jade.
$ npm install --save-dev react-jadeify
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
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 = 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'
React = require 'react'
template = require './templates/hello' # hello.rjade
reactElement = template data: 'hello react-jadeify world'
React.render reactElement, document.body
h1= data
doctype html
html
head
title hello react-jadeify
body
script(src="./app.js")
'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
InitCompornent(data=data)
h1= this.state.data + ' ' + localData + ' ' + this.props.data