ReactJS 快速入门
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。感兴趣的可以参考学习下。
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 上。
JSX.主要的目标是提供一个能表示 React 内部的 DOM 的符合直觉的语法糖,
这套内部的 DOM 被 React components 所使用, 是构建 React 应用的城砖.
React 关于 JSX 的官方教程 上其他的用法也很好懂.
你的应用里使用 JSX 有多重方法, 但最终 JSX 代码会被编译到平常的 JavaScript.
第一种, 也是最简单的一种办法, 是引入 React 的 JSXTransformer.js 文件,
这个文件提供了将标记了 JSX 的 JavaScript 代码编译到普通 JavaScript 的方法.
我更喜欢第二种, 就是预先编译好 JSX 代码.
这个通过 React 的 JSX 命令行工具做起来最简单:
$ npm install -g react-tools $ cd project/ $ jsx --watch src/ build/
这样以后, 使用 JSX 只要在你的 HTML 文件中引用 build/whatever.js就好了.
开始运行
搞清楚你想用哪一种处理 JSX 的方案以后, 运行 React 就很平常了.
直接下载 react.js (或者指向 cdn), 再引用对应文件到 HTML 文档的头部:
<html> <head> <script src="react.js"></script> ... </head> <body> ... <script src="mine.js"></script> </body> </html>
React 不依赖第三方的类库(比如 jQuery), 所以不用去担心.
只是, 要注意在文档内容加载完成的位置引用你自己的代码文件.
Components: React 的城砖
React 当中, components 是构建应用核心的城砖.
component 是各自独立的, 模块化, 在应用当中是动态的 HTML 的表示.
component 经常会是其他 React component 的子模块.
这在下面的文本当中更明确:
/** @jsx React.DOM */
var Thing = React.createClass({
render: function() {
return (
<p>{this.props.name}</p>
);
}
});
var ThingList = React.createClass({
render: function() {
return (
<h1>My Things:</h1>
,
<Thing name="Hello World!" />
);
}
});
React.renderComponent(
<ThingList />,
document.querySelector('body')
);
这个例子里, renderComponent 把一个 component 渲染到给定的 DOM 节点, 启动应用.
如果这是你第一次接触 React, 其他一些东西会让你感到非常奇怪.
这是把 HTML.. 写在 JavaScript 里了?
不完全是. 你看到的是 JSX 的样子, 这几行看着像 HTML, 实际上不代表 DOM 节点.
实际上, 他们只是语法糖, 表示 React 内部的 DOM, 其中也包含了你前面定义的那些.
花括号里的代码在语法当中被"转义"了.
来看一下预编译后的 ThingList class:
var ThingList = React.createClass({displayName: 'ThingList',
render: function() {
return (
React.DOM.h1(null, "My Things:"),
Thing( {name:"Hello World!"} )
);
}
});
如果这个版本对你来说更有意义, 那可以说达到预期了.
我刚用 React 的时候, 我非常看不惯 HTML 式的语法.
然而当你的应用一步步变得复杂起来, 你会开始很奇妙地赞赏 JSX 语法了. 比如:
var ComplexThing = React.createClass({
render: function() {
return (
<div className="complexThing">
<Thing name="thing one" />
<Thing name="thing two" />
</div>
,
<a href="back.html">Go Back</a>
);
}
});
// 对比下面, 非 JSX 的版本:
var ComplexThing = React.createClass({displayName: 'ComplexThing',
render: function() {
return (
React.DOM.div( {className:"complexThing"},
Thing( {name:"thing one"} ),
Thing( {name:"thing two"} )
),
React.DOM.a( {href:"back.html"}, "Go Back")
);
}
});
Components 和 State
我前面的例子你可能已经注意到陌生的内容了 this.props.name.props 是哪里来的? 用来做什么?
每个 React component 都接收传入的属性, 定义在特定 component 实例上的不可变信息.
你可以把 this.props 想象成被传入函数当中的参数.
但是, 因为他们是不可变的, component 被渲染后这些属性就不能被改变了.
然后 state 根据需要被引入了.
出了上边不可变的属性, React 还有个私有属性 this.state.
当 state 被更新, component 就自动刷新渲染.
/** @jsx React.DOM */
var StatefulThing = React.createClass({
updateName: function(event) {
event.preventDefault();
this.state.name = "Taylor";
},
setInitialState: function() {
return (
{name: "World"}
);
},
render: function() {
return (
<a href="#" onClick={this.updateName}>
My name is {this.state.name}
</a>
);
}
});
React 用驼峰命名法来绑定事件 handler, 用这个函数来处理 event.
有一点注意一下, 目前我们看到所有的例子都没有对你的应用的其他部分做什么设定.
React 仅仅是一个前端开发框架. 跟 Backbone.js 那样的框架不同,
React 希望你自己处理跟服务器获取和发送数据的工作.
这使得 React 作为一个前端的解决方案很好部署, 因为它仅仅要求你给它传入数据.
React 会自己完成其他工作.
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 方法渲染到页面上：
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 中的属性：
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);