首页 > 代码库 > [React-Native]入门(Hello World)

[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模拟器,具体的效果如下,说明你创建项目成功了。

技术分享

 

[React-Native]入门(Hello World)