标签：
原文：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 |
然后安装 watchman（用来监视文件改动情况）:
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 文件，这也是CLI创建的。
还有一个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”字符串时应用这个样式。
在React Native 中，我们可以使用 Cascading Style Sheets (CSS) 语法来格式化UI样式。
接下来敲入如下代码:
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组件。
标签：
原文地址：http://blog.csdn.net/kmyhy/article/details/46592741
