01.快速开始

导论

基本的React的页面形式如下所示:

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      // ** Our code goes here! **
    </script>
  </body>
</html>

React独创了一种JSCSSHTML混写的JSX格式,可以通过在页面中引入JSXTransformer这个文件进行客户端的编译,不过还是推荐在 服务端编译。

const HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.render(
  <HelloMessage name="John" />,
  document.getElementById("container")
);

React.renderReact的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。要注意的是,React的渲染函数并不是简单地把HTML元素复制到页面上,而是维护了一张Virtual Dom映射表。

class ExampleComponent extends React.Component {
  constructor() {
    super();
    this._handleClick = this._handleClick.bind(this);
    this.state = Store.getState();
  } // ...
}

在对于React的基本语法有了了解之后,下面我们会开始进行快速地环境搭建与实验。