JSRUN 用代码说话

编写Hello World

编辑教程

React Native看起来很像React,只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构,首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性。如果你已经了解了React,那么还需要掌握一些React Native特有的知识,比如原生组件的使用。这篇教程可以供任何基础的读者学习,不管你是否有React方面的经验。

让我们开始吧!

Hello World

根据历史悠久的“传统”,我们也来写一个“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——没错,这是“未来”的JavaScript.

首先你需要了解ES2015 (也叫作ES6)——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现,所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的importfromclassextends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话,可以看看阮一峰老师的书,还有论坛的这篇总结

示例中的这一行<Text>Hello world!</Text>恐怕很多人看起来也觉得陌生。这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法,让你在结构标记中嵌入代码。React反其道而行之,设计的JSX语法却是让你在代码中嵌入结构标记。初看起来,这种写法很像web上的HTML,只不过使用的并不是web上常见的标签如<div>或是<span>等,这里我们使用的是React Native的组件。上面的示例代码中,使用的是内置的<Text>组件,它专门用来显示文本。

组件

上面的代码定义了一个名为HelloWorldApp的新的组件(Component)。你在编写React Native应用时,肯定会写出很多新的组件。而一个App的最终界面,其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

这个示例弱爆了!

……是的。如果想做些更有意思的东西,请接着学习Props属性。或者可以看看一个稍微复杂些的“电影列表”例子

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟