学习React

文章来源 阮一峰：http://www.ruanyifeng.com/blog/2015/03/react.html

步骤：
1.下载包：https://github.com/ruanyf/react-demos
2.学习每个demo文件的index.html

一、HTML 模板
使用 React 的网页源码，结构大致如下。

// * Our code goes here! *

注意：首先加载三个js文件，其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。（Browser.js 用来解析 script 的type 是babel的语法）

二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(

Hello, world!

,
document.getElementById(‘example’)
);

这里有几个注意点：（1），render（）括号里面的内容，必须加,逗号，例如h1后面跟了,逗号
（2），ReactDOM.render 的大小写，注意不要写错
（3），如果需要在h1标签内写样式的话，必须这样写，例如：

Hello, world!

即 style后面跟两个花括号，然后里面的属性值需要跟引号

三、JSX 语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。

var names = [‘Alice’, ‘Emily’, ‘Kate’];

ReactDOM.render(

{
names.map(function (name) {
return

Hello, {name}!

})
}

,
document.getElementById(‘example’)
);
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

注意，这里需要return

var arr = [

Hello world!

,

React is awesome

,
];
ReactDOM.render(

{arr}

,
document.getElementById(‘example’)
);

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

四、组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（注意，组件类的第一个字母必须大写，否则会报错）

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

Hello {this.props.name}

;
}
});

ReactDOM.render(
,
document.getElementById(‘example’)
);