Learn the Basics

React Native与React类似，但它使用本地组件而不是Web组件作为构建块。因此，要了解React Native应用程序的基本结构，您需要了解一些基本的React概念，如JSX，组件state，和props。如果你已经知道React，你仍然需要学习一些React-Native特有的东西，比如本地组件。本教程针对所有受众，无论您是否具有React经验。

让我们来做这件事。

你好，世界

根据我们人民的古老传统，我们必须首先构建一个除了说“Hello world”之外什么也不做的应用程序。这里是：

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    
  }
}

如果您感到好奇，可以直接在网页模拟器中播放示例代码。您也可以将其粘贴到您的App.js文件中，以在本地计算机上创建真实的应用程序。

这里发生了什么？

这里的一些东西可能不像你的JavaScript。不要惊慌。这是未来。

首先，ES2015（也被称为ES6）是对JavaScript的一系列改进，现在已成为官方标准的一部分，但尚未被所有浏览器支持，所以它经常在Web开发中还未被使用。React Native提供ES2015支持，因此您可以使用这些东西而不必担心兼容性问题。import，from，class，extends，和() =>在示例语法以上都是ES2015特征。如果您对ES2015不熟悉，您可以通过阅读本教程中的示例代码来阅读它。如果你愿意，这个页面可以很好地概述ES2015的功能。

在这个代码示例中的另一个不寻常的事情是<Text>Hello world!</Text>。这是JSX--一种在JavaScript中嵌入XML的语法。许多框架使用特殊的模板语言，可让您将代码嵌入标记语言中。在React中，这是相反的。JSX允许您在代码中编写标记语言。它看起来像HTML网页上，除了没有网络之类的东西<div>或者<span>，你可以使用反应的组分。在这种情况下，<Text>是一个只显示一些文本的内置组件。

组件

所以这个代码正在定义HelloWorldApp一个新的Component。当您构建React Native应用程序时，您会制作很多新组件。你在屏幕上看到的任何东西都是某种组件。一个组件可以非常简单 - 唯一需要的是render返回一些JSX来渲染的函数。

这个应用程序不会做太多

好点子。为了让组件做更有趣的事情，你需要了解道具。