ReactJS 快速入门

React 是近期非常热门的一个前端开发框架。这篇文章将介绍如何使用 React 来创建用户界面，希望能够起到抛砖引玉的效果。

相对于其他框架来说，React 提供了非常少的 API，如同 Gulp，越是少量的 API 同时意味着越多的可能性。正如那句名言所说：

Less is more.

但是，精简的 API 不是意味着没有一定的学习成本，我们还是需要对此框架进行一定的理解。闲话不多说，让我们进入正题。首先，让我们来了解下 React 中使用到的一些术语。

React 术语

术语	解释
React Elements	代表 HTML 元素的 JavaScript 对象。这些 JavaScript 对象最后被编译成对应的 HTML 元素
Components	封装 React Elements，包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如分页，侧栏导航等
JSX	JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的，我们完全可以使用 JavaScript 来编写 React 应用，不过 JSX 提供了一套更为简便的方式来写 React 应用
Virtual DOM	Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上

DEMO 环境准备

首先，在 React Download 页面下载 Starter Kit，解压到某个地方。

进入到解压后的 build 目录，新建一个 index.html 文件，并且引用 react.js 和 JSXTransformer.js 后就可以开始编写 React 应用了。需要注意如果使用 JSX，那么 script 标签的 type 应该更改为 text/jsx。

<html>
  <head>
    <meta charset="utf-8" >
    <title>demo</title>
  </head>
  <body>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx" src="app.js"></script>
  </body>
</html>

第一个 React Element

创建一个 Element 只需调用 React.createElement 方法，并传入元素信息即可。例如：

var div = React.createElement('div', null, "Hello React");
// 使用 JSX
var div = <div>Hello React</div>

创建之后就可以调用 React.render 方法渲染到页面上：

1	React.render(div, document.body);

第一个 React Component

React Component 抽象出相同 UI 组件的结构和逻辑。通过调用 React.createClass 方法来创建一个 Component，并传入一个带有 render 方法的对象类型的参数。

var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});
React.render(<HelloMessage name="iissnan" />, document.body);

我们看到 React.createClass 接收了一个对象，并将这个方法返回赋值给 HelloMessage，最后调用 React.render 方法将这个新建的 Component 渲染到页面上。从这个例子看来，一个 Component 与 Element 并无太大的差别。事实上， Component 已经准备好了，我们可以增添一些结构和功能来扩展这个 Component 。

Props

在上一个例子中，可以看到有一个特殊的引用： this.props.name。这个引用称之为 Props，可以将他想象成 Component 的设置选项。

在使用上， Props 类似于 HTML 中的属性：

1	React.render(<HelloMessage name="foo" />, document.body);

在 Component 内部，通过 this.props.name 来引用这个 Props：

var HelloMessage = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});

需要注意的是， Props 仅用来定制 Component，这些数据不应该被改动。如果涉及到需要做改动的数据，得考虑使用 state。

Stateful Component

State 数据代表 Component 的状态，用于维护 Component 内部的状态。当 State 发生改变之后， React 将会重新渲染 UI 。调用与 Props 类似， State 数据通过 this.state 访问：

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});
React.render(<Greeting name="foo" />, document.body);

这个例子中加了几个函数，我们一一来看下。首先是 getInitialState ，这个方法在 Component 初始化的时候被调用，返回 Component 初始时的状态数据。例子中，我们设置了 Component 初始时的 greeted 为 false。
然后是 greet 方法，这个方法被调用之后将修改状态数据 greeted 为 true。

当 State 发生改变后， React 将 Component 渲染到 Virtual DOM，新的 Virtual DOM 与旧版本的进行比对，检查出改变的部分并更新浏览器的 DOM。在这个例子中，当按钮被点击后， greeted状态数据发生了变化，UI 跟随着更新。

组合

结合 Props 和 State，我们就可以使用 Component 来创建完整的应用。

var Greeting = React.createClass({
  getInitialState: function () {
    return { greeted: false };
  },
  greet: function () {
    this.setState({
      greeted: true
    });
  },
  render: function () {
    var response = this.state.greeted ? 'Hi' : '';
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <span>{response}</span>
        <button onClick={this.greet}>Hi</button>
      </div>
    );
  }
});
var users = ["foo", "bar", "baz"];
var GreetingApp = React.createClass({
  render: function () {
    var greetings = this.props.users.map(function (user) {
      return <Greeting name={user} />;
    });
    return <div>{greetings}</div>;
  }
});
React.render(<GreetingApp users={users} />, document.body);