(持续更新中)
是什么@H_301_4@
react 是 facebook 开源的一款前端组件解决方案。
下载@H_301_4@
在主页下载最新版本。解压下载好的压缩包。
build
examples
README.md
build中是react的源文件,examples中是简单的示例,可以直接打开运行(部分需要 http server支持)。
examples@H_301_4@
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 代码。