• 2019独角兽企业重金招聘Python工程师标准>>> ...

    语法
    首先 React Native 所使用的语法是 JavaScript。
    首推书籍是 JavaScript 高级程序设计(第3版)购书地址:http://item.jd.com/10951037.html
    把本书的前 7 章看完,就能很好的了解 JS 的基础语法。不用看 BOM DOM 之后的章节,这块是针对游览器的。

    React Native V0.18 之前采用的是 JavaScript 的 ECMAScript5 的标准,之后采用的是 ECMAScript6 (ES2016) 的标准,进行编程。
    这部分要学习的是 ECMA2016 http://es6.ruanyifeng.com/
    主要的是 let和const命令 变量的结构赋值 Iterator和for..of循环 Class Module 这几章。

    框架
    以上是语法部分,接着我们知道,React Native 是基于 React 框架的搭建而成的。
    通过官网学习 React 就好 https://facebook.github.io/react/index.h...

    以上是基础部分,接着轮到我们的主角登场 React Native 官网就好,现在接口更新快,中文的文档难免不全。
    React Native 官网 https://facebook.github.io/react-native/
    中文 http://reactnative.cn/

    官网中有 ECMA6 的语法,也有 ECMA5 的语法,不熟悉的地方可以查询
    ES5 和 ES6 的语法对照 http://bbs.reactnative.cn/topic/15/react...

    设计模式
    有了以上基础之后,可以通过 React Native 搭建一个小 demo ,但是做一个大型程序,还必须控制其中的数据流。
    Redux 是基于 facebook 提出的 Flux 的设计模式设计的一个库
    官网地址 http://redux.js.org/
    中文地址 http://camsong.github.io/redux-in-chines...

    转载于:https://my.oschina.net/u/2444569/blog/3045408

    展开全文
  • 30天学习ReactNative教程

    2020-06-20 10:35:12
    30天学习React Native教程
  • 学习ReactNative的现阶段,学习资料并不是那么的多。我们要寻找适合自己的资料才能有效的达到开发的要求。 * **构建 Facebook F8 2016 App / React Native 开发指南** http://f8-app.liaohuqiu.net/ ...

    学习ReactNative的现阶段,学习资料并不是那么的多。我们要寻找适合自己的资料才能有效的达到开发的要求。



    * **构建 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


    * Use React Native in Existing iOS App

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


    * 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.js


    * react.js中文文档

    http://reactjs.cn/


    * 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


    ### 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


    ### 系列教程


    * 深入浅出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探索系列教程


    * 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/facebook/react-native/tree/master/Examples


    * **Facebook F8 App**

    https://github.com/fbsamples/f8app


    * 奇舞周刊 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  


    * **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/AndroidWeb、桌面多端)

    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 - react-native的一些example https://github.com/joggerplus/ReactNativeRollingExamples


    * **Reading App Write In React-NativeStudying and Programing**

    https://github.com/attentiveness/reading


    * 数独 - 重拾纯粹数独的乐趣

    https://github.com/nihgwu/react-native-sudoku



    ## 图书

    * 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


    * 下拉刷新组件

    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


    * react-native-gitfeed - GitHub客户端(iOS/Android)

    https://github.com/xiekw2010/react-native-gitfeed


    ## 工具


    * 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


    * **Deco IDE - React Native IDE**

    https://www.decosoftware.com/


    * **ignite - React Native CLI项目生成器**

    https://github.com/infinitered/ignite


    ## 资源网站


    * 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/


    * 11React 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


    ## 业界讨论

    * 跨平台开发时代的 (再次) 到来?( XamarinNativeScript 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


    * NativeWeb的融合 - QconReact-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其实也就不到1年,不算长,也不算短。 Paul Graham在文章中写过:大多数人真正注意到你的时候,不是第一眼看到你站在那里,而是发现了过了这么久你居然还在那里。 我就是Paul提到的"大多数...

    React Native不到两岁,兼容Android平台刚刚1年。我学习React Native其实也就不到1年,不算长,也不算短。

    Paul Graham在文章中写过:大多数人真正注意到你的时候,不是第一眼看到你站在那里,而是发现了过了这么久你居然还在那里。

    我就是Paul提到的"大多数人",当React Native刚出来的时候,我就通过CSDN等一些平台了解了React Native,但是并没有真正的关注它。

    过了半年多,发现React Native不但还依然存在,而且还产生了不错的React Native社区。从此开始逐渐关注React Native。

    至于为什么深入学习React Native,有以下几点原因。

    一、开发React Native很少使用设计模式

    对,你没有看错,确实是很少使用设计模式。有人会问我,这也算学习的理由? 我先搁置一下,先给大家讲个绝大多数人都听过的故事。

    金庸小说中独孤求败的剑冢中,埋的是独孤求败一生几个阶段中用过的几柄剑。

    第一柄是一柄青光闪闪的无名利剑。凌厉刚猛,无坚不摧,弱冠前以之与河朔群雄争锋。 第二柄是紫薇软剑,三十岁前所用,误伤义士不祥,乃弃之深谷。 第三柄是玄铁重剑,重剑无锋,大巧不工,四十岁之前恃之横行天下。 第四柄是柄已腐朽的木剑,原因是独孤求败「四十岁后,不滞于物,草木竹石均可为剑」

    独孤求败一生境界阶段分为利剑级、软剑级、重剑级、木剑级,对应用不同的武器。

    而程序员编程阶段同样分为几个阶段。

    1. 利剑级,利剑招式一般直接。刚入职场的程序员,技术有限,一般都是以实现功能为主要任务,不考虑性能,模式。
    2. 软剑级,就是在招式已经发挥到极致的基础上追求变化的极致;当程序员迭代过几次项目,就会认识到程序存在的问题,代码也会更加规范。
    3. 重剑级,相比于软剑是一种质的飞跃;当程序员工作多年后,做过好多项目,慢慢就会了解各种模式,融会贯通,达到架构师的高度。
    4. 木剑级,基本上达到人剑合一的境界; 这也是我主要要讲的境界,能够回到程序的本质。

    回到程序的本质,程序的形式应该仅仅反应它所要解决的问题。

    当我们开发程序一段时间后,就会发现编程已经变得制度化了,尤其是使用面向对象的语言,我们大量听到 模式(pattern)这个词,但是我们应该想到模式并不应该存在的。 程序就是为了要解决问题,而在代码中其它任何外加的形式都是在告诉我们,表明对问题的抽象不够深,这些原本应该让编程语言本身去实现。

    当我使用原生代码开发Android程序的时候,用到了大量设计模式——工厂设计模式,适配器设计模式,单例设计模式等等一大堆。一开始的时候自我感觉良好,认为自己很牛逼,面试别人或者自己去面试时都会显摆下。后来我就想,Android框架为什么不提供更深的抽象,让我直接实现具体的功能,而不用使用各种模式搭建各种框架呢?

    当我接触React Native时,虽然React Native也需要用到一些模式(现阶段很难避免的),但是React Native整体设计架构要比Android强很多,非常直接。

    举个例子,在React Native开发中,我们要改的数据统一放在状态机中,只要改动状态机里的数据,界面上不管有多少处,只要和改动的数据相关联都会发生改变。而在Android原生开发中,可能需要把多处要改变的封装到一起,进行操作,无疑多了一步封装。

    代码更加直接,就意味着程序更加好维护。程序更好维护,就意味着成本更低。

    二、学习成本比较高

    第二点让我学习的理由就是React Native学习成本相对比较高,也许之前的理由你接受了,这个可能又会让你抓狂,为什么学习成本高还要去学习啊?

    往往学习成本高的才更加值得去学习!

    React Native学习成本确实很高, 你首先肯定需要学习JSX语法,React知识,学习ES6,函数式编程思想。如果你想了解React Native构建的还需要学习nodejs。封装原生组件还需要学习 java,object-c,swift, 也就是需要学习Android和ios原生开发。设计到通讯原理还需要了解C++。

    有些程序员可能会因为想炫耀自己见多识广,会告诉你“所有编程语言基本相似”,“语言不重要,重要的是理解”;其实上面说的是一派胡言,每种语言从语法到概念,都不一样。你学会其中一门语言对你学另一门语言的好处就是你可以进行对比,加深学习的印象。

    虽然学习成本很高,但是通过学习React Native而掌握这么多技术并不是什么坏事。React Native其实就把各种知识打成一个压缩包,让我们更有效率的学习。

    React Native技术,同时具备可测量性和可放大性。

    React Native既可以开发Android也可以开发IOS,尤其是写界面的速度非常快。通过测量完成的程序,理论上你可以是一名普通的Android/IOS程序员的两倍。

    微软也开发了Windows Phone的React Native版本。通过React知识,你可以轻松写出Web端程序。甚至在微信小程序中都能找到React Native的影子。

    我们这个世界,你向下沉沦或者向上奋进都取决于你自己,不能把原因推给外界。有些刚毕业的学生一听到5%的人占社会50%的财富,往往认为是不公平的。从程序员的角度,我也认为是不公平的,因为5%的程序员写出了全世界99%的优秀软件,他们就应该占更高比例的收入。

    一个React Native程序员就应该是一个普通的Android/iOS程序员工资的两倍,并没有什么问题。

    三、React Native还不是很完善

    React Native还有很多坑,并不完善,React Native几乎每个月都有新的小版本发布,至今还没有推出1.0正式版本。这也恰恰使我们学习React Native的理由!

    前几年,我在北京上班时经常听到javaEE程序员抱怨自己开发了这么多年不如一个新入职的Android/iOS程序员工资高。 其实很好理解啊,难道不知道技术越新越值钱这个道理吗?

    程序员就像蚊子一样,群体很多,在后厂村路上10个估计有7个是程序员,但是每个程序员个体压力又很大,想生存必须吸取新鲜的血液。

    目前使用React Native的公司不是很多,当你作为一个产品经理或CTO时,你肯定优先跟随大多数人的选择的做法,有个专业术语叫做“业界最佳实践”。因为这个词出现的原因就是为了产品经理/CTO 推卸责任。既然我选择的是“业界最佳实践”,如果不成功,不是我的问题,而是“业界”的问题。

    但是如果你是一名程序员按照上面的做法你会死的很惨,因为“业界最佳实践”会逐渐变化的,一旦你掌握的技能不是“业界最佳实践”了,你就要想办法让你的房贷别断供了。

    React Native不会取代Android/iOS原生开发,但随着React Native正式版推出,也许它就变成了“业界最佳实践”了。

    关于如何学习React Native

    如果想快速入门React Native,官方Api是肯定需要看的。里面不但有文档而且有例子,涵盖了绝大多数知识。 facebook.github.io/react-nativ… 英文不好的话,可以参考react-native中文文档(建议也要对比英文文档) react-native.cn/docs/gettin…

    FaceBook官方也提供了演示App,可以作为参考 github.com/facebook/re… facebook开源的f8项目也是蛮不错的 github.com/fbsamples/f…

    ##总结 没有人有任何义务去看任何一篇文章,当您点击我的文章时就已经很看得起我了,我非常感谢您,也许我的观点并不是对的,但是我相信时刻保持一颗学习的心永远是对的。

    展开全文
  • 我可以说是从0开始学习React Native,之前学习的人少,自己也走了不少弯路,以后能把自己的一些想法或者是学习方法写出来分享一下,让后来学习的同行们少走一些弯路。 自己理解的React1.React? 2

    React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。
    我可以说是从0开始学习React Native,之前学习的人少,自己也走了不少弯路,以后能把自己的一些想法或者是学习方法写出来分享一下,让后来学习的同行们少走一些弯路。

    自己理解的React

    1.React?
    2.React的特点
    3.JSX语法
    4.组件(Component)
    5.组件的属性、状态
    

    什么是React?

    React是一个用于组建用户界面的JavaScript库,让你更加简单的方式来创建交互式用户界面。
    个人认为的优点吧:
    1.React就是由许多个组件来组合而成的。
    2.数据改变的时候,React能高效的更新和渲染更新的组件。
    3.声明性视图让你的代码容易调试,自己能预测出效果
    4.封装管理自己的状态组件,将他们组成复杂的界面。
    5.由于组件逻辑是用JavaScript编写的,可以轻松地通过程序传递大量数据,并保持DOM状态。
    6.一次学习随时随地可以编写,学会了React,不仅可以轻松的开发web,也可以用于React Native来开发Android+ios应用。
    

    开始学习React

    使用React之前需要在[React官网](https://facebook.github.io/react/downloads.html)下载这些库,也可以将其下载到本地去使用。 
    -react.js
    -react-dom.js
    -browser.min.js
    上面一共列举了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。
    
    react.js是React的核心库
    react-dom.js是提供与DOM相关的功能
    browser.min.js的作用是将JSX语法转为JavaScript语法
    这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。  
    

    注意:我们实际在做React Native开发时,这些库作为React Native核心库已经被初始化在node_modules目录下,所以不需要单独下载。

    使用React写出我们非常熟悉的Hello World

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>

    在 JavaScript 代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用<script type="text/babel">标签,然后通过Babel转换成在浏览器中真正执行的内容。

    注意:
    ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );

    上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。

    JSX 和 HTML

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
    每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,使用JSX,组件的结构和组件之间的关系看上去更加清晰。
    JSX并不是React必须使用的,但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

    React.render(//使用JSX
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    ); 
    React.render(//不使用JSX
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );

    HTML标签 与 React组件 对比

    React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
    要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

    var myDivElement = <div className="foo" />;
    React.render(myDivElement, document.body);

    要渲染 React 组件,只需创建一个大写字母开头的本地变量。

    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    React.render(myElement, document.body);

    注意:
    - React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
    - 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性。

    JavaScript 表达式

    属性表达式

    要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。

    // 输入 (JSX):
    var person = <Person name={window.isLoggedIn ? window.name : ''} />;
    // 输出 (JS):
    var person = React.createElement(
      Person,
      {name: window.isLoggedIn ? window.name : ''}
    );

    子节点表达式

    同样地,JavaScript 表达式可用于描述子结点:

    // 输入 (JSX):
    var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    // 输出 (JS):
    var content = React.createElement(
      Container,
      null,
      window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    );

    React中注释

    JSX 里添加注释很容易;它们是 JS 表达式。需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。

    class ReactDemo extends Component {
      render() {
        return (     
          <View style={styles.container}>
            {/*标签子节点的注释*/}
            <Text style={styles.welcome}
              //textAlign='right'
              textShadowColor='yellow'
              /*color='red'
              textShadowRadius='1'*/
              >
              React Native!
            </Text>
          </View>
        );
      }
    }

    注意:
    在标签内要使用{/*注释的内容*/}
    在标签节点以外注释,和通常的注释是一样的,多行用/*多行注释的内容*/ 单行用//单行注释的内容

    修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。

    两种写法都能实现
    不推荐的:

      var component = <Component />;
      component.props.foo = x;
      component.props.bar = y; 

    推荐做法:

    var component = <Component foo={x} bar={y} />;

    Component

    React 允许将代码封装成组件(Component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。

    var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello {this.props.name}</h1>;
      }
    });
    ReactDOM.render(
      <HelloMessage name="MrQ" />,
      document.getElementById('example')
    );

    上面代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage />时,会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。

    注意

    • 组件类的第一个字母必须大写。
    • 组件类只能包含一个顶层标签(在开发React Native中一般是用View最外层的进行包裹)。

    组件的属性(props)

    我们可以通过this.props.XXX的形式获取组件对象的属性,对象的属性可以任意定义,但要避免与JavaScript关键字冲突。

    遍历对象的属性:

    this.props.children会返回组件对象的所有属性。
    React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.mapReact.Children.forEach 来遍历子节点。
    React.Children.map

    array React.Children.map(object children, function fn [, object thisArg])

    该方法会返回一个数组。
    React.Children.forEach

    React.Children.forEach(object children, function fn [, object thisArg])
    var NotesList = React.createClass({
      render: function() {
        return (
          <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
          </ol>
        );
      }
    });
    ReactDOM.render(
      <NotesList>
        <span>hello</span>
        <span>world</span>
      </NotesList>,
      document.body
    );

    PropTypes

    组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
    组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。

    var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });

    上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

    var data = 123;
    ReactDOM.render(
      <MyTitle title={data} />,
      document.body
    );

    这样一来,title属性就通不过验证了。控制台会显示一行错误信息。

    Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

    更多的PropTypes设置,可以查看官方文档
    此外,getDefaultProps 方法可以用来设置组件属性的默认值。

    var MyTitle = React.createClass({
      getDefaultProps : function () {
        return {
          title : 'Hello World'
        };
      },
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });
    ReactDOM.render(
      <MyTitle />,
      document.body
    );

    上面代码会输出"Hello World"

    ref 属性(获取真实的DOM节点)

    组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

    但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

    var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input"         onClick={this.handleClick} />
          </div>
        );
      }
    });
    ReactDOM.render(
      <MyComponent />,
      document.getElementById('example')
    );

    上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
    需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

    注意:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。

    state

    上文讲到了props,因为每个组件只会根据props 渲染了自己一次,props 是不可变的。为了实现交互,可以使用组件的 state 。this.state 是组件私有的,可以通过getInitialState()方法初始化,通过调用 this.setState() 来改变它。当 state 更新之后,组件就会重新渲染自己。
    render() 方法依赖于 this.props 和 this.state ,框架会确保渲染出来的 UI 界面总是与输入( this.props 和 this.state )保持一致。

    初始化state

    通过getInitialState()方法初始化state,在组件的生命周期中仅执行一次,用于设置组件的初始化 state 。

     getInitialState:function(){
        return {favorite:false};
      }

    更新 state

    通过this.setState()方法来更新state,调用该方法后,React会重新渲染相关的UI。
    this.setState({favorite:!this.state.favorite});

    var FavoriteButton=React.createClass({
      getInitialState:function(){
        return {favorite:false};
      },
      handleClick:function(event){
        this.setState({favorite:!this.state.favorite});
      },
      render:function(){
        var text=this.state.favorite? 'favorite':'un favorite';
        return (
          <div type='button' onClick={this.handleClick}>
             {text} 
          </div>
        );
      }
    });

    上面代码是一个 FavoriteButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    注意:由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

    展开全文
  • 学习React Native必看的几个开源项目
    展开全文
  • 学习React Native(1)

    2017-09-12 16:52:24
    学习React Native(1)打开官网React Native目标:通读一遍Getting Startednpm install -g create-react-native-app create-react-native-app AwesomeProject #这里发生错误 npm@5不支持,要求使用npm 4 npm i npm@4...
  • http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了。网络上知识...
  • React Native学习路线官网React Native教程React Native react.js react 教程2 ES6 Flex box Redux CSS JavaScript基础入门组件学习API模块使用RN进阶开源组件开源项目实战项目转载请标注地址:Geek马走日 ...
  • http://www.tuicool.com/articles/BrIvMvE http://www.tuicool.com/articles/BrIvMvE ... [译]推荐5个值得学习React Native的开源项目 时间 2016-04-16 09:03:23 Sug
  • 随着移动端开发和 React 的流行,越来越多的人想要学习 React Native。本文将向你推荐一些自学 React Native 的恳切建议,介绍一些关于 React Native学习资源,并推荐一些简单实用的开发工具。相信只要按照本文所...
  • React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  • React Native学习心得

    2019-04-15 18:24:37
    结合网址进行学习:https://reactnative.cn/ 讨论社区:https://www.facebook.com/groups/react.native.community React Native - 调试技巧及调试菜单说明(模拟器调试、真机调试):...
  • 转:值得推荐的React Native学习资料 https://github.com/reactnativecn/react-native-guide React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源...
  • React Native学习资料

    2018-08-23 02:06:23
    官网: React 官方网站:https://reactjs.org/ React Github网址:...React Native官方网站:https://facebook.github.io/react-native/ React Native Github网址:https://github.com/facebook/...
  • 如何学习React Native

    2017-03-09 17:18:56
    学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习React Native也不例外。以其中一个举例子.给大家演示下如何运行开源项目.(前提是你已经搭建好React Native环境了) 下载开源项目 ...
  • 学习React Native其实也就不到1年,不算长,也不算短。 Paul Graham在文章中写过:大多数人真正注意到你的时候,不是第一眼看到你站在那里,而是发现了过了这么久你居然还在那里。 我就是Paul提到的”大多数人”...
  • 最好的学习编码的方式就是读源码 -- 某个高级程序员 读源码是最好也是最有效的提升自身编码能力的方式,特别是当该项技术比较新然后它的标准还在不停改进的时候。ReactNatve就是其中一个。它的API随着每次发布还...
1 2 3 4 5 ... 20
收藏数 20,195
精华内容 8,078