\ 【React.js模仿大众点评webapp】实战教程（1）搭建 webpack+React 开发环境
【React.js模仿大众点评webapp】实战教程（1）搭建 webpack+React 开发环境
分享即可 +1积分
Web前端工程师
雄心的一半是耐心！
作者的热门手记
教程源码：
文档原文：
搭建 webpack + React 开发环境
我在实际工作中用百度
搭建 React 开发环境，但是放在整个前端社区中，webpack 肯定更适合大家，这里就用 webpack。如果之前未听说或者未用过 webpack 的同学，一定此机会恶补一下，也可以查阅
我目前使用的系统是 mac os 系统，使用 windows 的同学建议在执行本课程的命令行时，使用一个模拟 linux 命令的工具，例如 xshell
能科学上网最好，否则就需要你在某些过程中耐心等待
初始化 npm 环境并安装插件
当前的 web 前端开发，基本使用 npm 管理第三方依赖（插件），不熟悉的同学这里抓紧补一下。
初始化 npm 环境
首先保证有 node 和 npm 环境，运行node -v和npm -v查看
进入项目目录，运行npm init按照步骤填写最终生成package.json文件，所有使用 npm 做依赖管理的项目，根目录下都会有一个这个文件，该文件描述了项目的基本信息以及一些第三方依赖项（插件）。详细的使用说明可查阅，不过是英文的。
已知我们将使用 webpack 作为构建工具，那么就需要安装相应插件，运行 npm install webpack webpack-dev-server --save-dev 来安装两个插件。
又已知我们将使用 React ，也需要安装相应插件，运行 npm i react react-dom --save来安装两个插件。其中i是install的简写形式。
安装完成之后，查看package.json可看到多了devDependencies和dependencies两项，根目录也多了一个node_modules文件夹。
--save 和 --save-dev 的区别
npm i时使用--save和--save-dev，可分别将依赖（插件）记录到package.json中的dependencies和devDependencies下面。
dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery等，即及时项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行。
devDependencies下记录的是项目在开发过程中使用的插件，例如这里我们开发过程中需要使用webpack打包，而我在工作中使用fis3打包，但是一旦项目打包发布、上线了之后，webpack和fis3就都没有用了，可卸磨杀驴。
延伸一下，我们的项目有package.json，其他我们用的项目如webpack也有package.json，见./node_modules/webpack/package.json，其中也有devDependencies和dependencies。当我们使用npm i webpack时，./node_modules/webpack/package.json中的dependencies会被 npm 安装上，而devDependencies也没必要安装。
配置 webpack.config.js
为了提高学习效率，webpack 最最基础的用法，就不再挨个演示了（推荐一个非常好的，以及）这里我们把项目中的webpack.config.js这个配置文件详细的讲解一下，过程中也会照顾 0 基础的同学。
webpack.config.js 就是一个普通的 js 文件，符合 commonJS 规范。最后输出一个对象，即module.exports = {...}
输入 & 输出
这个比较基础，不过需要新建./app/index.jsx作为入口文件，目前项目中只有这一个入口文件。不过 webpack 支持多个入口文件，可查阅文档。
输出就是一个bundle.js，js 和 css 都在里面，不过只有在开发环境下才用，发布代码的时候，肯定不能只有这么一个文件，接下来会讲到。
针对不同类型的文件，使用不同的loader，当然使用之前要安装，例如npm i style-loader css-loader --save-dev。该项目代码中，我们用到的文件格式有：js/jsx 代码、css/less 代码、图片、字体文件。
less 是 css 的语法糖，可以更高效低冗余的写 css，不熟悉的朋友可去看看，非常简单。
在加载 css/less 时用到了postcss，主要使用autoprefixer功能，帮助自动加 css3 的浏览器前缀，非常好用。
编译 es6 和 jsx 语法时，用到家喻户晓的babel，另外还需增加一个.babelrc的配置文件。
使用 html 模板（需要npm i html-webpack-plugin --save-dev），这样可以将输出的文件名（如./bundle.js）自动注入到 html 中，不用我们自己手写。手写的话，一旦修改就需要改两个地方。
使用热加载和自动打开浏览器插件
对 webpack-dev-server 的配置
在 package.json 中，输入以下代码，将这一串命令封装为npm start，这样就可以运行项目代码了。
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors"
代码中NODE_ENV=dev代表当前是开发环境下，这里的"dev"可被 js 代码中的process.env.NODE_ENV得到并做一些其他处理。
定义环境全局变量
以下定义，可使得代码通过__DEV__得到当前是不是开发模式。
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
打开./app/util/localStore.js可以看到if (__DEV__) { console.error('localStorage.getItem报错, ', ex.message) }，即只有开发环境下才提示error，发布之后就不会提示了。（因为发布的命令中用到NODE_ENV=production）
配置 webpack.production.config.js
开发环境下，可以不用考虑系统的性能，更多考虑的是如何增加开发效率。而发布系统时，就需要考虑发布之后的系统的性能，包括加载速度、缓存等。下面介绍发布用配置代码和开发用的不一样的地方。
发布到 ./build 文件夹中
path: __dirname + "/build",
将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存，因为在项目维护过程中，第三方依赖不经常变化，而业务代码会经常变化。
为每个打包出来的文件都加md5后缀，例如"/js/[name].[chunkhash:8].js"，可使文件强缓存。
打包出来的不同类型的文件，放在不同目录下，例如图片文件将放在img/目录下
自动为打包出来的代码增加 copyright 内容
new webpack.optimize.OccurenceOrderPlugin(),
使用 Uglify 压缩代码，其中warnings: false是去掉代码中的 warning
分离 css 和 js 文件
开发环境下，css 代码是放在整个打包出来的那个 bundle.js 文件中的，发布环境下当然不能混淆在一起，使用new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),将 css 代码分离出来。
npm run build
打开package.json，查看以下代码。npm start和npm run build分别是运行代码和打包项目。另外，"start"、"test"可以不用run。
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
这两个命令主要有以下区别：
前者中默认使用 webpack.config.js 作为配置文件，而后者中强制使用 webpack.production.config.js 作为配置文件
前者NODE_ENV=dev而后者NODE_ENV=production，标识不同的环境。而这个"dev" "production"可以在代码中通过process.env.NODE_ENV获取。
最小化压缩 React
以下配置可以告诉 React 当前是生产环境，请最小化压缩 js ，即把开发环境中的一些提示、警告、判断通通去掉，直流以下发布之后可用的代码。
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
相关标签：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2如何用React Native编写跨平台APP
用React Native编写跨平台APP
React Native 是一个编写iOS与平台实时、原生渲染的应用程序的框架。它基于React，Facebook的Script的库，为的是构建用户接口，而并不是以为目标，它是以手机平台为目的。换句话说，如果你是一个web开发者，你可以使用React Native去编写干净、快速的移动APP，并且可以体会到熟悉的框架和单个的的代码库。
在这之前，我们已经听到用诸如Cordova或者是Titanium这些框架的APP开发的承诺，那么使用React Native去开发APP究竟如何呢？在这篇文章中，我们将会探索React Native是什么，以及它究竟是如何工作的。然后，我们将会报道使用React Native去编写iOS以及Android的应用程序究竟是如何的，结尾，你讲会看到为什么说React Native是你的接下来的一个移动项目开发极其推荐的一个选择。
什么是React Native?
在我们准备重点介绍开发者的经验之前，我们先来说明一下React Native是什么，以及略微设计一下React Native是如何工作的。
它仅仅是React
React Native是一个为了编写用户交互接口的JavaScript的库。通常是用于web上。由Facebook开发，并于2013年开源。React已经见证了广泛的使用。React在领域内的使用相对来说是狭窄的，它仅仅关注它自己，通过渲染你的应用程序的用户交互的接口。与一般的大型的MVC风格的库呈分庭抗礼的局面。
开发者因为一系列的原因，对于React已经是趋之若鹜了。它是轻量级的，同时它提供了令人为之眼前一亮的行为，尤其是对于快速改变的数据。同时由于其自身的组件的结构，它鼓励你去写更加具有模块化的，可复用的代码。
要不是移动端，React Native果真仅仅是React。这里是有一些差别：你应当使用一个View组件而不是一个Div组件，应当使用一个Image标签，而不是img标签，开发者的绝大多数都是保持差不多相同的，当然了，如果具备一定的Objective-c或者是Java的语言知识，那就更好了。对于移动开发者，会有诸如这些机警的考虑（我是否做了多机型的适配工作？我的触摸点是否已经设置了足够大？）然而，React Native将会感觉完全熟悉，并且是舒适的，当然这是就那些已经学会如何在浏览器中用React做开发的开发者而言。
它确实是React
首当其冲，让人对React Native产生惊艳的感觉的是React Native的的确确是Native的。其余的针对移动端的JavaScript引擎是打包你的JavaScript代码进入到一个优化过的WebView当中，也许这些WebView也实现了某些本地化的UI的行为的接口，比如说动画，但是归根到底，你依旧写的是一个web app。
在React中，一个组件描述了自己的特性；React为你处理渲染。一个干净的抽象层将这两个函数隔绝开来。对于web端，为了渲染组件，React使用了标准的Html的标签，这个相同的抽象层，一般被理解为&Bridge&，能够使得React Native去触发iOS与Android上面的渲染的API，那就意味着，在iOS，你的React Native组件绘制真正的UI View，然而在Android上，它们将会绘制native View。
你将会写一些看上去比较糟糕，与标准的JavaScript、CSS、Html比较相像的代码。并非直接是向下编译成本地代码，React Native 拿到你的应用程序，使用宿主平台的JavaScript引擎运行它，同时不阻塞主UI主线程，这样，你将会得到原生的app的操作、动画、体验的效果，而不需要必须写成Objective-C或者Java形式的代码。其他的跨平台的app的开发的模式，比如说，CZ喎"/kf/ware/vc/" target="_blank" class="keylink">vcmRvdmG78tXfysdUaXRhbml1baOsvvi21LTvsru1vdPr1K3J+szl0em78tXfse3P1tXi1ta437bI0rvWwrXE0Ke5+6GjPC9wPg0KPC9ibG9ja3F1b3RlPg0KPGgzIGlkPQ=="一个比较好的开发者的体验">一个比较好的开发者的体验
与标准的Android或者是iOS的开发相比，React Native提供了一种更加具有震撼效果的开发者的体验，因为你的应用程序几乎全部是基于JavaScript开发的，你将会获取到一系列的Web开发上面的优势，比如能够瞬间刷新你的应用程序去看到你的代码的改变。与花费长时间等待构建一个传统的移动app相比，React Native感觉简直就是上天的馈赠。
处理多个平台
令人充满感激的是，React Native支持多个平台. React Native的绝大多数的API都是跨平台的, 所以你仅仅需要编写一个React Native组件, 它将会无缝的工作于iOS与Android平台上。Facebook宣传它们的Ad Manager 应用程序 87%代码在两个平台重用, 然而我写了一个flashcard 应用程序更是没有一点平台相关的代码。如果你确实希望用到一些平台相关的代码&由于iOS与Android的两个平台的不同的交互，比如，或者是你希望重复利用一个平台的API的优势&那也是很容易的，React Native支持你去指定特定的平台的版本，对于每一个组件而言，然后，你可以将他们集成到你的React Native版本的应用程序中。
用React Native来进行开发
使用一个简单的JavaScript的代码库来进行写真正的iOS或者是Android的native 应用看上去是一件没有头脑的事情。那么用React Native来进行工作究竟是怎样的呢？
去开始开发React Native的应用程序，除了React Native以外，还需要安装一些针对iOS以及Android平台的一般性的依赖的组件。具体的可查询React Native的网站。建立React Native是简单的，如果你已经安装了一个最新版的node了，那么就可以使用npm install -g react-native-cli来安装React Native。
一旦你的这些依赖的组件已经安装，运行React Native 初始化项目的名称，将会自动生成一个React Native项目的模板。
一般性的React组件
一旦你的开发环境就绪, 是时候去写一些真正的应用程序。正如之前提到的，React Native真的仅仅是React，但是有几点不同。React Native组件对于浏览器而言，看上去更像是React组件，但是你的基本构建的块已经发生了变化，比如说类似Div、Img或者是p这样的标签。React Native为你提供了基本的组件，比如Text或者是View，在下面的例子中，就用到了基本的组件ScrollView、TouchableHighliht与Text组件，所有的这些，将会映射到Android与iOS指定的View上面去。利用它们创建一个滚动的View，伴随着合适的Touch处理是非常直截了当的：
var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = R
var TouchDemo = React.createClass({
render: function() {
console.log('pressed')}&
Proper Touch Handling
如果你还没有处理好html与javascript的语法混乱的时候，看上去有些混乱，React强烈建议你使用JSX，对于React Native，你也是别无选择。你的渲染的装饰，是与javascript共同搭配来控制它的行为，这经常会遭到入门者的强烈的反对。但是我强烈建议你给它一次机会。
因为React Native组件同React组件是非常的类似，使得React转换为React Native也是非常的简便。
为了使得绘制更加简单与有效, 同时鼓励便于管理的样式风格, React Native 实现了严格的的子集。那就意味着你没有必要学习指定的平台的方式去设计你的View，但是这需要你花费一点时间去学习如何使用React Native的样式。
最大的不同是你没有必要担心指定的规则，因为样式的继承是相当的精简的，并且React Native使用的内联的样式的语法。
下面是一个样式表在React Native是如何被创建的例子：
var styles = StyleSheet.create({
container: {
marginTop: 30
使用内联语法，这个样式是这样被使用的：
开始移动端的开发
React Native一个更加复杂的地方是开发环境的搭建。 当使用React Native来进行开发的时候，你需要具备所有移动端开发的必备的工具，以及JavaScript的编辑的工具：一个文本编辑器，以及Chrome的调试的工具。
对于iOS，这意味着Xcode的打开，同时包括iOS的模拟器。对于Android，并非是Android Studio，你将会使用命令行工具。最终，你将同时也需要React Native的包运行。你可以选择你的最喜欢的文本编辑器去使用去编辑你的JavaScript的代码。
这样的结果就是你需要有大量的工具在身边。有时候的确是感觉有太多的工具，桌面显的杂乱不堪，太多的桌面窗体打开的确是很烦人。另一方面，至少React Native并没有替你隐藏标准的APP开发的进程。
转向本地代码
React Native通过提供JavaScript接口给已经存在的平台的API，这意味着你可以向一般的React代码那样进行书写，并且React Native &Bridge&将会负责繁重的转换工作，但是如果桥接不完善的时候回发生什么呢？
不可避免，用一个新的框架，比如React Native，将会有一些API会不被支持调用，在这种情况下，可以书写本地代码，在宿主平台与JavaScript代码之间进行衔接沟通。比如：
#import &RCTBridgeModule.h&
@interface MyCustomModule : NSObject
@implementation MyCustomModule
RCT_EXPORT_MODULE();
// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
callback(@[[input stringByReplacingOccurrencesOfString:@&Goodbye& withString:@&Hello&]]);
然后，从JavaScript模块中去使用你的native 模块，包含它就像使用另外的一个Library一样：
var React = require('react-native');
var { NativeModules, Text } = R
var Message = React.createClass({
getInitialState() {
return { text: 'Goodbye World.' };
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) =& {
this.setState({text});
render: function() {
{this.state.text}
你也许使用这个，当一个你需要的API不被支持，如果你希望将已经存在的oc代码或者是Java代码与React Native集成在一起，或者是你希望写一些高操作的函数去处理一些密集的图形处理。值得高兴的是，React Native给一个非常弹性的编写代码的方式，当你需要的时候，使用native module，并且这种方式是直截了当的。即使你之前从未与oc或者是Java打过交道，书写桥接代码是一个非常好的练习，在native移动app的开发过程中获取愉快的感受。最近在关注React Native（以下简称RN），对于这个融合了js & iOS & Android的新物种，尝试和它近距离接触的过程中，发现与单独调试js或者native比起来，调试RN的过程确实很繁琐，怎么个繁琐法？假设你已经配置好了Android开发环境，clone your project，并且已经npm install 了全部的依赖包，到这个姿势就可以开始调试了。调试Android APP的设备有两种：模拟器：Android SDK自带的 emulator 或者第三方的 Genymotion真机这里重点说说如何用真机调试，模拟器如果仅仅是跑个demo用用还行，对实际开发意义不大，故不在此赘述。真机调试的前提条件: 首先确保你的电脑和手机设备在同一个Wi-Fi环境下。 其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!确保你的设备已经被成功连接，可以输入adb devices核实: 在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。 因为如果你连接了多个设备（包含模拟器在内），你后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保adb devices的输出只有一个是连接状态。现在我们可以运行 react-native run-android 来在设备上安装并启动我们的应用了这句命令执行后，实际上就是在本地起一个node server，并且将你的android project编译打包，再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reload js时候会自动更新bundle文件，达到改动js文件后即时显示的调试效果。这“红屏”又是什么鬼？别着急，是正常的，我们需要连接上开发服务器，下面的步骤会解决这个问题。摇晃手机，或者运行adb shell input keyevent 82，可以调出开发者菜单。点击进入Dev Settings 点击Debug server host for device 输入你电脑的IP地址和端口号（譬如我的是192.168.3.15:8081）注意：如果你的设备是android5.0以上版本(API 21+)，就不用折腾这步了 而是：运行adb reverse tcp:8081 tcp:8081 （建立一个从设备向电脑转发的端口，前提是设备和电脑通过USB相连） 不需要更多配置，你就可以使用Reload JS和其它的开发选项了Chrome开发者工具 在Chrome上调试js代码，需要在开发菜单中选择Debug JS，这会打开一个新的http://localhost:8081/debugger-uitab页。 在Chrome中，按下? + option + i或者选择视图(View) -& 开发者(Developer) -& 开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。 Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。要查看APP日志？ 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。实时刷新 这个选项可以在你的js代码变更了之后，自动触发所连设备或者模拟器自动刷新。 开启方法：先打开开发菜单，选择Dev Settings，然后选择Auto reload on JS change选项。到此才能完整的调试Android RN,
繁琐到累绝不爱。。 等等，能否想办法简化一下过程？既然我们的RN项目里包含了完整的android工程，何不把android工程导入到android studio 去运行？不但可以同时查看js的日志和native的日志，而且开发android的同学最熟悉AS，利用AS的快捷键和各类插件提升调试效率。have a try , 答案是肯定的！ 执行react-native start 也可以起一个node server，只是它不帮你安装APP到device 。以上就是我踩坑后整理的方法，按这套组合拳就可以愉快地调试了。水平有限，抛砖引玉，如果你有更好的方法！欢迎拍砖！此处插播一个广告：拍砖请拍到我们的杏树林开放空间（），期待感兴趣的同学加入。之后要解决的一些issue 1，关于设备MinSdkVerison RN 只支持Android4.1.2（API16）以上设备，4.0根据网络数据大概占比0.7比例，随着大部分app已经不支持4.0以下设备了，这块倒还可以接受 , 目前我们的病历夹是3.0(API-11) , 口袋是4.0(API-14) 2，我们的androidRN现在只能通过Debug JS才能渲染出界面，而不能正常的用Reload JS 3，在界面跳转时卡的令人发指
杏树林研发 郝治鑫
无相关信息
最新教程周点击榜
微信扫一扫08.ReactJS【手把手教React Native实战开发视频教程】
- 爱酷学习网，免费高清视频教程在线观看
08.ReactJS
距离广告结束还有
Facebook推出了ReactJS后凭借ReactJS强大的Virtual DOM和调和算法（Reconciliation），获得了开源社区的支持，迅速占有了市场。在ReactJS取得广泛认可后，Facebook又推出了React Native&&让前端程序员的知识可以迁移到移动领域&&开发顶级体验的APP产品。React Native推出不到一年，Facebook又一次迅速在移动开发领域掀起浪潮。在最新的F8大会上，微软宣布将整个平台支持React Native。 在不久的将来RN不仅可以开发iOS和Android应用， 还将可以开发Windows桌面应用／Xbox游戏／虚拟现实产品。在这种情况下，本着培养最优秀的前端工程师的梦想，继续坚持&大前端&理念，推出手把手教React Native实战开发视频教程。课程不仅可以让学员将自己所学前端知识迁移到移动端，更会从模块化Javascript和函数式编程个方面入手去提升整体架构能力。
Album Info
请输入正确的邮件（格式：xxx@xxx.xx）
必须填本条信息！如何利用React.js开发出强大Web应用-android100学习网
如何利用React.js开发出强大Web应用
在开发强大的Web应用程序领域，React.js无疑可算当之无愧的赢家。首先，最令人振奋的就是它为开发人员带来了多年以来在Web开发框架当中始终无法找到的各类要素。很多Web开发人员之所...
在开发强大的Web应用程序领域，React.js无疑可算当之无愧的赢家。首先，最令人振奋的就是它为开发人员带来了多年以来在Web开发框架当中始终无法找到的各类要素。很多Web开发人员之所以对其青眼有加，正是因为它能够帮助我们开发出不同于以往且极具交互特性的Web应用。它几乎无所不包，因此我们也应当对其加以关注，但利用它在未来的开发工作当中打造出更为出色的成果。
关于React.js，首先需要留意的就是它在默认情况下允许大家保证动态站点能够始终拥有强大的稳定性，这意味着我们能够充分运用各类灵活的交互设计效果而不必担心给站点运行带来影响。这绝对是一项伟大的壮举，事实上我们甚至很难在利用React.js进行应用程序开发时造成任何故障。
在利用React.js开发强大Web应用时，另外还有几项提示必须加以强调——这些提示绝对值得一试而且极具实用性，特别是对于那些刚刚上手这套框架的朋友来说。它们将帮助大家更好地处理未来开发工作中可能面对的各种问题。再有，大家还能够以远超想象的速度实现应用开发。
如果大家打算利用React.js创建一款应用程序，那么各位无需完成整套工具设置即可在自己的浏览器当中轻松便捷地搞定原型设计。是的，其实际操作过程与我们的表述同样简单。举例来说，如果大家决定利用可选JSX语法自行编写组件，其编写方式以及代码内容看起来几乎与HTML如出一辙。
作为开发第一步，我们首先需要制作一份简单的文档，其中同时包含React.js与JSX转换工具。以下列代码作为范例：
&script src="http://fb.me/react-0.13.0.js"&&/script&
&script src="http://fb.me/JSXTransformer-0.13.0.js"&&/script&
&script type="text/jsx"&
/** @jsx React.DOM */
React.js当中的应用程序必须通过已经在层级结构当中布置完成的组件加以构成。如果大家希望在开发工作当中轻松使用应用程序的每个组成部分，那么必须首先拿出时间弄清楚其在层级结构中的具体作用并以此为基础勾勒应用原型。这意味着，每个组件都负责解决一项特定任务。而在某些复杂组件当中，我们还需要将其拆分成数个简单组件，从而确保一次只解决一个问题。这也是我们充分发挥React.js强大能力的必要前提。
属性与状态
React.js当中的数据主要分为两种类型：
·属性：这类数据会在不同组件之间往来传递
·状态：这类数据会始终被保存在某组件当中
组件的属性（即往来于不同组件间的信息）不可修改与变更，但组件的状态却能够随时加以调整（即组件内部的信息）。这代表着React.js中的一切都具备与之对应的真实源。
因此，当我们利用React.js创建一款应用程序时，必须要在Web应用开发中做出一项决策——各组件拥有怎样的数据，这些数据的主来源又是什么。一旦解决了这个问题，大家就能够轻松完成应用创建的其它工作。
在这种情况下，我们只需要考量三种数据类型：
用户输入数据
具体来参考以下示意图：
其中网络数据将由网络及线路组件所获取。其通常代表着大量数据，而且为了不影响应用的运行速度，大家需要在外部对其加以处理，而后再把结果交付至我们创建的应用。
组件通信机制
在这里，数据被设计为自上而下贯穿整个组件结构，但大家有时候也需要以自下而上的方式逆向交付数据以实现应用程序交互性。在这种情况下，我们就需要利用特定的技术手段实现这种“数据逆流”。下面来看几种实现此类目标的方式：
·大家可以选择使用回调属性的方式，这是最理想也最简单的解决方案，因为此时组件只需要同其直接上游对象进行数据共享。React.js能够自动对每个实例者组件方法绑定，因此维护工作不会占用我们大量精力。下面来看具体示例：
var Child = React.createClass({
render: function() {
·如果大家希望实现的是其它抵达通知机制，那么可以利用单一系统实现发布/订阅。这种方式非常灵活而且同样易于维护。只需使用PubSubJS这类库，大家就能够随意对某一组件的生命周期方法进行绑定与解绑。
相关代码示例如下：
var Parent = React.createClass({
handleMyEvent: function(e) {...},
componentWillMount: function() {
window.addEventListener("my-event", this.handleMyEvent, false);
componentWillUnmount: function() {
window.removeEventListener("my-event", this.handleMyEvent, false);
render: function() {...}
var Grandchild = React.createClass({
handleClick: function(e) {
var customEvent = new CustomEvent("my-event",
detail: { ... },
bubbles: true
React.findDOMNode(this.refs.link).dispatchEvent(customEvent);
render: function() {
组件生命周期
组件永远拥有着与其API紧密关联的生命周期。在这种情况下，其生命周期包括启动、更新与卸载三种状态。而这些功能已经被内置在组件的定义当中。举例来说：
componentWillMount与componentWillUnmount 方法都被用于添加或者移除事件侦听机制。当然还有其它多种方法能够帮助我们实现对组件状态及属性的控制。
一旦我们建立起一套浏览器内运行环境，接下来就可以将UI方案拆分为多个简单组件。接下来的任务是弄清应用程序运行需要具备哪些数据，这些数据将处于何种位置且如何与应用进行共享。当这些问题得到解决，大家将能够获得可进行试用体验的已创建应用。
利用React.js，我们能够非常轻松地开发出强大且稳定的Web应用程序。这主要是因为大家需要使用的全部功能都能够由该框架自行提供，而且其在初始设计之时就充分考虑到创建高复杂性应用程序的种种需要。
原文标题：Develop Robust Web Apps with React.js
【独家译稿 ，合作站点转载请注明来源。】
来自： /art/104.htm}