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="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

/** @jsx React.DOM */

var HelloWorld = React.createClass({
    render : function(){
        return (
            <div>
                <p> Hello {this.props.name}, the current time is {this.props.time.toTimeString()}</p>
            </div>
        );
    }
});


var LikeButton = React.createClass({
    getInitialState : function(){
        return {liked: true};
    },
    handleChangeStatus : function(e){
        e.preventDefault();
        this.setState({liked : !this.state.liked});
    },
    render : function(){
        var status = this.state.liked ? 'liked' : 'unliked';
        return (
            <a onClick={this.handleChangeStatus} href="#">You {status} this. Click to toggle your status</a>
        );
    }
});


var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'http://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

var ProfilePic = React.createClass({
    render : function(){
        return (
            <img src={'http://graph.facebook.com/' + this.props.username + '/picture'}/>        
        );
    }
});

var Avatar = React.createClass({
    render :function(){
        return (
        <div>
            <ProfilePic username={this.props.username} />
            <ProfileLink username={this.props.username} />
        </div>
        );
    }
});

var CheckLink = React.createClass({
  render: function() {
    // transferPropsTo() will take any props passed to CheckLink
    // and copy them to <a>
    return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
  }
});


var EditorView = React.createClass({
    render : function(){
        return (
        <div className="well">
            <form role="form">
              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input type="text" ref="name" className="form-control" placeholder="Name"/>
              </div>
              <div className="form-group">
      ...