babel-plugin-jsx-factory
Use jsx
with a factory function h
matching this signature:
For a string tagName
, attributes
object, and an array of children
.
browserify virtual-dom example
Write some code with inline jsx and a virtual dom factory function, in our case
h
:
var h = require('virtual-dom/h');
var main = require('main-loop');
var loop = main({ n: 0 }, render, require('virtual-dom'));
function render (state) {
return <div>
<h1>clicked {String(state.n)} times</h1>
<button onclick={onclick}>click me!</button>
</div>
function onclick () {
loop.update({ n: state.n + 1 })
}
}
Then make a package.json:
To build:
$ browserify main.js > public/bundle.js
browserify react example
var React = require('react')
var App = React.createClass({
getInitialState: function () { return { n: 0 } },
render: function () {
return <div>
<h1>clicked {this.state.n} times</h1>
<button onClick={this.handleClick}>click me!</button>
</div>
},
handleClick: function () {
this.setState({ n: this.state.n + 1 })
}
})
React.render(<App />, document.querySelector('#content'))
Then make a package.json:
To build:
$ browserify main.js > public/bundle.js
license
MIT