ReactNavtive框架教程（1）
原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
注意：所有圖片放在了百度相簿空間，如果你看不到圖片，請複製圖片URL，然後貼上到位址列中進行檢視。
開始
ReactNative 框架可以在GitHub 獲得，你可以使用git clone命令或者直接下載zip包來獲取它。
ReactNative 使用了 Node.js，如果你的機器上沒有安裝Node.js，請先安裝它。 首先需要安裝 Homebrew。然後用brew命令來安裝Node.js:
brew install node |
然後安裝
brew install watchman |
然後安裝React Native 的CLI:
npm install -g react-native-cli |
npm將立即下載並安裝CLI。npm是一個類似CocoPods或Carthage工具。
定位到要開發React Native App的資料夾，使用命令：
react-native init PropertyFinder |
這將建立一個空的React Native專案。
在React Native專案資料夾中，node_modules資料夾將包含React Native 框架檔案。此外還有一個 index.ios.js
還有一個Xcode專案檔案及一個iOS資料夾，後者會有一些iOS程式碼用於引導ReactNavtive App。
開啟Xcode專案檔案，build&run。模擬器啟動並顯示如下介面：
與此同時Xcode還會開啟一個終端視窗，並顯示如下資訊：
=============================================================== | Running packager on port 8081. | Keep this packager running while developing on any JS | projects. Feel free to close this tab and run your own | packager instance if you prefer. | | https://github.com/facebook/react-native | =============================================================== Looking for JS files in /Users/colineberhardt/Temp/TestProject React packager ready. |
這是React Navtive Packager，它在node容器中執行。
千萬不要關閉這個視窗，因為這會導致Xcode終止App並重新執行它。
注意: 在開始接觸具體的程式碼之前（在本教程中，主要是js程式碼），我們將推薦 Sublime Text這個文字編輯工具，因為Xcode並不適合用於編寫js程式碼的。當然，你也可以使用 atom, brackets 等其他輕量級的工具來替代。
Hello React Native
用你喜歡的文字編輯器（例如Sublime Text）開啟index.ios.js ，刪除所有內容。然後加入以下語句：
'use strict'; |
這將開啟嚴謹模式，這會改進錯誤的處理並禁用某些js語法特性，這將讓JavaScript表現得更好。
注意: 關於嚴謹模式，讀者可以參考 Jon Resig的文章：“ECMAScript5 Strict Mode, JSON, and More”。
然後加入這一句：
var React = require('react-native'); |
這將載入 react-native 模組，並將其儲存到React物件。React Native 使用和Node.js 一樣的 require 函式來載入模組，類似於Swift中的import語句。
注意: 關於JavaScript 模組的概念，請參考 AddyOsmani的這篇文章。
然後敲入如下語句：
var styles = React.StyleSheet.create({ text: { color: 'black', backgroundColor: 'white', fontSize: 30, margin: 80 } }); |
這將定義一個css樣式，我們將在顯示“Hello World”字串時應用這個樣式。
接下來敲入如下程式碼:
class PropertyFinderApp extends React.Component { render() { return React.createElement(React.Text, {style: styles.text}, "Hello World!"); } } |
這裡我們定義了一個JavaScript 類。JavaScript類的概念出現自ECMAScript 6。由於JavaScript是一門不斷演變的語言，因此web開發者必須保持與瀏覽器的向下相容。由於ReactNative基於JavaScriptCore，因此我們完全可以放心使用它的現代語法特性，而不需要操心與老版本瀏覽器相容的問題。
注意:如果你是Web開發人員，我建議你使用新的JavaScript語法。有一些工具比如 Babel ，可以將現代JavaScript語法轉變為傳統JavaScript語法，這樣就能和老式瀏覽器進行相容。
PropertyFinderApp 類繼承自 React.Componen，後者是React UI中的基礎。Components包含了一些不可變屬性、可變屬性和一些渲染方法。當然，這個簡單App中，我們就用到一個render方法。
ReactNative 的Components不同於UIKit 類，它們是輕量級的物件。框架會將ReactComponents轉換為對應的本地UI物件。
最後敲入如下程式碼：
React.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp }); |
AppRegistry 代表了App的入口以及根元件。儲存檔案，返回Xcode。確保當前Scheme為PropertyFinder ，然後在模擬器執行App。你將看到如下效果：
看到了吧，模擬器將JavaScript程式碼渲染為本地UI元件，你不會看到任何瀏覽器的痕跡。
你可以這樣來確認一下：
在Xcode中，選中 Debug\ViewDebugging\Capture View Hierarchy，檢視本地檢視樹。你將找不到任何UIWebView例項。
在 Xcode 中開啟 AppDelegate.m，找到application:didFinishLaunchingWithOptions:方法。
在這個方法中，建立了一個RCTRootView，該物件負責載入JavaScript App並渲染相關檢視。
App一啟動，RCTRootView會載入如下URL的內容:
http://localhost:8081/index.ios.bundle |
還記得App啟動時彈出的終端視窗嗎？終端視窗中執行的packager和server會處理上述請求。
你可以用Safari來開啟上述URL，你將會看到一些JavaScript程式碼。在ReactNative 框架程式碼中你會找到“Hello World”相關程式碼。
當App開啟時，這些程式碼會被載入並執行。以我們的App來說，PropertyFinderApp元件會被載入，然後建立相應的本地UI元件。