PDF《1. 关於》

1.

关於 2. 基本介绍 3. 基本使用 4. 进阶使用 5. 深入解析 6. 元件介绍 7. 元件使用 8. Dom 操作 9. 元件生命周期 10. Flux 目录 React 学习手册

2 本书以 React 文件指南为基础,依照个人学习过程逐步完成学习手册的内容大纲. 所有学习资源取自网路,依自身研究整理成这份文件,若有任何侵权行为或内容错误,烦请透过信箱告 知,本人会以最快的时间修正. 若者发现任何问题或是有其他内容建议加入,也可透过信箱反应. reactTW reactTW-v1 reactTW-v2 Leo Chen [email protected] React 学习手册 声明 问题与建议 资源 reactTW 作者 React 学习手册

3 关於 一种很夯的 Javascript library MVC 模式中的 View 被设计用来建构资料异动频繁的大型应用程式 简单 当资料发生异动时,React 自动化协调画面的更新. React 设计上具有封装、复用、测试、关注点分离的特性,建立可重复使用的元件 (components) . 概念上有别於传统的网页技术,若有兴趣可参考此 连结 参考此 连结 可以了解更多 React 技术. React 官方声明目前支援 ie

8 以上及现代主流的浏览器,不过有些旧式浏览器(IE 8...) 需额外透过 polyfill 的方式取得 React 所需的 javascript 方法. 相关议题请参考官网说明.连结 React 是什麽? Simple Declarative Build Composable Components Give It Five Minutes Learn More browser support &

polyfills React 学习手册

4 基本介绍 本节使用 React 官网例,可快速清楚 React 简约的使用方法. 建立一个 index.html,并引入 React 相关连结. Hello React Your code goes here! ** 使用 JSX 语法建立 Hello World var HelloWorld = React.createClass({ render: function() { return ( Hello, ! It is {this.props.date.toTimeString()} );

} });

setInterval(function() { React.render( , document.getElementById('

example'

) );

}, 500);

使用 React.js 及 JSXTransformer.js,每500毫秒刷新 UI 内容. react: 主要 React Library JSXTransformer: JSX 语法转换器 基本使用 Getting Started React 学习手册

5 基本使用 JSX 类似 HTML 语法,用来简化 React 应用程式的开发.例: JSX Hello! 转换为 React.createElement('

a'

, {href: '

https://facebook.github.io/react/'

}, '

Hello!'

) 上方两种方式等价,因此开发人员可自行决定使用哪种方式. JSX Syntax React 学习手册

6 基本使用 近年来随著 Node.js 的发展及 Open Source 社群的贡献,有越来越多好用且方便的开发工具: 套件工具:npm、bower... 任务工具:gulp、grunt... 打包工具:webpack、browserify... 框架工具:yeoman... 其他:express、browsersync... 善加使用这些工具可加速整体开发进度. 以下将以 webpack 为例,介绍如何使用打包工具来加速 React 的开发. webpack 是个打包工具,并且支援各种类型的资源载入器(loader),可用来载入 javascript、css、html、 image…等资源,并封装成单一javascript档,透过载入器结合预处理器 (preprocessor) 的辅助,一些特定 类型资源可在封装过程中预先被编译及转换. babel 是一个 Javascript 的编译器,用来编译新一代的 ECMAScript 语法及 JSX 语法. 透过 npm 指令安装 react、webpack、webpack-dev-server、babel-loader npm install webpack -g npm install webpack webpack-dev-server babel-loader --save-dev npm install react --save 资料夹目录如下: /app main.js HelloWorld.js /build index.html package.json webpack.config.js 进阶操作 webpack babel 使用方式 准备 React 学习手册