（持续更新中）

是什么

react 是 facebook 开源的一款前端组件解决方案。

下载

在主页下载最新版本。解压下载好的压缩包。

build
examples
README.md

build中是react的源文件，examples中是简单的示例，可以直接打开运行（部分需要 http server支持）。

examples

basic

直接双击打开 examples/basic/index.html

可以看到 react 的组件正常运行， 计时器在不停地跳动。

这里可以进入 index.html 中查看一下代码，有比较重要的几块，分别说明一下：

• 引入 react js

<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>

react.js 是 react 的核心库， react-dom.js 是和 dom 操作相关的库。 可以看出 facebook 在做 react 时遵循的风格 – 尽量将源码依照功能分割。或者说，让每一个js文件尽量独立（增强可复用性），将复杂功能分而治之（降低整体代码复杂度）。

这个例子中没有涉及到下面这个 js

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

babel 是编译 jsx 语法的库。jsx 看起像是单纯的 html 代码。 依靠 jsx，我们可以不用在 js 代码中使用

"<h1></h1>"

来定义 html，而是可以直接书写 html 结构。

• 定义组件

<script> var ExampleApplication = React.createClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.'; return React.DOM.p(null,message); } }); // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render var ExampleApplicationFactory = React.createFactory(ExampleApplication); var start = new Date().getTime(); setInterval(function() { ReactDOM.render( ExampleApplicationFactory({elapsed: new Date().getTime() - start}),document.getElementById('container') ); },50); </script>

解释一下，React.createClass 定义了一个组件类，其中， render的返回值就是组件的dom结构。

React.createFactory 为传入的组件类定义一个工厂方法，它能更具传入的参数，返回不同的组件对象。 这个，每一次传入的参数都是一个相对时间（当前时间 - 开始时间）。

ReactDOM.render，第一个参数是 react 组件对象，第二个参数是用于容纳组件的 dom 对象。这里采用原生 js 获取 dom 对象。 意在说明 react 不依赖任何第三方库。

使用 jsx

预编译 react 代码

使用 jsx 编写的代码必须先通过 babel 转化为可以在浏览器运行的 js，这一步通常会比较耗时间（相对原生js），react 官方推荐预编译 jsx 代码。