ReactNative基础与QuickStart——重点安利一波Deco，详见末章

2016-07-04 12:56:00

本文的Github地址：reactnative-introduction,本文可能还会更新，如果有需要可以关注Repo来获取进度

Introduction

React Native的优势在于性能比Cordova好，原生的支持比NativeScript这些好。在未来的客户端开发中，负责与用户交互以及存储这一部分建议采用原生的代码，而对于逻辑控制这边，建议是采用JavaScript方式实现。需要注意的是，React Native本质上是用JSX的语法风格编写原生的应用，它本质上还是跨平台编译性质的，并没有提供完整的类似于WebView那样的上下文，并且大量的HTML元素也是不可以直接应用的。React Native只是借用了HTML的语法风格，并且提供了JS与原生的桥接。

React Native Advantages

Reference

Tutorials&Docs

introducing-react-native-building-apps-javascript
react-native-example-app
React-Native学习指南
用React Native设计的第一个iOS应用

Practice&Resources

整理了一份React-Native学习指南
ZhiHuDaily-React-Native
learning-react-native-Code：本书的附带的很多教学代码，还是很不错的
React Native Playground
awesome-react-native
ReactNativeSampleApp

超级产品经理这个组件会被转化为iOS中特定的UIView组件。

载入JavaScript代码

React Native提供了非常方便的动态调试机制，具体的表现而言即是允许以一种类似于中间件服务器的方式动态的加载JS代码，即

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
另一种发布环境下，可以将JavaScript代码打包编译，即npm build：

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
如果在Xcode中直接运行程序会自动调用npm start命令来启动一个动态编译的服务器，如果没有自动启动可以手动的使用npm start命令，就如定义在package.json文件中的，它会启动node_modules/react-native/packager/packager.sh这个脚本。

React Native中的现代JavaScript代码

从上文中可以看出，React Native中使用的是所谓的JSX以及大量的ES6的语法，在打包器打包之前需要将JavaScript代码进行一些转换。这是因为iOS与Android中的JavaScript解释器目前主要还是支持到了ES5版本，并不能完全识别React Native中提供的语法或者关键字。当然，并不是说我们不能使用ES5的语法去编写React Native程序，只是最新的一些语法细则规范可以辅助我们快速构建高可维护的应用程序。

譬如我们以JSX的语法编写了如下渲染函数：

render: function() {
return (

  Hello, {this.state.name}!  To get started, edit index.ios.js  Press Cmd+R to reload,{'\n'}  Cmd+Control+Z for dev menu

);
}
在JS代码载入之前，React打包器需要首先将JSX语法转化为ES5的表达式：

render: function() {
return (
React.createElement(View, {style: styles.container},
React.createElement(TextInput, {
style: styles.nameInput,
onChange: this.onNameChanged,
placeholder: "Who should be greeted?"}),
React.createElement(Text, {style: styles.welcome},
"Hello, ", this.state.name, "!"),
React.createElement(Text, {style: styles.instructions},
"To get started, edit index.ios.js"
),
React.createElement(Text, {style: styles.instructions},
"Press Cmd+R to reload,", '\n',
"Cmd+Control+Z for dev menu"
)
)
);
}
另一些比较常用的语法转换，一个是模块导入时候的结构器，即我们常常见到模块导入：

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
TextInput,
View,
} = React;
上文中的用法即是所谓的解构赋值，一个简单的例子如下：

var fruits = {banana: "A banana", orange: "An orange", apple: "An apple"};
var { banana, orange, apple } = fruits;
那么我们在某个组件中进行导出的时候，就可以用如下语法：

module.exports.displayName = "Name";
module.exports.Component = Component;
而导入时，即是：

var {Component} = require("component.js");
另一个常用的ES6的语法即是所谓的Arrow Function，这有点类似于Lambda表达式：

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
会被转化为：

AppRegistry.registerComponent('HelloWorld', function() {return HelloWorld;});

Deco

今天逛Reddit，偶然看到了Deco，觉得很不错，特地开个单章安利一波，下载地址这里，国内有点卡，可以考虑proxychains爬梯子。在刚才的Quick Start里面介绍的基本的搭建RN开发环境，还是有点麻烦的，而Deco就是一个整体的打包IDE，可以开箱即用，这个对初学者很有优势。另外它还内置了很多的组件模板，可以利用拖拽方式加入到代码中，同时，它还支持热替换等等功能。

Setup

要使用Deco，你首先需要安装好Xcode与npm 3.0+环境，安装好了之后你就可以直接打开IDE了：

创建新项目

在打开Deco之后，点击"Create New Project"即可创建一个新项目，也可以选择已有的项目。

一个基本的Deco项目包含以下几个部分：

android/ - The files necessary to open your project in Android Studio and build for Android.
ios/ - The files necessary to open your project in Xcode and build for iOS.
node_modules/ - The node modules needed for your React Native project to run.
.flowconfig - If you want to use Facebook's flow language, which adds static typechecking for JavaScript, use this file to configure your project's flow settings.
.gitignore - Default files for git to ignore
.watchmanconfig - Used to configure Facebook Watchman, the file watcher used by the React Native packager.
index.ios.js - The entry point for your React Native app on iOS.
index.android.js - The entry point for your React Native app on Android.
package.json - Describes this project and lists its npm dependencies.