react

react.js

// first component

var CommentBox = React.creatClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world!
      </div>
    );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

// JSX Syntax

var CommentBox = React.createClass({displayName: 'CommentBox', 
  render: function() {
    return (
      React.createElement('div', {className: 'commentBox'},
        'Hello, world.'
      )
    );
  }
});

React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
)


var CommentList = React.creatClass({
  render: function() {
    return (
      <div className="commentList">
        <comment author="pete hunt"></comment>
      </div>
    )
  }
})


var CommentBox = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: json,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return(
      <div className="commnetBox">
        <h1>comments</h1>
        <commentList data={this.state.data} />
      </div>
    )
  }
})

// tutorial15.js
var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = this.refs.author.getDOMNode().value.trim();
    var text = this.resf.text.getDomNode().value.trim();

    if (!author || !text) {
      return;
    }

    // TODO: send request to the server
    this.refs.author.getDOMNode().value = '';
    this.refs.text.getDOMNode().value = '';
  },

  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" />
        <input type="text" placeholder="Say something..." />
        <input type="submit" value="Post" />
      </form>
    );
  }
});


// API

React.createClass({})

createElement()

createFactory()

React.render(
  ReactElement element,
  DOMElement container
)

setState(object nextState)

replaceState

forceUpdate

getDOMNode()

isMounted

setProps()

replaceProps

statics:
allows you to define static methods that can be called on the component class
methods defined within this block are static, meaning that you can run them before
any component instaances are created, and the methods do not have access to the props
or state of your compontents. If you want to check the value of props in static method,
have the caller pass in the props as an argument to the static method.

displayName

lifecycle Method

clipboard events
keyboard events
focus events
form events
mouse
touch
ui
wheel


React Elements
four properties: type, props, key, ref


var React = require('react');
var requestAnimationFrame = require('./RequestAnimationFrame').requestAnimationFrame;
var cancelAnimationFrame  = require('./RequestAnimationFrame').cancelAnimationFrame;

modules.exports = React.createClass({

  getInitialState: function() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    };
  },

  componentDidMount: function() {
    this.setupTween();
  },

  componentDidUpdate: function() {
    if (prevProps.to != this.props.to) {
      this.setupTween();
    }
  },
})

virtual dom   diff

representing state adn changes


var Timer = React.createClass({

  // 构造函数
  getInitialState: function() {
    return {secondsElaspsed: 0}
  },

  tick: function() {
    this.setState({secondsElaspsed: this.state.secondsElapsed + 1})
  },

  // 组件添加时运行
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },

  // 组件删除时运行
  compontentWillUnmount: function() {
    clearInterval(this.interval);
  },

  render: function() {
    return (
      <div>seconds {this.state.secondsElapsed}</div>
    )
  }
});

app react dom


render
event loop
update minimally


var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items:[], text: ''}
  },

  onChange: function(e) {
    this.setState({text: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextItem = '';
    this.setState({items: nextItems, text: nextText});
  },

  render: function() {
    return (
      <div>
        <h3>to do </h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <buttom>{'Add #' + (this.state.items.length + 1)}</buttom>
        </form>
      </div>
    )
  }
});

React.renderComponent(
  <TodoApp />,
  mountNode
);

action dispatcher store view

dispatcher

dispatcher

dispatcher