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