本系列是基于
版本号
- React Native
写的,最初学习
- 0.44.3
的时候,完全没有接触过
- React Native
和
- React
,本文的目的是为了给那些
- JS
和
- JS
小白提供一个快速入门,让你们能够在看
- React
语法的时候不那么费劲,有过前端开发经验的可以直接忽略。
- React Native
是一个
- React
框架,用来开发
- JavaScript
应用。
应用开发中,比较流行的有三个框架:
- Web
从名字上,就能看到
是基于
- react native
(都是
- React
出品)。
的设计思想是:
- React
应用都是基于状态的, 应用会随着数据的变化切换到不同的状态,将这种状态抽象为一个个
- React
,这样状态改变后,利用
- View
就在不同 的
- React
之间切换。这样,让代码更清晰可预测,也方便测试。
- View
把管理状态的封装成
- View
,然后再把这些
- Component
- Component
组合到一起来实现复杂的。
- UI
支持
- React
开发,
- Web
开发(
- Server
), 同样也支持本文提到的
- Node
开发(
- App
)。
- React Native
是
- 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
内置的标签。比如
- div
的
- import
- component
所以,自定义的
必须是大写字母开头
- component
举个
来源: http://www.cnblogs.com/scott-mr/p/7324206.html