React Native培训 上海ICT产教研基地

React Native是什么
React Native是Facebook在React.js 2015大会上公布的开源项目，它基于开源框架React.js，并可用来开发iOS和Android原生应用。目前，Facebook已经将React Native投入到了实际生产环境中，并开发出了基于iOS平台的聊天工具Groups。React 是一套可以用简洁的语法高效绘制 DOM 的框架，一个基于 JavaScript，具备动态配置能力，面向前端开发者的移动端开发框架。React Native 已成移动的技术主流方向，特别是移动跨平台领域内。
React Native具备以下两个比较鲜明的特点：
•采用原生渲染，摒弃Webkit渲染，提升体验。
•采用Web语言作为基础开发语言，降低学习成本。
 React Native的优点
性能高易掌握
首先的问题是：移动开发人才的稀缺。稍微有点工作经验的iOS开发，就要求2万一个月的工资，这说明当前移动互联网和创业的火热，已经让业界没有足够的开发人才了，所以大家都用涨工资来抢人才。而由于跨平台的框架（例如PhoneGap、RubyMotion）都还是不太靠谱，所以对于稍微大一些的公司，都会选择针对iOS和Android平台分别做不同的定制开发。而JavaScript显然是一个群众基础更广的语言，这将使得相关人才更容易获得，同时由于后面提到的代码复用问题得到解决，也能节省一部分开发人员。
跨平台通用
React Native编写一套代码，可以编译出iOS、Android、Web等多种解决方案，大大降低了开发难度。React Native虽然强调自己不是“Write once, run anywhere”的框架，但是它至少能像Google的j2objc那样，在Model层实现复用。那些底层的、与界面无关的逻辑，相信React Native也可以实现复用。这样，虽然UI层的工作还是需要做iOS和Android两个平台，但如果抽象得好，Logic和Model层的复用不但可以让代码复用，更可能实现底层的逻辑的单元测试。这样移动端的代码质量将更加可靠。
UI排版的终极解决方案
html定义元素站位、css定义站位元素样式、js控制逻辑，这种思想是客户端编程的终极解决方案，在客户端解决方案中顺者昌逆者亡。而这种思想又是国际标准，实现起来容易，开发也方便。ios和android在解决方案上抄袭了html思想，但是抄袭不彻底，使编程变得复杂，解决成本偏高，而React Native完全采用了html思想，会了html5编程，几乎就会了React Native编程，使学习难度降低。
这次Facebook的React Native做的事情相比BeeFramework更加激进。它不但采用了类似HTML + CSS的排版，还把语言也换成了JavaScript，这下子改变可以称作巨大了。但是Facebook有它作为全球互联网企业的光环，相信会有不少开发者跟进采用React Native。
MVVM编程模式
MVVM在Web开发领域相当火热，而iOS领域的ReactiveCocoa虽然很火，但是还是非常小众。究其原因，一方面是ReactiveCocoa带来的编程习惯上的改变实在太大，ReactiveCocoa和MVVM的学习成本还是很高。另一方面是ReactiveCocoa在代码可读性、可维护性和协作上不太友好。
而Web开发领域对MVVM编程模式的接受程度就大不相同了，在Web开发中有相当多的被广泛使用的MVVM的框架，例如AngularJS。相信React Native会推动MVVM应用在移动端的开发。
动态更新
你受够了每次发新版本都要审核一个星期吗？苹果的审核团队在效率上的低下，使得我们这一群狠不得每天迭代更新一版的敏捷开发团队被迫每 2 周或 1 个月更新一次版本。很多团队上一个版本还没审核结束，下一个版本就做好了。
React Native的语言是基于JavaScript，这必然会使得代码可以从服务器端动态更新成为可能。到时候，每天更新不再是梦想。
 React Native广泛运用各领域
互联网行业中，React Native 技术已经在腾讯、阿里、携程、58、Facebook等大型互联网公司核心App中大量采用。最近更新的案例列表表明，在Baidu(手机百度)、Instagram、JD（手机京东）等大型主流应用的iOS版本、Android中均已经采用。更有甚者，在VR、游戏等重体验的App也采用了，这充分说明了其用户的良好性。在企业中，React Native正在成为移动前端技术的首选。

React Native课程安排
模块
内容
描述
HTML
HTML、CSS
HTML语法、CSS的概念及基本语法；
用CSS设置丰富的文字和图片效果；
用CSS设置表格与表单的样式；
用CSS设置页面和浏览器的元素；
CSS盒模型；
CSS+Div布局，CSS+Div美化与布局实战；
文档对象模型（DOM）；
jQuery
选择并管理页面元素；
操作页面；事件处理；
动画和页面特效；
Ajax定义和特点；
Ajax发送异步请求原理以及XmlHttpRequest对象；
在异步通信中使用XML和JSON；
jQuery Ajax；
ES6、Babel
ECMAScript 6语法
ECMAScript 6是开源的 JavaScript语法，全面介绍 ECMAScript 6 新引入的语法特性。
let和const
解构赋值
字符串
正则
数值
数组
函数
对象
Proxy和Reflect
Symbol
二进制数组
Set和Map
Iterator
Generator
Promise对象
异步操作和Async函数
Class
Decorator
Module
Babel介绍
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行，理解Babel对项目开发是必不可少的。
React
React
React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单
TOP API
JSX语法
数据流：state、propos、propType
组件生命周期详解及调用组件API定义组件
DOM操作：ref指向
React中的事件处理
组件的嵌套与通信
form表单的操作
mixin的使用
Webpack 、
CSS Modules、
React-Router、
Redux
Webpack安装及使用
理解并使用模块加载器Webpack
基本使用
插件介绍和使用
结合React的完整工作流
搭建一个最佳实践的前端工作流
CSS Modules
熟练掌握react native中的CSS Modules 
Sass：理解CSS预处理器Sass原理，并掌握其用法
React-Router
React-Router路由库用法，在此基础之上，学习掌握
Router\hashHistory\Route
Link
browserHistory
activeStyle\activeClassName
路由的嵌套
路由变量获取和使用
Route中components参数的高级用法
query获取URL中的参数
Redirect
setRouteLeaveHook
Redux
Redux，使项目可跨平台运行
基本介绍
快速上手
理解 Redux 的核心概念
Redux 的顶层 API 介绍
使用 React-redux 连接 react 和 redux
一步步开发一个 TODO 应用
Redux超酷的开发工具Redux-Devtools
深入理解Redux的Middleware
中间件
函数式编程概念
Redux的Dispatch函数
Redux Middleware
剖析applyMiddleware.js
异步中间件
使用middleware实现异步 action 和异步数据
Mocha 、
React单元测试
Mocha测试框架
项目后期测试是必不可少的，本模块介绍使用Mocha测试框架
React单元测试
构建react单元测试的环境，React测试的基本做法和最佳实践，手把手教你如何写React测试
React-native
RN基础
搭建开发环境
编写Hello World
Props（属性）
State（状态）
样式
高度与宽度
使用Flexbox布局
处理文本输入
如何使用ScrollView
如何使用ListView
网络
使用导航器跳转页面
其他组件
Button
DatePickerIOS
DrawerLayoutAndroid
Image
KeyboardAvoidingView
ListView
ListView.DataSource
MapView
Modal
Navigator
等等
进阶
嵌入到现有原生应用
颜色
图片
处理触摸事件
动画
无障碍功能
定时器
直接操作
调试
自动化测试
JavaScript环境
导航器对比
性能
升级
特定平台代码
手势响应系统
项目实战
（三选一）
学习城
中小学在线学习平台，使用到很多rn知识，原型查看
https://pro.modao.cc/app/KIx2LTmksEQ22f7tuesbT6bYDTA7Xsn
云医
医院知识管理系统和考试系统，原型参考https://pro.modao.cc/app/s9XjPRmZlQrTENquP2prNynpUhyfviD
简易MES系统
工厂设备管理系统，原型参考：https://pro.modao.cc/app/dKY5Tz7voqbZU9TbMS8mW2eC8qjkAYO
实际项目 （可选）
根据时具体项目承接情况安排