0.1.3 • Published 7 years ago
react-jadeify v0.1.3
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