React Tutorials

by niki4810

HTML

<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://rawgithub.com/josscrowcroft/accounting.js/master/accounting.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

/** @jsx React.DOM */

var EditorView = React.createClass({
    render : function(){
        var professional = this.props.model.professional === "true" ? true : false;
        return (
        <div className="well">
            <form role="form">
              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" className="form-control" placeholder="Name" onChange={this.props.onTextChange}/>
              </div>
              <div className="form-group">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" className="form-control" placeholder="email" onChange={this.props.onTextChange}/>
              </div>
              <div className="form-group">
                <label htmlFor="salary">Salary</label>
                <input type="text" name="salary" className="form-control" placeholder="salary" onChange={this.props.onTextChange}/>
              </div>   
              <div className="form-group">
                <label htmlFor="professional">Professional</label>
                <input type="checkbox" 
                       checked={professional}
                       name="professional" 
                       className="form-control" 
                       onChange={this.props.onCheckboxChange}/>
              </div>
              <div className="form-group">
                <label htmlFor="favSite">Fav Site</label>
                <input type="text" name="favSite" className="form-control" placeholder="for eg: www.walmart.com" onChange={this.props.onTextChange}/>
              </div>
            </form>
          </div>  
        );
    }
});

var PreviewView = React.createClass({
    render : function(){
        var model = this.props.model;
        return (
            <div className="well">
                <form role="form">
                    <div className="form-group">
                        <label htmlFor="name">Name</label>
  ...