前言

本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过ReactJS,本文的目的是为了给那些JSReact小白提供一个快速入门,让你们能够在看React Native语法的时候不那么费劲,有过前端开发经验的可以直接忽略。

什么是React

React是一个JavaScript框架,用来开发web应用。Web应用开发中,比较流行的有三个框架:

  • react
  • angular
  • vue

从名字上,就能看到react native是基于React(都是Facebook出品)。React的设计思想是:

  • Declarative(交互式的)

    应用都是基于状态的,应用会随着数据的变化切换到不同的状态,React
    将这种状态抽象为一个个View,这样状态改变后,利用React就在不同
    View之间切换。这样,让代码更清晰可预测,也方便测试。

  • Component-Based(基于组件的)

    把管理状态的View封装成Component,然后再把这些Component
    组合到一起来实现复杂的UI

  • Learn Once, Write Anywhere(一次编写,多处编译)

    React支持Web开发,Server开发(Node),同样也支持本文提到的App开发(React Native)。

JSX

JSXJavaScript语言的扩展,它并不改变JS本身语法。使用起来类型XMLReact会对JSX的代码进行编译,生成JavaScript代码,用来描述React中的Element如何渲染。

上篇文章创建的项目中,index.ios.js里面的这段代码就是JSX语法:

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}

其中,

<Text style={styles.welcome}>
Welcome to React Native!
</Text>

会被编译成

React.createElement(
Text,
{style: styles.welcom},
'Welcome to React Native!'
)

注意:使用JSX,一定要在scope中,能够访问到React和对应的Element。比如刚刚的例子,在代码的最上面看到了这样的import

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';

tips: jsx编译结果在线查看
如果你的标签是空的,可以用/>进行close,比如:
<CustomComponent style={styles.welcome} />

大小写

JSX对大小写开头是敏感的

  • 小写字母开头会被认为是html内置的标签。比如div
  • 大写字母开头会被认为是自己创建的或者importcomponent

所以,自定义的component必须是大写字母开头

举个

React Native 系列(二)的更多相关文章

  1. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  2. 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

    http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...

  3. React Native 系列(七) -- ListView

    前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...

  4. React Native 系列(七)

    前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...

  5. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. React Native 系列(四) -- 布局

    前言 本系列是基于React Native版本号0.44.3写的.RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局. CS ...

  7. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  8. React Native 系列(六) -- PropTypes

    前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...

  9. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

随机推荐

  1. My latest news(--2016.12.31)

    2016.12.31  前一天晚上看 “纪实新闻” ,白天看视频,晚上刷题,看电影<湄公河行动> 2016.12.30 18:36 昨天上午考完了本学期的最后一门课程,下午乒乓+值班,今天 ...

  2. 分享一个彻底冻结对象的函数——来自阮一峰老师的《ECMAScript 6 入门》

    var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( ...

  3. 【CodeForces】698 C. LRU

    [题目]C. LRU [题意]给定空间为k的背包和n个物品,每次每个物品有pi的概率加入(Σpi=1),加入时若发现背包中已有该物品则不改变,若背包满k个物品后再加入新物品则弹出最早加入的物品,求加入 ...

  4. Caffe提取任意层特征并进行可视化

    现在Caffe的Matlab接口 (matcaffe3) 和python接口都非常强大, 可以直接提取任意层的feature map以及parameters, 所以本文仅仅作为参考, 更多最新的信息请 ...

  5. MSSQL 基础知识002

    ---启用sa账号 1. 先使用一个windows账号登陆. 2.在数据库实例上面右键,属性,安全性,登录名,sa. 右键,属性. 常规,修改sa的密码. 状态,启用sa账号. 主键的作用: 1.唯一 ...

  6. python作业Select版本FTP(第十周)

    SELECT版FTP: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 思路解析: 1. 使用IO多路复用的知识使用SELECTORS封装好的SELECTOR ...

  7. perl6 struct2-045 EXP

    测试站点: http://www.yutian.com.cn/index.action http://www.hjxzyzz.com:8088/pfw/login.action 代码如下: use v ...

  8. PyCharm 自定义文件和代码模板

    PyCharm提供了文件和代码模板功能,可以利用此模板来快捷新建代码或文件.比如在PyCharm中新建一个html文件,新的文件并不是空的,而是会自动填充了一些基础的必备的内容,就像这样: <! ...

  9. 不老的神器:安全扫描器Nmap渗透使用指南【转】

    介绍 nmap是用来探测计算机网络上的主机和服务的一种安全扫描器.为了绘制网络拓扑图Nmap的发送特制的数据包到目标主机然后对返回数据包进行分析.Nmap是一款枚举和测试网络的强大工具. 特点 主机探 ...

  10. 微信access_token和refresh_token保存于redis

    简介 通常理解的access_token和refresh_token access_token是用来对客户端进行认证的,类似与密码,有一定的有效期.当过期后可使用refresh_token重新获取一个 ...