React Native之React速学教程(上)

Posted by manbetx客户端应用下载 on August 9, 2016

期待已久的新教程上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!

React Native之React速学教程(上)

本文出自《React Native学习笔记》系列文章。

React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习,我将《React Native之React速学教程》分为三篇,大家可以根据需要进行阅读学习。

概述

本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。

What’s React

React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面。

  1. 当数据改变时,React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测,更容易调试。
  2. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的,而不是模板,所以你可以轻松地通过您的应用程序传递丰富的数据,并保持DOM状态。
  3. 一次学习随处可写,学习React,你不仅可以将它用于Web开发,也可以用于React Native来开发Android和iOS应用。

不是模板却比模板更加灵活:

Component

心得:上图是GitHub Popular的首页截图,这个页面是通过不同的组件组装而成的,组件化的开发模式,使得代码在更大程度上的到复用,而且组件之间对的组装很灵活。

Get Started

使用React之前需要在页面引入如下js库 。

  • 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官网下载这些库,也可以将其下载到本地去使用。

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

使用React

解压从上述地址下载的压缩包,在根目录中创建一个包含以下内容的 “helloworld.html” 。

   
           
           charset=
           "UTF-8" 
           /> 
           </span>Hello React!<span class="nt"> 
            
            
            
            
            
           
             
             id=
             "example"
             >
            
          

在 JavaScript 代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用