[React-Native]入门(Hello World)

(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。

(2)在Mac上安装Xcode,建议Xcode 6.3以上版本

(3)安装node.js:https://nodejs.org/download/

A,使用Homebrew安裝nvm :$ brew install nvm

安裝完後,為了讓你可以直接在shell使用nvm指令,必須在你的 .bash_profile 加入以下這行(習慣把設定放在.bashrc的人可以把以下的.bash_profile改成.bashrc)

source $(brew --prefix nvm)/nvm.sh

或者直接輸入以下這行來加入

$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

記得重新source你的 .bash_profile 來讓設定生效

$ . ~/.bash_profile

OK,以上就完成了nvm的安裝,簡單吧!

使用nvm安裝Node.js

安裝完了nvm,接著安裝主角node。先用$ nvm ls-remote指令看一下有哪些版本可以安裝:

$ nvm ls-remote

v0.10.20

v0.10.21

v0.10.22

v0.10.23

v0.10.24

v0.11.0

v0.11.1

v0.11.2

v0.11.3

v0.11.4

v0.11.5

v0.11.6

v0.11.7

v0.11.8

v0.11.9

v0.11.10

直接用$ nvm install 指令安裝官網上建議的版本:

$ nvm install v0.10.24

######################################################################## 100.0%

Now using node v0.10.24

也同時安裝最新版來測試nvm的版本管理功能:

$ nvm install v0.11.10

######################################################################## 100.0%

Now using node v0.11.10

使用nvm無痛切換Node.js版本

在介紹使用nvm切換版本前,先簡單說明nvm的工作原理。

nvm會把各個版本的node安裝在/usr/local/opt/nvm底下。我們可以看看該目錄底下放了哪些東西:

$ ls /usr/local/opt/nvm

INSTALL_RECEIPT.json  LICENSE.md  alias  bin  nvm.sh  v0.10.24  v0.11.10

我們可以發現透過nvm安裝這兩個版本,事實上會在nvm目錄下另外建立了v0.10.24以及v0.11.10兩個目錄來分別存放node的binary檔。又nvm會在你的$PATH最前面安插指定版本的目錄,透過這個方式你在使用node指令時就會用指定的版本來運作了。

實際確認PATH的值看看:

$ echo $PATH

/usr/local/opt/nvm/v0.11.10/bin: ...

nvm的用法非常的簡單。我們可以另外用$ nvm ls指令確認nvm目前可以管理的版本有哪些:

$ nvm ls

v0.10.24

v0.11.10

current:    v0.11.10

由於透過nvm安裝node,會自動把最後安裝的版本設為目前使用中的版本,因此上述指令會看到current: v0.11.10,表示我們目前正在使用v0.11.10

我們可以用$ nvm use 切換版本:

$ nvm use v0.10.24

Now using node v0.10.24

也可以偷懶一點,不用打完整的版號:

$ nvm use 0.10

Now using node v0.10.24

切換成別的版本看看:

$ nvm use 0.11

Now using node v0.11.10

夠簡單吧!

不過問題來了,如果你另外開一個shell視窗,並輸入nvm,會發現current version是空的:

$ nvm ls

v0.10.24

v0.11.10

current:

這是因為利用nvm use指令只會在當前的shell生效,當你開了新的shell就會發現

PATH的值已經不包含剛才設定的node目錄了。要解決這個問題就是利用

nvm alias default 來設定一個預設的node版本:

$ nvm alias default 0.10

default -> 0.10 (-> v0.10.24)

此時再打開另一個shell視窗,就可以直接使用你所設定的node版本了。

實際跑跑看Node.js

我們直接拿官網的例子來試試看

先產生一個example.js的檔案:

$ touch example.js

內容如下

http = require(‘http‘);

http.createServer(function (req, res) {

res.writeHead(200, {‘Content-Type‘: ‘text/plain‘});

res.end(‘Hello World\n‘);

}).listen(1337, ‘127.0.0.1‘);

console.log(‘Server running at http://127.0.0.1:1337/‘);

執行看看

$ node example.js

Server running at http://127.0.0.1:1337/

打開瀏覽器,輸入http://127.0.0.1:1337,如果看到 “Hello Word” 就代表成功了

後記

(4)建议安装watchman,终端命令:brew install watchman

(5)安装flow:brew install flow

(6)安装命令行工具 sudo npm install -g react-native-cli (如果连不上则切换国内镜像 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org再运行 sudo cnpm install -g react-native-cli)

三、Hello, React-Native

现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:

打开终端,开始React-Native开发的旅程吧。

(1)创建一个空项目:终端输入:react-native init HelloWorld

(2)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。

(3)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。

启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

时间: 2024-10-22 03:03:37

[React-Native]入门(Hello World)的相关文章

React Native入门-刘望舒

React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性)和State(状态)

React Native 入门宝典

声明:该书的笔者为徐嬴老师,一名具有5年IOS开发经验,和两年RN开发经验的老司机. 原文可以在gitbook上找到 笔者只是为他的书中提的的一些列问题,进行有偿答疑. 有偿答疑.本书将持续保持更新,有关问题可以加群讨论. 正在上传...取消 简介 笔者在研究ReactNative过程中,发现其中文资料相对较少,已出版的大部分图书资料都已过时.Facebook中的ReactNative开发团队以每月更新一版的速度在向前推进版本. 为更好的让广大开发者快速入门ReactNative,笔者结合自身开

React Native入门(二)Atom+Nuclide安装、配置与调试

相关文章 React Native入门 前言 上一篇文章我们搭建了开发环境,并写了个Hello World.这一节我们来学习React Native的开发IDE:Atom+Nuclide的安装.配置与调试.本文所讲的内容只适用于Mac平台. 1.开发IDE选择 React Native的开发IDE有很多种,比如FaceBook 官方推荐的 Atom+Nuclide.Android Studio的同门WebStorm(收费).Sublime Text 3.Visual Studio Code和De

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native入门(一)环境搭建与Hello World

前言 目前关于React Native的教程很多,官方文档写的也不错,但是感觉大部分教程写的不是很清楚,导致我各种碰壁.因此我来写一个简洁的教程.本篇文章基于React Native 0.43,只适用于用Windows平台的Android开发者. 1.配置React Native 首先我们要先来安装一些软件,如下所示. Chocolatey Chocolatey是一个Windows上的命令行包管理器,安装了Chocolatey就可以通过命令行来安装一些我们需要软件.我们打开cmd命令行程序使用如

React Native入门-实战解析(上)

来自Leo的原创博客,转载请著名出处 我的stackoverflow 概述 随着app端越来越复杂,迭代越来越快,很多app采用原生+html5的方式来实现,然后不知道什么时候,它就有了个高大上的名字 - hybrid app.类似的框架也很多,比较有名的有 Ionic PhoneGap 这种app的原理是,用webview来实现类似原生的界面,也就是用h5写的代码是运行在webview里的.优点很明显 动态部署(不需要每次通过应用商店的审核,尤其是iOS,审核有时候真的觉得两颗蛋不够疼的.)

React Native入门遇到的一些问题

本文示例参考自<React Native第一课> React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo     安装开发所需要的环境,参考这里>>   我所遇到的几个问题: 1) 安装brew curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/

《React Native入门与实战》读书笔记(1)

ReactNative介绍 它的底层引擎是JavaScript Core,调用的是原生组件而非HTML5组件(HTML+CSS+JavaScript构建的组件).运行时,可以做到与Native App媲美的体验,同时因为JavaScript代码可以使用后端强大的Web方式管理,既可以做到高效开发,也可以做到快速部署和问题热修复.React Native APP运行在客户的手机上,而控制端可以在后端,可以充分发挥Web的能力,就像一个牵线木偶,任凭你表演. 环境搭建 安装Node.js最新版本 h

React Native ——入门环境搭配以及简单实例

一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 1.我们可以先通过在终端输入: brew -v 如果没有安装就输入Homebrew的镜像路径去下载 2.拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果