react-native-guide

by reactnativecn

reactnativecn /react-native-guide

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

16.1K Stars 3.7K Forks Last release: Not found 157 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React-Native学习指南

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

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

目录

教程

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/0122react-nativefirst_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

  • 开源中国的[email protected]客户端 http://git.oschina.net/rplees/react-native-gitosc

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

  • 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.