PDF《1. 关於》

7 进阶使用 main.js import React from '

react'

;

import HelloWorld from '

./HelloWorld.js'

setInterval(() =>

{ React.render( HelloWorld date={new Date()} />

, document.getElementById('

example'

) );

}, 500);

HelloWorld.js import React from '

react'

;

export default React.createClass({ render: function() { return ( p>

Hello, ! It is {this.props.date.toTimeString()} p>

} });

webpack.config.js var path = require('

path'

);

module.exports = { entry: [ webpack/hot/dev-server , path.resolve(__dirname, '

app/main.js'

) ], output: { path: path.resolve(__dirname, '

build'

), filename: '

bundle.js'

}, module: { loaders: [{ test: /\.js$/, loaders: ['

babel'

] } };

打包的进入点是 app/main.js,透过 webpack 打包后会产生 build.js. webpack/hot/dev-server 是开发时用来执行 live-reload 功能. React 学习手册

8 进阶使用 index.html Hello React package.json { name : react-test , version : 0.0.0 , description : react test , scripts : { build : webpack , dev : webpack-dev-server --content-base build/ --hot }, devDependencies : { babel-core : ^5.8.3 , babel-loader : ^5.3.2 , webpack : ^1.10.3 , webpack-dev-server : ^1.10.1 }, dependencies : { react : ^0.13.3 } } npm run dev 可执行 scripts 中的 dev 指令. npm run build 可执行 scripts 中的 build 指令 webacpk 还提供许许多多开发时需要的 loader 及 plugin,详细请参阅官网文件.连结 其他: react-starter-kit es6features es7features 建立react webpack 工具包 使用 Webpack 建立 React 专案开发环境 React 学习手册

9 进阶使用 本章内容及图片参考 作者 Josh Haberman React Demystified 一文,以下将说明 React 运作的概念. 传统方法会用 native javascript 或是 jQuery 经由 dom 的事件监及节点操作来更新画面. 我们知道使用传统的方式对 dom 进行频繁异动查询与处理是很耗效能的行为,因此 React 设计了 Virtual Dom 这个中间层来降低 dom 操作的成本.React 本身在 Virtual Dom 的内部产生的一个类似实际 dom 节 点的树状结构,当有资料异动发成时会透过内部 diff 演算法计算最小实际节点的差异后才会实际的计算后 的结果更新的实际的节点上. 深入解析 traditional React React 学习手册

10 深入解析 React 的基本单元为元件,每个元件可以包含无限多的子元件,可以依照需求组装成一个组合式的元件, 因此具有关注点分离........