react native 学习笔记之hello world

原创 2016年08月30日 20:09:16

准备知识:


首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性

其次你还需要了解ES2015 (也叫作ES6)——这是一套对JavaScript的语法改进的官方标准。但是这套标准

目前还没有在所有的浏览器上完整实现,所以目前而言web开发中还很少使用。React Native内置了对ES2015

标准的支持,你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。



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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>   //JSX语法,JSX即是一种在JavaScript中嵌入XML结构
    );
  }
}

// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp); //注册了一个组件,并且为整个应用的跟容器


参考网站:http://reactnative.cn/docs/0.31/tutorial.html#content

React Native 安装开发环境及如何编写Hello World程序

安装 node、react native 、android studio等开发工具,并演示如何开发第一个 react native 应用程序。...
  • aaronpan21
  • aaronpan21
  • 2016年05月22日 16:39
  • 383

React Native入门——环境配置及Hello World

最近React Native很火,这篇文章主要介绍如何快速创建一个RN应用,包含一些以后会用到的环境配置,适合希望初步了解React Native的读者,欢迎各位提出建议和问题!...
  • yuanguozhengjust
  • yuanguozhengjust
  • 2016年01月06日 14:08
  • 8295

react-native构建android hello world踩坑记

写在前面: 纯小白,记录自己踩过的坑 我傻我承认,有node环境的情况下又装了一遍node导致系统中有2个node版本 卒。。。。 解决方案 :重装nvm。。。辣么傻。。。 然后create-rea...
  • qq_37811211
  • qq_37811211
  • 2017年06月21日 17:47
  • 257

[ReactNative入门到精通]React Native 第一个程序 Hello Word

人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的。 React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有...
  • yzzst
  • yzzst
  • 2015年10月12日 01:35
  • 5209

react之“hello world”

我相信大家踏入编程语言的第一步就是“哈喽,我的”。恩,学会这一句,世界就会是我们的了。为了降低学习成本,首先避开了“繁琐”的服务器环境搭建,直接依赖浏览器环境,在客户端先熟悉一下React语法和一些基...
  • liuzijiang1123
  • liuzijiang1123
  • 2017年03月01日 19:47
  • 200

1、初识Reactjs——HelloWorld程序

一、Reactjs简介 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。 我们创造...
  • yubo_725
  • yubo_725
  • 2016年01月17日 14:32
  • 1478

React入门HelloWorld示例

1.概论 Facebook构建数据不断变化的大型应用。 数据变化——大量dom操作、逻辑及其复杂 自动dom操作 状态对应内容 特点: 简单 声明式 React的核心是组件,组件的设计目的是提高代码复...
  • u013063153
  • u013063153
  • 2016年09月08日 22:43
  • 541

react native 之hello world

前言:前几天将react native开发需要的环境给搭建了起来,并且也初始化了一个react native 项目,这篇文章接着上个阶段,将细致的一步到位的简单的告诉对面的你怎么去将初始化的react...
  • mysimplelove
  • mysimplelove
  • 2017年11月13日 13:45
  • 133

ReactJs实战-让人沮丧的HelloWorld

学习任何一门语言我们写出的第一个Demo,应该是Hello world了。相信第一个具有自主思想的智能机器人开口第一句话应该就是:Hello world, Human, Fuck you! 为什么取...
  • loveu2000000
  • loveu2000000
  • 2016年06月24日 22:16
  • 1540

深度学习之Helloworld

helloworld
  • gdmj77zzh
  • gdmj77zzh
  • 2017年07月21日 20:38
  • 725
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之hello world
举报原因:
原因补充:

(最多只允许输入30个字)