React Native 系列(二) -- React入门知识
前言
本系列是基于React Native
版本号0.44.3
写的,最初学习React Native
的时候,完全没有接触过React
和JS
,本文的目的是为了给那些JS
和React
小白提供一个快速入门,让你们能够在看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
JSX
是JavaScript
语言的扩展,它并不改变JS
本身语法。使用起来类型XML
,React
会对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
- 大写字母开头会被认为是自己创建的或者
import
的component
所以,自定义的component
必须是大写字母开头
举个
React Native 系列(二) -- React入门知识的更多相关文章
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React Native 系列(二)
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...
- SpringBoot系列(二)入门知识
SpringBoot系列(二)入门知识 往期推荐 SpringBoot系列(一)idea新建springboot项目 引言 本来新建springboot项目应该放在入门知识这一章的,但是由于新建spr ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- React Native 系列(一)
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React Native 系列(七) -- ListView
前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- React Native 系列(七)
前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...
随机推荐
- web移动端布局方式整理
写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...
- ip地址0.0.0.0与127.0.0.1的区别(转载)
原文链接:http://blog.csdn.net/ttx_laughing/article/details/58586907 最近在项目开发中发现一个奇怪的问题,当服务器与客户端在同一台机器上时,用 ...
- 执行3小时超长SQL的分析优化过程:从索引遇见IS NULL,到最佳实践
月底高峰期,对一个典型项目抽查分析时,发现了一个超级慢.全表扫描的SQL,语句很简单,AWR中赫然在列,在我统计的截止时间内还没有结束... 使用v$active_session_history进一步 ...
- 【LeetCode】289. Game of Life
题目: According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a ce ...
- 【Android Developers Training】 38. 文件共享需求
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Disruptor的应用示例——大文件拆分
结合最近Disruptor的学习,和之前一直思考解决的大文件拆分问题,想到是否可以使用Disruptor作为生产者/消费者传递数据的通道呢?借助其高效的传递,理论上应当可以提升性能.此文便是此想法的落 ...
- FileMethods
}else { System.out.println("不能写入此文件"); } System.out.println("此文件最后修改时间是2000年1月1日后的&qu ...
- wampserver2.5局域网IP访问配置
wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...
- Java字符串格式化记录
最近打log的时候用到了字符串的格式化. Java中String格式化和C语言的很类似.把情况都列出来,以后好查询. public static void main(String[] args) { ...