【iOS干货】React-Native学习指南
React Native
React-Native专题系列文章不断更新ing(入门,组件,Api,开源项目)-最近比较火-http://www.lcode.org/react-native/
React-Native入门指南 /vczero/react-native-lesson
React-Native视频教程(部分免费) https://egghead.io/technologies/react
react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html
react-native中文文档(极客学院) /project/react-native/
react-native中文文档(react native中文网，人工翻译，官网完全同步) /docs/getting-started.html
react-native第一课/article/2783
深入浅出 React Native：使用 JavaScript 构建原生应用/FrontendMagazine/
React Native通信机制详解bang.net/tech/2698/
React Native布局篇 /a/8374
React Native 基础练习指北(一) /a/5929
React Native 基础练习指北(二) /a/7733
Diary of Building an iOS App with React Native http://herman.asia/building-a-flashcard-app-with-react-native
Use React Native in Existing iOS App http://blog-/post/use-react-native-in-existing-ios-app
React Native For Beginners - The Next Big Thing?/react-native-for-beginners/
How To Implement A Tab Bar With React Native /react-native-tab-bar/
tcomb-form-native使用视频教程(需翻墙)https://react.rocks/example/tcomb-form-native
React Native分享记录 /a/8782
React Native构建本地视图组件 https://www.dobest.me/article/11
react-native-android-lession(安卓系列教程) /yipengmu/react-native-android-lession
React Native模块桥接详解 https://www.dobest.me/article/14
React Native: 配置和起步 http://www.liaohuqiu.net/cn/posts/react-native-1/
React Native: Android 的打包 http://www.liaohuqiu.net/cn/posts/react-native-android-package/
react-native的第一课/coderyi/blog/blob/master/articles/_react-native_first_lesson.md
react.js中文文档 /
react.js入门教程(gitbook) https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
react.js快速入门教程 - 阮一峰 /blog/2015/03/react.html
react.js视频教程 http://react-china.org/t/reactjs/584
深入浅出ES6(一)：ES6是什么 q.com/cn/articles/es6-in-depth-an-introduction
深入浅出ES6(二)：迭代器和for-of循环 q.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop
深入浅出ES6(三)：生成器 Generators q.com/cn/articles/es6-in-depth-generators
深入浅出ES6(四)：模板字符串 q.com/cn/articles/es6-in-depth-template-string
深入浅出ES6(五)：不定参数和默认参数q.com/cn/articles/es6-in-depth-rest-parameters-and-defaults
深入浅出React(一)：React的设计哲学 - 简单之美 q.com/cn/articles/react-art-of-simplity
深入浅出React(二)：React开发神器Webpack q.com/cn/articles/react-and-webpack
深入浅出React(三)：理解JSX和组件q.com/cn/articles/react-jsx-and-component
深入浅出React(四)：虚拟DOM Diff算法解析 q.com/cn/articles/react-dom-diff
深入浅出React(五)：使用Flux搭建React应用程序架构q.com/cn/articles/react-flux
react-webpack-cookbook中文版http://fakefish.github.io/react-webpack-cookbook/
Flex 布局语法教程/blog/2015/07/flex-grammar.html
React 初探 /2015/04/react-explore/
React虚拟DOM浅析 /2015/10/react-virtual-analysis-of-the-dom/
react组件间通信 /2015/07/react-zu-jian-jian-tong-xin/
React 数据流管理架构之 Redux 介绍/2015/09/react-redux/
React服务器端渲染实践小结/3/
React Native Android 踩坑之旅 /2015/10/react-native-android-steps-on-tour/
React Native 之 JSBridge /2015/05/react-native-zhi-jsbridge/
React Native探索系列教程
React Native探索(一)：背景、规划和风险q.com/cn/articles/react-native-overview
React Native探索(二)：布局篇q.com/cn/articles/react-native-layout
React Native探索(三)：与 react-web 的融合 q.com/cn/articles/react-native-web
研究源码也是一个很好的学习方式
官方演示App /facebook/react-native/tree/master/Examples
react-native-dribbble-app /catalinmiron/react-native-dribbble-app
Gank.io客户端 /Bob1993/React-Native-Gank
Leanote for iOS(云笔记) /leanote/leanote-ios-rn
ReactNativeRubyChina /henter/ReactNativeRubyChina
HackerNews-React-Native/iSimar/HackerNews-React-Native
React-Native新闻客户端 /tabalt/ReactNativeNews
newswatch(新闻客户端) /bradoyler/newswatch-react-native
buyscreen(购买页面) /appintheair/react-native-buyscreen
V2EX客户端 /samuel1112/v2er
react-native-todo /joemaddalone/react-native-todo
react-native-beer /muratsu/react-native-beer
react-native-stars /86/react-native-stars
模仿天猫首页的app/hugohua/react-native-demo
ReactNativeChess /csarsam/ReactNativeChess
react native 编写的音乐软件 /Johnqing/miumiu
react-native-pokedex /ababol/react-native-pokedex
CNode-React-Native /SFantasy/CNode-React-Native
8tracks电台客户端 /voronianski/EightTracksReactNative
React-Native实现的计算器/yoxisem544/Calculator-using-React-Native
房产搜索app /jawee/react-native-PropertyFinder
知乎专栏app /LeezQ/react-native-zhihu-app
ForeignExchangeApp /peralmq/ForeignExchangeApp
Segmentfault 客户端 /fakefish/sf-react-native
糗事百科app /stormhouse/QiuShiReactNative
孢子社区app /Hi-Rube/baoz-ReactNative
深JS app/fraserxu/shenjs
Den - 房屋销售app* /asamiller/den
Noder-cnodejs客户端/soliury/noder-react-native
知乎日报Android版 /race604/ZhiHuDaily-React-Native
ziliun-react-native/sonnylazuardi/ziliun-react-native
react-native-weather-app/shevawen/react-native-weather-app
React Native Sample App(Navigation,Flux)/taskrabbit/ReactNativeSampleApp
TesterHome社区app /qddegtya/A-ReactNative-TesterHome
Finance - 股票报价app /7kfpun/FinanceReactNative
shopping - 购物app /bigsui/shopping-react-native
zhuiyuan - 追源cms app /kazaff/ZhuiYuanDemo
uestc-bbs-react-native - UESTC清水河畔RN客户端(with Redux)/just4fun/uestc-bbs-react-native
react-native-nw-react-calculator(iOS/Android、Web、桌面多端)/benoitvallon/react-native-nw-react-calculator
react-native-nba-app /wwayne/react-native-nba-app
由于已经有较好的组件库网站，这里就不做总结。可以直接查看如下网站，过后可能精选一部分优质组件出来 :P
React-native组件库(比较全的组件库) http://react.parts/
React Native Modules /
最佳轮播类组件 /leecade/react-native-swiper
React Native Router /t4t5/react-native-router
下拉刷新组件 /jsdf/react-native-refreshable-listview
模态框 /brentvatne/react-native-modal
react-native-navbar /react-native-fellowship/react-native-navbar
滚动轮播组件/appintheair/react-native-looped-carousel
HTML显示组件 /jsdf/react-native-htmlview
Material React Native (MRN) - Material Design组件库 /binggg/mrn
react-native-gitfeed - GitHub客户端(iOS/Android) /xiekw2010/react-native-gitfeed
react-native-snippets(代码提示) /Shrugs/react-native-snippets
react-native-babel(使用ES6 ) /roman01la/react-native-babel
sqlite for react-native /almost/react-native-sqlite
gulp-react-native-css(就像写css一样写React Style) /soliury/gulp-react-native-css
rnpm(React Native Package Manager) /rnpm/rnpm
资源网站React-native官网
http://facebook.github.io/react-native/
React-China社区 http://react-china.org/
React Native中文社区 http://bbs./
React-native组件库(比较全的组件库)
http://react.parts/
React Native Modules /
Use React Native 资讯站(使用技巧及新闻) /
11款React Native开源移动 UI 组件 http://www.oschina.net/news/61214/11-react-native-ui-components
稀土掘金的 React 标签 http://gold.xitu.io/#/tag/React.jshttp://gold.xitu.io/#/tag/React
跨平台开发时代的 (再次) 到来？( Xamarin，NativeScript 和 React Native
对比)/2015/03/cross-platform/
谈谈 React Native - 唐巧/blog//talk-about-react-native/
如何评价React-Native? /question//answer/
React Native概述：背景、规划和风险http://div.io/topic/938
Native与Web的融合 - Qcon中React-Native演讲 q.com/cn/presentations/the-fusion-of-native-and-web
更多精彩，关注黑马程序员官方微信号吧！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。学React native哪家好
市场价：￥详询
已有2000+人咨询
班制：周末班
上课地点：
徐汇区乐山路
ReactNative实战培训 带薪实习 就业保障 保底薪项目
ReactNative是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOSApp，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。
ReactNative介绍：
ReactNative的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以取代
，以替代等。
在幕后，ReactNative在主线程之外，在另一个背景线程里运行JavaScript引擎，两个线程之间**一批量化的async消息协议来通信（有一个专门的React插件）。
UI方面ReactNative提供跨平台的类似Flexbox的布局系统，还支持CSS子集。可以用JSX或者普通JavaScript语言，还有CoffeeScript和TypeScript来开发。有评论说，React的UI层模型要比UIKit好很多。
更好的是，由于基于Web技术，开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况，刷新一下就行，无需编译。
基于Web技术（HTML5/JavaScript）构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的ReactNative能避免这些问题从而实现实时响应。
使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截，而ReactNative由于采用了原生UI组件自然没有此问题。
样式和布局
iOS、Android和基于Web的应用各自有不同的样式和布局机制。ReactNative**一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。上海ReactNative培训
劳动局认证批准文号：沪劳保技(2003)34号
教育局认证批准文号：徐教社（号
上海交大合作办学机构
17年培训经验，30万业界精英人才的共同选择！
紧缺人才包就业
学成后就业推荐，可以申请先培训后付款
上海ReactNative培训
培训课时800课时面授 项目案例实战
全日制学习6个月 6个月企业带薪实习培训费用原价24800元
*就业保障项目，全程免费
*另赠8000底薪就业服务课程特色
学习**前瞻移动开发技术，全网独家开班
0付款入学，先就业后付款，无经济压力
就业保证之外，另有8000元底薪保障入学要求国家认可的本科及以上学历
理工类专业
上海ReactNative培训
【机构介绍】
上海慧谷职业技能培训中心，是正规教育局劳动局办学资格单位，连续多年获得徐汇区优秀办学机构荣誉。实施科教兴市战略，加强自主创新与创业人才的培养，提升创新创业能力，增强市场竞争力和可持续发展的活力，是慧谷培训不断提高的目标和动力。
上海ReactNative培训
“慧谷培训”是沪上著名的培训教育品牌，多年来为各大企业客户和社会精英提供了专业服务。上海慧谷职业技能培训中心设立在慧谷高科技创业中心孵化基地内，位于徐家汇商贸中心，毗邻上海交通大学，交通便利，环境幽雅。慧谷培训拥有学术造诣深，实践经验丰富的师资队伍及良好的教学设施。慧谷培训面向社会提供人才培训服务和职业发展咨询服务。专业和职业发展规划为学员提供创业、就业、见习和职业发展机会。
上海ReactNative培训
慧谷培训中心将抓住机遇，严谨治学，勇攀高峰，努力办成一流的专业人才专修培训机构。
上海慧谷高科技创业中心成立于1999年5月，是由上海市科学技术委员会、徐汇区人民政府和上海交通大学联合创建的社会公益性服务机构，是上海交大科技园中的孵化器。慧谷高科技创业中心立足于为高科技企业技术创新提供全程服务，培育高科技企业和企业家，促进科技成果商品化、产业化、国际化。
上海ReactNative培训
选择交大慧谷专业美术设计课程，学员在学习知识的同时，积累了丰富的实战经验，获得了权威的证书，找到了理想的工作！
相关搜索：
上海慧谷职业技能培训中心，是正规教育局劳动局办学资格单位，连续多年获得徐汇区优秀办学机构荣誉。 实施科教兴市战略，加强自主创新与创业人才的培养，提升创新创业能力，增强市场竞争力和可持续发展的活力，是慧谷培训不断提高的目标和动力。
“慧谷培训”是沪上著名的培训教育品牌，多年来为各大企业客户和社会精英提供了专业服务。上海慧谷职业技能培训中心设立在慧谷高科技创业中心孵化基地内，位于徐家汇商贸中心，毗邻上海交通大学，交通便利，环境幽雅。慧谷培训拥有学术造诣深，实践经验丰富的师资队伍及良好的教学设施。慧谷培训面向社会提供人才培训服务和职业发展咨询服务。专业和职业发展规划为学员提供创业、就业、见习和职业发展机会。
慧谷培训中心将抓住机遇，严谨治学，勇攀高峰，努力办成一流的专业人才专修培训机构。
上海慧谷高科技创业中心成立于1999年5月，是由上海市科学技术委员会、徐汇区人民政府和上海交通大学联合创建的社会公益性服务机构，是上海交大科技园中的孵化器。慧谷高科技创业中心立足于为高科技企业技术创新提供全程服务，培育高科技企业和企业家，促进科技成果商品化、产业化、国际化。
选择交大慧谷专业美术设计课程，学员在学习知识的同时，积累了丰富的实战经验，获得了权威的证书，找到了理想的工作！
校区地址：
上海交大慧谷培训中心
发送到手机
校区地址：徐汇区乐山路33号
交通路线：
上海手机开发培训最新开班
相关培训：
其他城市：如何评价 React Native？
我的图书馆
如何评价 React Native？
优势：js 可以直接被 native 端执行，也可以和 native code 进行通讯，进而可以调用一些 native 提供的接口。 能直接被执行的好处在于可以直接从服务器上载入并执行 js 代码，这点在 iOS 上是 native code 和其他 to objc 的语言都难以做到的。这使我们有了一些更灵活的方法，来完成诸如应用内更新或者开发应用内插件之类的工作。同时，iOS 和 Android 可以共享一些前端部分的代码，使得代码能够更好地重用。
.zm-item-answer"}' data-widget="navigable" data-pagesize="20">
劣势：界面渲染效率低，多线程支持差，GC 问题。在 WebView 中绘制界面、实现动画的效率都比较低，开销也比较大。WebWorker 提供的多线程在 native 端有很大的局限，js 在 GC 时也有可能卡 UI。React Native 的做法非常激进，完全抛弃了 HTML（抛弃了 HTML 不代表抛弃了声明式），抛弃了 WebView，在 background thread 里运行 js 并直接使用原生控件进行渲染。这从根本上解决了渲染问题，使得 js 不再只能做 hybrid app，而能做出具有 native behavior 的流畅靠谱的 native app。从这一点上来说 React Native 已经做得相当不错了，尽管它只实现了 CSS 的子集，但是考虑到 CSS 如此复杂而它又抛弃了使用 webview 渲染，这是可以接受的。===========但是，React 的意义绝不在于解决了一些 hybrid app 的痛点。React 是一个很有野心的项目，它的目标不仅仅是简单地使前端能用 js 写 native app，而是希望推广一个通用的前端构建方案，不论是 Web 前端，还是客户端前端。FB 在演讲里说，React 的目标不是 “Write once, run anywhere"，因为不同平台的差异是客观存在的，设计风格也各有不同。它要做的，是 “Learn once, write anywhere”。React 里的 view 不仅可以是 DOM，也可以是 iOS 控件或者 Android 控件，不论是什么平台，都能 “build in React”。就我看来，前端不只是需要写网页，更重要的是要解决属于前端领域的各种问题。Web 前端和客户端前端在本质上是一致的，探索前端领域的最佳实践是一件很有意义的事。近些年前端比较火，相比于自成体系较为封闭的客户端前端， Web 前端在前端实践上的探索或许更多一些。不管是阿里的 Midway 那样侵入到后端的 UI layer，还是像 React Native 这样侵入到客户端前端，我认为都是非常值得称赞的探索。至于到底怎么评价 React Native，我觉得它和 React 一样赞。===========最后附个 FB 关于 React Native 的演讲：
，我在学 CoffeeScript
、知乎用户、 等人赞同
一直在跟进 React.js , 中文论坛()也主要是我在维护, 吐个槽本人前端, Macbook 用户, Android 用户, 但是不会移动端的开发首先如果 Facebook 发布 React Native, 那么移动端开发的门槛瞬间降低, 非常好的消息当然这个也将促使更多人选择 React 这样一套方案, 社区当中的资源也会更丰富结果就是会有很多人来参与研究用 React 的范式怎样来编程, 这是我们非常希望看到的React 有一个观点很明白, 就是以往的编程太多过程式的写法, 他们想要变成声明式的,因为声明式的写法能讲底层逻辑交给可靠的代码, 那么开发者的门槛极大地降低发布会演讲提到的就是随着应用变大, 逻辑变复杂, 用 React 的话后来的开发者很好上手相信这也是很多人选择 Angular 的原因.. 虽然两者实现声明式编程的语法和方式差别还是不小那么 React 现在靠着它摆脱了 DOM 的高度的抽象, 想要把同样的开发方式复制到本地应用!顺带地, React 把前端的事件系统, Flexbox 布局, 打算复制到移动开发上这个对于前端开发者来说会是很好的消息, 特别是已经用 React 写了很多前端代码的对于移动端我希望是在 React Native 稳定版发布以后, 能被移动端开发者认可...就我个人来说, 我倾向于认为 Functional Reactive Programming 一路的图形开发前途更好比如 Elm, 比如 React, 对界面还有数据及逻辑都做了比较理论化的考虑..那我很期待各种图形开发当中能引入这个我认为非常高效的方案另外, Web 开发当中灵活的布局系统我也希望在我学习开发其他平台时能继续使用.
，wild developer,on road,alive
知乎用户、、 赞同
其实最应该期待的是ui以及编译环境的整合，这些已经有ionic做榜样，js to native也有Ti趟了几年雷。工程结构上比ionic的angular讨巧。看起来会牛的，但这些优势目前我串不起来，没法预期会是个什么东西。我多说一点，以我的观察，没ide火起来难。
，JS語言研究，原理探究，應用優化
、、 等人赞同
我先来答吧。从很久以前就警告了用HTML5来做App有多不靠谱，不过各种Cloud还是不断出现。说到底，HTML5做App的优势和劣势都是HTML本身，或者说是DOM，成也萧何败也萧何。归功于CSS这个神器，UI制作变得非常简单而强大。但是却因为DOM这个东西，每次操作都比Native View慢很多，内存开销也很大。========分割线========1. ReactJS在JS圈子里的口碑在不断爬升(虽然我没用过)，组件模式的开发体验对Native App来说非常适合。2. React Native宣称抛弃了DOM，而是纯净的JS Binding。但我还在怀疑他们是打算先用HTML做一次转换，还是直接修改React的体验，适配Native View。如果是后者，相信会非常棒。3. 还需要看看他们用的JS引擎，还有针对Mobile App的优化，比如GC。4. 从我个人角度看，FB把JS Binding和View Binding这套东西开源出来，比React自身更有意义。-----------------------看了 的回答，继续说下。现在确实各方神仙都想用自己的玩具来做本来不属于他们的领域，比如iOS。作为一个长期从事JavaScript开发的人，现在因为需求，要做iOS的开发。可能会有很多人想，有很好的前端能力，用HTML5来做会适合。但我没有这样做，而是买了一本Swift的书，重新学习一门语言。PS: 个人不太喜欢OC的语法，Swift对我来说基本可以跳过语法学习。就如上面说的，我了解完全用HTML5做App的危险性：维护成本，可用性，性能等等。有时候，学习相关的东西比用不相关的东西更来的快，更何况Swift很友好。我想说的是，跟风、傍大款是阻碍程序员进步的品质。还有，别把糖果当成银弹了。
，前端码畜，INTJ，各种秒收FLAG
、知乎用户、 等人赞同
现在趋势都是声明式UI，React却“反其道而行之”，把UI深绑定到JS中去。然后又嫌编程创建控件的方式，对于UI的树状结构太麻烦了，于是搞出了个JSX。我就纳了闷了，他们团队究竟是对JS有多执念？诚然，以现在的前端生态来看，JS的群众基础的确是好。但是用React以后，要尽量保证与传统DOM的绝缘（下文例1）。从ReactJS的Virtual DOM，到React Native的“No DOM”（引号是因为这词不是官方的）。对JS群众而言是个新的挑战。（而且JSX真的是不怎么不好用啊）因为还没有看到第二天的视频，具体的一些实例代码和技术细节都看不到，但从现在的理解看，它仅仅是用了JS而已，跟前端技术已经没什么关系了，东西都要重新学。这方面我会继续关注后面的视频。然后另一方面，因为我不会做Native开发，不知道各种控件样式一般而言是用什么来定义的，但是如果React Native要搞一套“Native CSS”，这又是个学习成本，同时也是个无底天坑了。定义样式这方面，昨天的视频里没有看到，今天的视频发出来了之后我会再关注一下。小结：React Native除了JSX以外，已经和JS的发源地——WEB前端技术没太大关系了，东西都要重新学。它并不能提供一个用Web的技术和经验来开发NativeApp的方式，这一点与Ionic有本质区别。前端开发者想因此快速做出Native开发，也许做做小样还行，做出严肃的产品，我认为还有距离。
结论：我不认为这是一条给前端转Native的出路。----------------------上文例1一些UI控件，比如模态框，很常见的实现方式是把模态框从定义的节点里摘出来，塞进BODY里面，这样定位什么的非常好搞。氮素，这样做会破坏真实DOM与Virtual DOM之间的关联关系，ReactJS会罢工。例如SemanticUI中的modal组件，需要指定`detachable`才能让它不把元素剥离进BODY里去，SemanticUI的文档中说这样做会造成渲染获得更少硬件加速的优化。这还是人UI组件库设计的比较周到，如果是要捡着自己的组件库用，还不知道要踩多少坑。相比之下，Angular要友好一些，我们写的UI组件自己接管状态维护之后，只需要修改$scope，然后调用$apply，把状态维护交还给它的digest循环就行了。具体就不展开讨论了。
，只会画线条的前端
当你手中只有一把锤子的时候，任何东西在你眼里都是钉子
，颜文字输入法开发者，前端乱炖创始人，大…
、、知乎用户 等人赞同
瞎说两句：1. 为什么所有语言都想用来写ios？现在还有不能写ios的语言么？2. 看了新闻，感觉还是ionic的思路，可能会更向native渗入一步？用native渲染UI？不过感觉不太可能。3. ionic这种框架并非无用武之地，面向B端的大型移动端CRM管理系统，多人协作，N多操作业务集合，和后台数据极重的业务耦合，这种场景下，考察来考察去，ionic是最适合的，目前感觉没有其他非常成熟的能够应用到生产中的框架。性能方面也不是非常不堪，性能方面ionic做的优化还是不错的，虽然并非完美。4. React和angularjs，没有特别深入，不过我作为一个开发者，并不关心他们的实现有多取巧，性能有多棒，模式有多新颖。我最关心的一点，开发方不方便？是否足够简单？团队开发快速上手？目前没看到React的优势，可能是了解不够多，但是感觉angularjs足够了，也不想了解更多。
知乎用户，计算机研究生
看了那个keynote，我看到的是脸书说他们的js跑到了一个单独的线程里面，所以很流畅。从这个思路来说，应该是直接用native ui的程序员不会注意写多线程，而用了react native 天生并发加成？
HHVM有什么意义？
，I love software.
Titanium () 就是和 React Native 一样的逻辑，用 js 调用原生控件。这样很好，解决了界面体验问题。不过也有没解决的问题。他们无法代替原生的 API，很多效果，开源的控件，都要用原生的代码来实现。简单的 app 没什么问题。遇到复杂的 app，还是原生代码来的靠谱。
知乎用户，android
服务器端有js语言的node.js，现在客户端又有了个js的react native，前端js，正所谓learn once write anywhere。虽然各个平台的东西需要熟悉，最起码语言层面可以节省一些不必要的精力。
馆藏&23062
TA的最新馆藏
喜欢该文的人也喜欢