React入门

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

一、JSX 语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。示例代码如下：

运行结果如图所示：

运行结果显示

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  

  {
    names.map(function (name) {
      return 
Hello, {name}!
    })
  }
  
,
  document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。示例代码如下：

运行结果如下所示：

运行结果显示

var arr = [
  
Hello world!
,
  
React is awesome
,
];
ReactDOM.render(
  
{arr}
,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板。

二、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。示例代码如下：

运行结果如下所示：

运行结果显示

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

ReactDOM.render(
  ,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

注意:

组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

var HelloMessage = React.createClass({
  render: function() {
    return 

      Hello {this.props.name}
    

      some text
    
;
  }
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 : ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

注意:

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

学习是一件很快乐的事，这种快乐来自于你的思考。完成一项学习任务固然重要，但更重要的是在完成的过程中学到了什么，掌握了什么，遇到一些什么问题，为什么会出现这种问题，根源是什么，都有哪些解决方案，什么样的情况适合这个方案。只有在不断的思考，你的能力才会有所提升！