React
React
A JavaScript library for building user interfaces
Get Started Download React v0.14.3

Just the UI

很多人将React作为MVC中的V(视图)来使用. React不会对你的技术栈做任何假设, 所以React很容易作为一个很小的特性使用在一个已有的项目中.

Virtual DOM

React 让你以抽象的方式使用DOM,给你提供了一个简单的编程模式和更好的展示方式,React也提供了通过Node在服务器端渲染, 你也可以使用React Native开发Native AppsReact Native.

Data flow

React实现了单向数据流降低了样板,所以React比传统的方式更容易做数据绑定.

A Simple Component

React组件实现了render() 方法提供输入的数据并返回你要展示的信息, 这个例子使用一种叫做JSX的类XML语法.传递到该组件的数据,在render()方法中, 可以通过this.props来访问.

在使用React的时候,JSX并不是强制要求的,你可以选择性的使用 点击 "Compiled JS" 可以看到被JSX编译器编译后的代码.

Live JSX Editor
Compiled JS
 
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
 
ReactDOM.render(<HelloMessage name="John" />, mountNode);
 
 
Hello John

A Stateful Component

除了输入数据以外(通过this.props访问), 组件也可以保存内部状态数据(通过this.state访问). 当组件状态数据改变的时候, 将通过render()方法来重新渲染组件.

Live JSX Editor
Compiled JS
 
var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});
 
ReactDOM.render(<Timer />, mountNode);
 
 
Seconds Elapsed: 0

An Application

使用props and state, 我们可以创建一个小的ToDo应用程序. 这个例子使用state来跟踪当前的列表的所有项和用户输入的数据,尽管事件处理看起来呈现内联, 它们实际上是通过事件委托来实现的.

Live JSX Editor
Compiled JS
 
var TodoList = React.createClass({
  render: function() {
    var createItem = function(item) {
      return <li key={item.id}>{item.text}</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([{text: this.state.text, id: Date.now()}]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
 
ReactDOM.render(<TodoApp />, mountNode);
 
 

TODO

    A Component Using External Plugins

    React非常的灵活,React提供了钩子,允许你和其他的库或者框架一起使用,这个例子使用marked, 一个外部的Markdown库, 将文本区的值进行实时转换.

    Live JSX Editor
    Compiled JS
     
    var MarkdownEditor = React.createClass({
      getInitialState: function() {
        return {value: 'Type some *markdown* here!'};
      },
      handleChange: function() {
        this.setState({value: this.refs.textarea.value});
      },
      rawMarkup: function() {
        return { __html: marked(this.state.value, {sanitize: true}) };
      },
      render: function() {
        return (
          <div className="MarkdownEditor">
            <h3>Input</h3>
            <textarea
              onChange={this.handleChange}
              ref="textarea"
              defaultValue={this.state.value} />
            <h3>Output</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.rawMarkup()}
            />
          </div>
        );
      }
    });
     
    ReactDOM.render(<MarkdownEditor />, mountNode);
     
     

    Input

    Output

    Type some markdown here!

    Get Started Download React v0.14.3