React Native开发之快速入门React

前言

这篇文章，是接着之前的一篇入门文章写的（虽然已经过去大半年了）,本文的受众仍然是React小白，熟悉React的同学可以不看了。上一篇文章链接：

• 为React Native开发写的JS和React入门知识

上一篇文章主要介绍了JS的语言基础和React的component生命周期。本文会接着上一篇文章，继续讲解React的基础。

本文的React Native版本是0.0.40,开发IDE是Atom+Nuclide，IDE环境搭建可以参考我的这一篇文章。

• React Native开发之IDE（Atom+Nuclide）安装，运行，调试

如果你有足够的时间，非常建议看看React的官方Getting start文档。

---

准备工作

初始化一个RN的工程，

react-native init ReactBasics

然后，在iOS模拟器（安卓也可以）上运行这个工程。

react-native run-ios

本文所有的代码修改都在index.ios.js中（如果是安卓模拟器，修改index.andorid.js）.

默认的ReactBasics代码是这样子的

//...
export default class ReactBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{
  '\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}
//...

我们修改为这样

export default class ReactBasics extends Component {
   
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Let us learn React.
        </Text>
      </View>
    );
  }
}

然后，运行模拟器

react-native run-ios

看到的如下截图：

---

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࿰