React.js Bootstrap
HTML
<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<h3>In Raw HTML</h3>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only">Field 1</label>
<input class="form-control" placeholder="Field 1" />
</div>
<div class="form-group">
<label class="sr-only">Field 2</label>
<input class="form-control" placeholder="Field 2" />
</div>
<button type="submit" class="btn btn-primary">Apply</button>
<button type="button" class="btn">Reset</button>
</form>
<h3>In React Component</h3>
<div id="container"></div>
</div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
g/** @jsx React.DOM */
var App = React.createClass({
render: function() {
return (
<form className="form-inline" role="form">
<div className="form-group">
<label className="sr-only">Field 1</label>
<input className="form-control" placeholder="Field 1" />
</div>
<div className="form-group">
<label className="sr-only">Field 2</label>
<input className="form-control" placeholder="Field 2" />
</div>
<button type="submit" className="btn btn-primary">Apply</button>
<button type="button" className="btn">Reset</button>
</form>
);
}
});
React.renderComponent(<App />, document.getElementById('container'));