reactnativecn / react-native-guide

React Native指南汇集了各类react-native学习资源、开源App和组件

React-Native学习指南

本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！

同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native

目录

• 教程
• React Native
• React.js
• ES6
• 系列教程
• 开源APP
• 图书
• 组件
• 工具
• 资源网站
• 业界讨论

教程

React Native

• 构建 Facebook F8 2016 App / React Native 开发指南 http://f8-app.liaohuqiu.net/

• React-Native入门指南 https://github.com/vczero/react-native-lesson

• 30天学习React Native教程 https://github.com/fangwei716/30-days-of-react-native

• React-Native视频教程(部分免费) https://egghead.io/technologies/react

• React Native 开发培训视频教程（中文|免费） https://www.gitbook.com/book/unbug/react-native-training/details

• react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html

• react-native中文文档(极客学院) http://wiki.jikexueyuan.com/project/react-native/

• react-native中文文档(react native中文网，人工翻译，官网完全同步) http://react-native.cn/docs/getting-started.html

• react-native第一课 http://html-js.com/article/2783

• 深入浅出 React Native：使用 JavaScript 构建原生应用 http://zhuanlan.zhihu.com/FrontendMagazine/19996445

• React Native通信机制详解 http://blog.cnbang.net/tech/2698/

• React Native布局篇 https://segmentfault.com/a/1190000002658374

• React Native 基础练习指北（一） https://segmentfault.com/a/1190000002645929

• React Native 基础练习指北（二） https://segmentfault.com/a/1190000002647733

• Diary of Building an iOS App with React Native http://herman.asia/building-a-flashcard-app-with-react-native

• React Native For Beginners – The Next Big Thing? https://devdactic.com/react-native-for-beginners/

• How To Implement A Tab Bar With React Native https://devdactic.com/react-native-tab-bar/

• tcomb-form-native使用视频教程(需翻墙) https://react.rocks/example/tcomb-form-native

• React Native分享记录 https://segmentfault.com/a/1190000002678782

• React Native构建本地视图组件 https://www.dobest.me/article/11

• react-native-android-lession(安卓系列教程) https://github.com/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/

• ReactNative之原生模块开发并发布——iOS篇 http://www.liuchungui.com/blog/2016/05/02/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-iospian/

• ReactNative之原生模块开发并发布——android篇 http://www.liuchungui.com/blog/2016/05/08/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/

• react-native的第一课 https://github.com/coderyi/blog/blob/master/articles/2016/0122_react-native_first_lesson.md

• React-Native专题系列文章 http://www.lcode.org/react-native/

• react native redux FeInn 从0到1让你学会搭建一个APP https://github.com/febobo/react-native-redux-FeInn

React.js

• react.js入门教程(gitbook) https://hulufei.gitbooks.io/react-tutorial/content/introduction.html

• react.js快速入门教程 - 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html

• react.js视频教程 http://react-china.org/t/reactjs/584

• React Native之React速学教程 https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B

ES6

• 深入浅出ES6（一）：ES6是什么 http://www.infoq.com/cn/articles/es6-in-depth-an-introduction

• 深入浅出ES6（二）：迭代器和for-of循环 http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop

• 深入浅出ES6（三）：生成器 Generators http://www.infoq.com/cn/articles/es6-in-depth-generators

• 深入浅出ES6（四）：模板字符串 http://www.infoq.com/cn/articles/es6-in-depth-template-string

• 深入浅出ES6（五）：不定参数和默认参数 http://www.infoq.com/cn/articles/es6-in-depth-rest-parameters-and-defaults

• 深入浅出ES6（六）：解构Destructuring http://www.infoq.com/cn/articles/es6-in-depth-destructuring

• 深入浅出ES6（七）：箭头函数Arrow Functions http://www.infoq.com/cn/articles/es6-in-depth-arrow-functions

• 深入浅出ES6（八）：Symbols http://www.infoq.com/cn/articles/es6-in-depth-symbols

• 深入浅出ES6（九）：学习Babel和Broccoli，马上就用ES6 http://www.infoq.com/cn/articles/es6-in-depth-babel-and-broccoli

• 深入浅出ES6（十）：集合 http://www.infoq.com/cn/articles/es6-in-depth-collections

• 深入浅出ES6（十一）：生成器Generators，续篇 http://www.infoq.com/cn/articles/es6-in-depth-generators-continued

• 深入浅出ES6（十二）：代理Proxies http://www.infoq.com/cn/articles/es6-in-depth-proxies-and-reflect/

• 深入浅出ES6（十三）：类Class http://www.infoq.com/cn/articles/es6-in-depth-classes

• 深入浅出ES6（十四）：let和const http://www.infoq.com/cn/articles/es6-in-depth-let-and-const

• 深入浅出ES6（十五）：子类Subclassing http://www.infoq.com/cn/articles/es6-in-depth-subclassing

• 深入浅出ES6（十六）：模块Modules http://www.infoq.com/cn/articles/es6-in-depth-modules

• 深入浅出ES6（十七）：展望未来 http://www.infoq.com/cn/articles/es6-in-depth-the-future

系列教程

• 深入浅出React（一）：React的设计哲学 - 简单之美 http://www.infoq.com/cn/articles/react-art-of-simplity

• 深入浅出React（二）：React开发神器Webpack http://www.infoq.com/cn/articles/react-and-webpack

• 深入浅出React（三）：理解JSX和组件 http://www.infoq.com/cn/articles/react-jsx-and-component

• 深入浅出React（四）：虚拟DOM Diff算法解析 http://www.infoq.com/cn/articles/react-dom-diff

• 深入浅出React（五）：使用Flux搭建React应用程序架构 http://www.infoq.com/cn/articles/react-flux

• react-webpack-cookbook中文版 http://fakefish.github.io/react-webpack-cookbook/

• Flex 布局语法教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

• React 初探 http://www.alloyteam.com/2015/04/react-explore/

• React虚拟DOM浅析 http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/

• react组件间通信 http://www.alloyteam.com/2015/07/react-zu-jian-jian-tong-xin/

• React 数据流管理架构之 Redux 介绍 http://www.alloyteam.com/2015/09/react-redux/

• React服务器端渲染实践小结 http://www.alloyteam.com/2015/10/8783/

• React Native Android 踩坑之旅 http://www.alloyteam.com/2015/10/react-native-android-steps-on-tour/

• React Native 之 JSBridge http://www.alloyteam.com/2015/05/react-native-zhi-jsbridge/

• React Native 研究与实践教程 https://github.com/crazycodeboy/RNStudyNotes

React Native探索系列教程

• React Native探索（一）：背景、规划和风险 http://www.infoq.com/cn/articles/react-native-overview

• React Native探索（二）：布局篇 http://www.infoq.com/cn/articles/react-native-layout

• React Native探索（三）：与 react-web 的融合 http://www.infoq.com/cn/articles/react-native-web

开源APP

研究源码也是一个很好的学习方式

• 官方演示App https://github.com/fbsamples/react-native-samples

• Facebook F8 App https://github.com/fbsamples/f8app

• 仿豆瓣APP https://github.com/jianxiaoBai/douban

• GitHub Popular(一个用来查看GitHub最受欢迎与最热项目的App)已上架 https://github.com/crazycodeboy/GitHubPopular

• 奇舞周刊 iOS 版（上架应用） https://github.com/fakefish/Weekly75

• react-native-dribbble-app https://github.com/catalinmiron/react-native-dribbble-app

• Gank.io客户端 https://github.com/Bob1993/React-Native-Gank

• Mdcc客户端(优质) https://github.com/Bob1993/mdcc-client

• Leanote for iOS(云笔记) https://github.com/leanote/leanote-ios-rn

• ReactNativeRubyChina https://github.com/henter/ReactNativeRubyChina

• HackerNews-React-Native https://github.com/iSimar/HackerNews-React-Native

• React-Native新闻客户端 https://github.com/tabalt/ReactNativeNews

• newswatch(新闻客户端) https://github.com/bradoyler/newswatch-react-native

• buyscreen(购买页面) https://github.com/appintheair/react-native-buyscreen

• V2EX客户端 https://github.com/samuel1112/v2er

• react-native-todo https://github.com/joemaddalone/react-native-todo

• react-native-beer https://github.com/muratsu/react-native-beer

• react-native-stars https://github.com/86/react-native-stars

• 模仿天猫首页的app https://github.com/hugohua/react-native-demo

• ReactNativeChess https://github.com/csarsam/ReactNativeChess

• react native 编写的音乐软件 https://github.com/Johnqing/miumiu

• react-native-pokedex https://github.com/ababol/react-native-pokedex

• CNode-React-Native https://github.com/SFantasy/CNode-React-Native

• 8tracks电台客户端 https://github.com/voronianski/EightTracksReactNative

• React-Native实现的计算器 https://github.com/yoxisem544/Calculator-using-React-Native

• 房产搜索app https://github.com/jawee/react-native-PropertyFinder

• 知乎专栏app https://github.com/LeezQ/react-native-zhihu-app

• ForeignExchangeApp https://github.com/peralmq/ForeignExchangeApp

• Segmentfault 客户端 https://github.com/fakefish/sf-react-native

• 糗事百科app https://github.com/stormhouse/QiuShiReactNative

• 孢子社区app https://github.com/Hi-Rube/baoz-ReactNative

• 深JS app https://github.com/fraserxu/shenjs

• Den - 房屋销售app* https://github.com/asamiller/den

• Noder-cnodejs客户端 https://github.com/soliury/noder-react-native

• 知乎日报Android版 https://github.com/race604/ZhiHuDaily-React-Native

• ziliun-react-native https://github.com/sonnylazuardi/ziliun-react-native

• react-native-weather-app https://github.com/shevawen/react-native-weather-app

• React Native Sample App(Navigation,Flux) https://github.com/taskrabbit/ReactNativeSampleApp

• TesterHome社区app https://github.com/qddegtya/A-ReactNative-TesterHome

• Finance - 股票报价app https://github.com/7kfpun/FinanceReactNative

• shopping - 购物app https://github.com/bigsui/shopping-react-native

• zhuiyuan - 追源cms app https://github.com/kazaff/ZhuiYuanDemo

• uestc-bbs-react-native - UESTC清水河畔RN客户端(with Redux) https://github.com/just4fun/uestc-bbs-react-native

• react-native-nw-react-calculator(iOS/Android、Web、桌面多端) https://github.com/benoitvallon/react-native-nw-react-calculator

• react-native-nba-app https://github.com/wwayne/react-native-nba-app

• 开源**的Git@OSC客户端 http://git.oschina.net/rplees/react-native-gitosc

• rn_bycloud 帮瀛律师端app https://github.com/liuchungui/rn_bycloud

• ReactNativeRollingExamples https://github.com/joggerplus/ReactNativeRollingExamples

• Reading App Write In React-Native（Studying and Programing https://github.com/attentiveness/reading

• 数独 - 重拾纯粹数独的乐趣 https://github.com/nihgwu/react-native-sudoku

• Shop-React-Native https://github.com/EleTeam/Shop-React-Native

• 掘金客户端 https://github.com/wangdicoder/JueJinClient

• cnblogs 客户端 https://github.com/togayther/react-native-cnblogs

• CC 速成班 https://github.com/1c7/CrashCourse-Chinese-ReactNative-App

• Movieapp https://github.com/junedomingo/movieapp

• 虎扑客户端 https://github.com/MelonRice/ReactNative-HupuJRS

• React Native Starter Kit https://github.com/mcnamee/react-native-starter-app

• uestc-react-native-ios - 电子科技大学「UESTC」iOS 客户端（With MobX） https://github.com/Vizards/uestc-react-native-ios

• React Native实现阅读器，模仿每日一文 https://github.com/ZeeeeeeNo/ReactNativeEveryDayRead

图书

• 《React Native入门与实战》 http://item.jd.com/11844102.html

• 《React Native开发指南》 http://www.ituring.com.cn/book/1846

• 《React Native跨平台移动应用开发》 http://item.jd.com/10372998311.html

• 《React Native：用JavaScript开发移动应用》 http://item.jd.com/11785195.html

组件

由于已经有较好的组件库网站，这里就不做总结。可以直接查看如下网站，过后可能精选一部分优质组件出来 :P

• React-native组件库（比较全的组件库） https://js.coach/

• React Native Modules http://reactnativemodules.com/

• 最佳轮播类组件 https://github.com/leecade/react-native-swiper

• react-native-simple-router https://github.com/react-native-simple-router-community/react-native-simple-router

• react-native-router-flux https://github.com/aksonov/react-native-router-flux

• rn-fetch-blob (Actual and updated repository for react-native-fetch-blob) https://github.com/joltup/rn-fetch-blob

• 下拉刷新组件 https://github.com/jsdf/react-native-refreshable-listview

• 模态框 https://github.com/brentvatne/react-native-modal

• react-native-navbar https://github.com/react-native-fellowship/react-native-navbar

• 滚动轮播组件 https://github.com/appintheair/react-native-looped-carousel

• HTML显示组件 https://github.com/jsdf/react-native-htmlview

• Material React Native (MRN) - Material Design组件库 https://github.com/binggg/mrn

• Paper - Material design for React Native组件库 https://github.com/callstack/react-native-paper

• react-native-gitfeed - GitHub客户端(iOS/Android) https://github.com/xiekw2010/react-native-gitfeed

• React-Native-Elements - React Native样式组件库 https://github.com/react-native-community/React-Native-Elements

• Shoutem UI - React Native样式组件库 https://github.com/shoutem/ui

• BlankApp UI - 高可定制和主题化的 React Native 组件库 https://github.com/blankapp/ui

• React Native Bouncing Ball - 在屏幕内弹跳球 https://github.com/hankzhuo/react-native-bouncing-ball

工具

• react-native-snippets(代码提示) https://github.com/Shrugs/react-native-snippets

• react-native-babel(使用ES6+) https://github.com/roman01la/react-native-babel

• sqlite for react-native https://github.com/almost/react-native-sqlite

• gulp-react-native-css(就像写css一样写React Style) https://github.com/soliury/gulp-react-native-css

• rnpm(React Native Package Manager) https://github.com/rnpm/rnpm

• Pepperoni - React Native项目初始化套件 https://github.com/futurice/pepperoni-app-kit

• react-native-rename (Rename Whole Package) https://github.com/junedomingo/react-native-rename

• Deco IDE - React Native IDE https://www.decosoftware.com/

• ignite - React Native CLI项目生成器 https://github.com/infinitered/ignite

• react-native-rename https://github.com/junedomingo/react-native-rename

资源网站

• React-native官网 http://facebook.github.io/react-native/

• React-China社区 http://react-china.org/

• React Native中文社区 http://bbs.react-native.cn/

• React-native组件库（比较全的组件库） http://react.parts/

• React Native Modules http://reactnativemodules.com/

• Use React Native 资讯站(使用技巧及新闻) http://www.reactnative.com/

• React Native Tools http://www.rntools.co/

• 11款React Native开源移动 UI 组件 http://www.oschina.net/news/61214/11-react-native-ui-components

• 稀土掘金的 React 标签 http://gold.xitu.io/#/tag/React.js http://gold.xitu.io/#/tag/React%20Native

业界讨论

• 跨平台开发时代的 (再次) 到来？（ Xamarin，NativeScript 和 React Native 对比） http://onevcat.com/2015/03/cross-platform/

• 谈谈 React Native - 唐巧 http://blog.devtang.com/blog/2015/02/01/talk-about-react-native/

• 如何评价React-Native? https://www.zhihu.com/question/27852694/answer/43990708

• React Native概述：背景、规划和风险 http://div.io/topic/938

• Native与Web的融合 - Qcon中React-Native演讲 http://www.infoq.com/cn/presentations/the-fusion-of-native-and-web

• 使用React Native一年后的感受 http://www.dobest.me/blog/2016/06/12/%E4%BD%BF%E7%94%A8React%20Native%E4%B8%80%E5%B9%B4%E5%90%8E%E7%9A%84%E6%84%9F%E5%8F%97/

• Weex & ReactNative & JSPatch大对比 http://awhisper.github.io/2016/07/22/Weex-ReactNative-JSPatch/

• weex&ReactNative对比 https://zhuanlan.zhihu.com/p/21677103

react-native-guide's Issues

开源App 能不能多更新些。现在ReactNative 版本都0.59.8

牛逼了

win 10 npm start失败

D:\ReactNative\myfour>npm start

[email protected] start D:\ReactNative\myfour
node node_modules/react-native/local-cli/cli.js start
events.js:160
throw er; // Unhandled 'error' event
^

Error: write EINVAL
at exports._errnoException (util.js:1022:11)
at WriteStream.Socket._writeGeneric (net.js:715:26)
at WriteStream.Socket._write (net.js:734:8)
at doWrite (_stream_writable.js:334:12)
at writeOrBuffer (_stream_writable.js:320:5)
at WriteStream.Writable.write (_stream_writable.js:247:11)
at WriteStream.Socket.write (net.js:661:40)
at WriteStream.stream.write (D:\ReactNative\myfour\node_modules\ansi\lib\newlines.js:36:21)
at Object.execFileSync (child_process.js:506:20)
at Object.run (D:/ReactNative/myfour/node_modules/react-native/local-cli/cliEntry.js:159:16)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node node_modules/react-native/local-cli/cli.js start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node node_modules/react-native/local-cli/cli.js start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the myfour package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/react-native/local-cli/cli.js start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs myfour
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls myfour
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\ReactNative\myfour\npm-debug.log

D:\ReactNative\myfour>npm bugs myfour

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "bugs" "myfour"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npm.taobao.org/myfour
npm ERR! 404
npm ERR! 404 'myfour' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR! D:\ReactNative\myfour\npm-debug.log

reactjs.cn 域名是广告页面

react.js中文文档 http://reactjs.cn/ 域名打开后是广告页面

开源项目年代久远

开源项目都是 4年前5年前 技术都更新好几轮拉

http://reactjs.cn/ 网址变成私服发布站了

官方示例链接 404

https://github.com/facebook/react-native/tree/master/Examples
这个链接失效了，更新下新地址啊，源码里没找到。

看过两篇react-native入门的文章

React Native For Beginners – The Next Big Thing?

How To Implement A Tab Bar With React Native

react-native-scrollable-tab-view

https://github.com/ptomasroos/react-native-scrollable-tab-view

是否需要更新react-native-router

根据react-native-router issues的提示，作者已经没有更新了，是否应该考虑按照里边描述的使用react-native-simple-router？

React

商城系统React-Native版、PHP版

希望以下两个开源软件可以放到你的列表里
React-Native版： https://github.com/EleTeam/Shop-React-Native
PHP版： https://github.com/EleTeam/Shop-PHP-Yii2

希望将下面链接收纳进列表

react-native包教不包会 https://github.com/febobo/react-native-redux-FeInn

React Native module link invalid

React Native 模块桥接详解 链接失效

Use React Native in Existing iOS App，链接不可用

http://blog-en.leapoahead.com/post/use-react-native-in-existing-ios-app

Hello，ele828。

http://www.dobest.me/post/react-native-build-native-componenets/ not found

可否考虑添加 RN 测试相关的学习资料？

如题，我本人也在网上搜了一遍，搜到的 RN 测试资料不仅少，而且浅

希望一直在更新

希望一直在更新

this source is 404

构建一个简单的列表页和2页导航 this page is 404.

这儿能联系到你吗？

我看了你的blog,实现android屏幕推送的，我想能不能要一份源码，或者说提供一下讲byte推送到服务器的机制。

仿豆瓣APP

https://github.com/jianxiaoBai/douban