1) React Native 简介与入门

作者: 朱_源浩 | 来源:发表于2016-07-29 17:24 被阅读4754次

    一、简介

    ReactNative.png

    React Native 是Facebook发布的,可以让我们广大开发者使用JavaScript和React开发我们的应用,该提倡组件化开发,也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。
    使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。
    现阶段Web APP的的体验还是无法达到Native APP的体验,所以这边fackbook更加强调的是“learn once, write everywhere”,应用前端我们使用js和React来开发不同平台的UI,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。

    React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率

    React Native项目成员Tom Occhino发表的React Native: Bringing modern web techniques to mobile详细描述了React Native的设计理念。
    Occhino认为尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:

    1. Native的原生控件有更好的体验;
    2. Native有更好的手势识别;
    3. Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。

    注意:
    目前react native在ios上仅支持ios7以上,Android仅支持Android4.1以上。

    二、框架简单描述

    reactnative超简框架.png
    1. React:不同平台上编写基于React的代码,“Learn once, write anywhere”。
    2. Virtual DOM:相对Browser环境下的DOM(文档对象模型)而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信。
    3. iOS/Android。(Web得通过React Web)

    三、什么是React和Native

    • 1.React

    React是Facebook开发的一款JS库.
    React是实际上就是一个JavaScript框架,用于构建“可预期的”和“声明式的”Web用户界面,它已经使Facebook更快地开发Web应用。

    更详细简介可以参考文章:http://www.jianshu.com/p/ae482813b791
    React入门可参考文章:http://www.ruanyifeng.com/blog/2015/03/react.html

    • 2.Native

    这里的理解,ReactNative里的Native值的是Native应用。
    Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。

    四、个人的学习路线

    • 1. 环境的搭建,初始化工程
    • 2. 对flex布局、css样式进行简单的学习和运用(原本没基础)
    • 3. es6语法(本人纯iOS开发,无JavaScript基础,只能简单了解下,再边运用边学习)
    • 4. 组件的简单编写,页面刷新
    • 5. 集成到原生项目,与原生交互
    • 6. 网络层、model层及数据处理

    五、推荐学习参考的网站/文章

    ReactNative 中文网:http://reactnative.cn/docs
    江清清的React Native专题:http://www.lcode.org/react-native/
    ES6入门:http://es6.ruanyifeng.com/#docs/class
    Flex布局入门:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool


    这是迈出的第一步。。。望支持

    开始在写React Native的学习教程,是一边研究一边编写的,已有的成果如下:

    1. React Native 简介与入门
      2) React Native 环境搭建和创建项目(Mac)
      3) React Native 开发之IDE
      4) React Native 入门项目与解析
      5) React Native 相关JS和React基础
      6) React Native 组件生命周期(ES6)
      7) React Native 集成到原生项目(iOS)
      8) React Native 与原生之间的通信(iOS)
      9) React Native 封装原生UI组件(iOS)
      ...继续努力中

    相关文章

      网友评论

      • 因幡白兔:同楼主 node+react
      • 朱_源浩:因为这系列文章已经是一年多前写的了,一年多时间rn已经更新了n次,有挺多具有兼容性问题,希望看的大家能将文章作为一个学习思路的参考,具体很多都要看官方文档学学:pray:
      • 9940298595eb:希望继续,我会看着你的文章学下去。如果可以希望加个好友
        朱_源浩:@码叶 加油加油,我因为工作原因所以没用上rn,只达到了入门能用的水平,现在的主要方向是iOS和node.js以及react前端,愿你能坚持熟悉这一门技术:blush:
      • 我想哟:您好楼主我想问一下RN能不能开发windowsPhone
        我想哟:@朱_源浩 好的 我查资料 好像也是不可以
        朱_源浩:@我想哟 貌似还不支持😂
      • 一个努力的boy:和楼主一样纯iOS开发,现在要开始react native,看到楼主的文章很不错,感谢
        朱_源浩:@一个努力的boy 工作没继续写这块了😂
        一个努力的boy:@朱_源浩 :joy: 看楼主的回复,难道已经放弃RN了吗?
        朱_源浩:加油。。楼主已经一半开发node.js和前端了。。rn研究过一阵子,写了差不多十篇文章,基础的知识和套路可以弄懂。。(文章可能会因为rn版本升级而有些兼容性问题,加油解决:grin:
      • 陈友辉:本人和楼主一样,纯iOS开发,不会JS,跟着楼主一起学习。共勉!
        刘超_a594:为什么不是java后台
        陈友辉: @朱_源浩 66666,一言不合就全栈了。
        朱_源浩:@陈友辉 楼主已经因为工作强行转成node.js加iOS同行了:sob:……一天不断切换node后台接口和iOS前端的感觉……酸爽

      本文标题:1) React Native 简介与入门

      本文链接:https://www.haomeiwen.com/subject/mxuzjttx.html