iOS.ReactNative-5-make-react-native-to-support-dynamically-update

基于React Native来实现App的热更新

热更新: 类似Hot-Patching，在程序不发布版本的前提下，对部分功能或者全部功能进行修改或者升级。

JSX

1. JSX简介

1.1 https://jsx.github.io/

1.2 Tutorial: JSX

"JSX is a preprocessor step that adds XML syntax to JavaScript. "

"Just like XML, JSX tags have a tag name, attributes, and children. "

"JSX lets you create JavaScript objects using HTML syntax. " Ref [5]

"JSX is not required to use React." Ref[5]

JSX 官方文档: https://facebook.github.io/react/docs/jsx-in-depth.html
live Babel REPL: 将JSX转换为JavaScript代码的REPL。https://babeljs.io/repl/

JSX gotchas for some key differences. https://facebook.github.io/react/docs/jsx-gotchas.html http://buildwithreact.com/tutorial/jsx http://jsbin.com/qucecahako/1/edit?html,css,js,output

1.3 JSX in Depth

JSX is a JavaScript syntax extension that looks similar to XML.
https://facebook.github.io/react/docs/jsx-in-depth.html
可以用Babel将JSX转换为JavaScript。

1.4 JSX 规范

https://facebook.github.io/jsx/

React Native

1. React Getting Started

https://facebook.github.io/react/docs/getting-started.html

CommonJS module system like browserify or webpack

2. 在已存在的App中集成React Native

2.1 So You Want To Dynamically Update Your React Native App

https://medium.com/ios-os-x-development/so-you-want-to-dynamically-update-your-react-native-app-d1d88bf11ede#.84rxp1l62 (Read Again)

DiffMatchPatch

2.2 Integrating with Existing Apps

https://facebook.github.io/react-native/docs/embedded-app-ios.html#content
https://discuss.reactjs.org/t/a-collection-of-examples-for-using-react-native-in-an-existing-ios-app/1954
https://github.com/dsibiski/react-native-embedded-app-example
https://github.com/tjwudi/EmbededReactNativeExample

A): 准备先决条件

1. Install your copy of React Native under your

node_modules

directory where your JS resides.

FQA

Q: 如何获取React Native?

A: 参考 iOS.ReactNative-1-introduction 中的 "2.2 创建、运行React Native工程"

react-native init HelloWorld

zhangchongdeMacBook-Pro:react-native XiaoKL$ react-native init HelloWorld
This will walk you through creating a new React Native project in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
npm WARN engine react-native@0.17.0: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"})

> bufferutil@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/bufferutil
> node-gyp rebuild

CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node

> utf-8-validate@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate
> node-gyp rebuild

CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node

> spawn-sync@1.0.13 postinstall /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall

> fsevents@1.0.6 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v44-darwin-x64/fse.node" is installed via remote
react-native@0.17.0 node_modules/react-native
├── absolute-path@0.0.0
├── graceful-fs@4.1.2
├── progress@1.1.8
├── stacktrace-parser@0.1.3
├── wordwrap@1.0.0
├── react-timer-mixin@0.13.3
├── event-target-shim@1.1.1
├── image-size@0.3.5
├── underscore@1.8.3
├── semver@5.1.0
├── bser@1.0.2 (node-int64@0.4.0)
├── opn@3.0.3 (object-assign@4.0.1)
├── debug@2.2.0 (ms@0.7.1)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── source-map@0.4.4 (amdefine@1.0.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── promise@7.0.4 (asap@2.0.3)
├── chalk@1.1.1 (supports-color@2.0.0, ansi-styles@2.1.0, escape-string-regexp@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0)
├── immutable@3.7.6
├── worker-farm@1.3.1 (xtend@4.0.1, errno@0.1.4)
├── fbjs-haste@0.3.4
├── sane@1.3.0 (fb-watchman@1.6.0, watch@0.10.0, minimist@1.2.0, exec-sh@0.2.0, walker@1.0.7, minimatch@0.2.14)
├── yargs@3.31.0 (decamelize@1.1.1, camelcase@2.0.1, window-size@0.1.4, y18n@3.2.0, string-width@1.0.1, os-locale@1.4.0, cliui@3.1.0)
├── json5@0.4.0
├── art@0.10.0
├── node-fetch@1.3.3 (encoding@0.1.11)
├── rebound@0.0.13
├── connect@2.30.2 (cookie@0.1.3, bytes@2.1.0, utils-merge@1.0.0, cookie-signature@1.0.6, pause@0.1.0, fresh@0.3.0, on-headers@1.0.1, response-time@2.3.1, content-type@1.0.1, vhost@3.0.2, basic-auth-connect@1.0.0, parseurl@1.3.0, cookie-parser@1.3.5, depd@1.0.1, qs@4.0.0, connect-timeout@1.6.2, http-errors@1.3.1, method-override@2.3.5, serve-favicon@2.3.0, finalhandler@0.4.0, morgan@1.6.1, express-session@1.11.3, csurf@1.8.3, serve-static@1.10.0, multiparty@3.3.2, type-is@1.6.10, errorhandler@1.4.2, compression@1.5.2, body-parser@1.13.3, serve-index@1.7.2)
├── regenerator@0.8.42 (private@0.1.6, through@2.3.8, esprima-fb@15001.1001.0-dev-harmony-fb, commoner@0.10.4, recast@0.10.33, defs@1.1.1)
├── uglify-js@2.6.1 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.10.0, source-map@0.5.3)
├── ws@0.8.1 (options@0.0.6, ultron@1.0.2, bufferutil@1.2.1, utf-8-validate@1.2.1)
├── module-deps@3.9.1 (inherits@2.0.1, browser-resolve@1.11.0, through2@1.1.1, xtend@4.0.1, defined@1.0.0, duplexer2@0.0.2, concat-stream@1.4.10, parents@1.0.1, subarg@1.0.0, readable-stream@1.1.13, stream-combiner2@1.0.2, resolve@1.1.6, JSONStream@1.0.7, detective@4.3.1)
├── jstransform@11.0.3 (object-assign@2.1.1, base62@1.1.0, esprima-fb@15001.1.0-dev-harmony-fb, commoner@0.10.4)
├── react-haste@0.14.2
├── yeoman-environment@1.3.0 (escape-string-regexp@1.0.4, log-symbols@1.0.2, grouped-queue@0.3.2, text-table@0.2.0, untildify@2.1.0, diff@2.2.1, globby@3.0.1, mem-fs@1.1.2, inquirer@0.11.0, lodash@3.10.1)
├── joi@6.10.1 (topo@1.1.0, isemail@1.2.0, hoek@2.16.3, moment@2.10.6)
├── babel-polyfill@6.3.14 (babel-regenerator-runtime@6.3.13, babel-runtime@5.8.34, core-js@1.2.6)
├── babel-plugin-syntax-trailing-function-commas@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-class-properties@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-destructuring@6.3.15 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-constants@6.1.4 (babel-runtime@5.8.34)
├── babel-plugin-syntax-class-properties@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-react-jsx@6.3.13 (babel-helper-builder-react-jsx@6.3.13, babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-for-of@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-syntax-async-functions@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-syntax-flow@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-arrow-functions@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-spread@6.3.14 (babel-runtime@5.8.34)
├── babel-plugin-transform-flow-strip-types@6.3.15 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-shorthand-properties@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-object-rest-spread@6.3.13 (babel-plugin-syntax-object-rest-spread@6.3.13, babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-parameters@6.3.21 (babel-helper-get-function-arity@6.3.13, babel-helper-call-delegate@6.3.13, babel-template@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-template-literals@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-external-helpers-2@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-modules-commonjs@6.3.16 (babel-plugin-transform-strict-mode@6.3.13, babel-template@6.3.13, babel-runtime@5.8.34)
├── babel-plugin-transform-react-display-name@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-object-assign@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-block-scoping@6.3.13 (babel-template@6.3.13, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
├── babel-plugin-syntax-jsx@6.3.13 (babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-computed-properties@6.3.13 (babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-runtime@5.8.34)
├── babel-types@6.3.24 (to-fast-properties@1.0.1, esutils@2.0.2, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
├── babel-plugin-transform-es2015-classes@6.3.15 (babel-helper-optimise-call-expression@6.3.13, babel-messages@6.3.18, babel-helper-replace-supers@6.3.13, babel-helper-function-name@6.3.15, babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
├── babel-plugin-transform-regenerator@6.3.18 (private@0.1.6, babel-traverse@6.3.24, babel-runtime@5.8.34)
├── babylon@6.3.21 (babel-runtime@5.8.34)
├── babel-core@6.3.21 (slash@1.0.0, shebang-regex@1.0.0, path-is-absolute@1.0.0, path-exists@1.0.0, babel-template@6.3.13, babel-messages@6.3.18, private@0.1.6, babel-helpers@6.3.13, convert-source-map@1.1.2, babel-code-frame@6.3.13, minimatch@2.0.10, babel-generator@6.3.21, babel-traverse@6.3.24, source-map@0.5.3, lodash@3.10.1, babel-register@6.3.13, babel-runtime@5.8.34)
├── yeoman-generator@0.20.3 (path-is-absolute@1.0.0, path-exists@1.0.0, read-chunk@1.0.1, detect-conflict@1.0.0, yeoman-welcome@1.0.1, yeoman-assert@2.1.1, rimraf@2.4.4, text-table@0.2.0, xdg-basedir@2.0.0, user-home@2.0.0, mime@1.3.4, class-extend@0.1.2, dargs@4.0.1, istextorbinary@1.0.2, async@1.5.0, nopt@3.0.6, run-async@0.1.0, shelljs@0.5.3, glob@5.0.15, cli-table@0.3.1, diff@2.2.1, through2@2.0.0, underscore.string@3.2.2, findup-sync@0.2.1, mem-fs-editor@2.1.0, dateformat@1.0.12, github-username@2.1.0, pretty-bytes@2.0.1, download@4.4.3, cross-spawn@2.1.0, html-wiring@1.2.0, gruntfile-editor@1.1.0, sinon@1.17.2, lodash@3.10.1, inquirer@0.8.5)
└── fbjs-scripts@0.4.0 (object-assign@4.0.1, through2@2.0.0, gulp-util@3.0.7, core-js@1.2.6, babel@5.8.34)
Setting up new React Native app in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
To run your app on iOS:
Open /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
react-native run-android
zhangchongdeMacBook-Pro:react-native XiaoKL$

react-native init 命令的输出
Q: 如何获得某个版本的React-Native的代码？

A:

B): 创建Podfile

$ pod init

C): 安装React-Native Library

1. 在Podfile中添加以下内容:

# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => '../node_modules/react-native', :subspecs => [  // A
   'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]

A: :path 用来将本地的代码通过Pod方式进行安装. :path 的值指定了本地代码相对Podfile的相对路径。例如在Demo中 :path 取值为:

:path => '../HelloWorld/node_modules/react-native'

2. 运行命令 $ pod install

D): 打包js代码

react-native bundle

react-native bundle --entry-file index.ios.js --platform ios --bundle-output EmbededReactNative.jsbundle

react-native bundle 命令说明 [TODO]

Flexbox

Flexbox: React Native’s way of doing UI layout.

1. How To Get Started With CSS Flexbox (AAAA+)
http://www.paulund.co.uk/css-flexbox
Using Flexbox Today

CSS Flexbox Playground

Flexbox Froggy

Flexbox Collection

Flexbox Patterns

Flexbox Interface Patterns

Solved With Flexbox

Flexbox Layouts

2. A Complete Guide to Flexbox (AAAA)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Node

1. node 简介和发展历程

ls -lt `which node`

lrwxr-xr-x 1 XiaoKL staff 4 7 28 23:49 /Users/XiaoKL/.nvm/versions/io.js/v2.5.0/bin/node -> iojs

2. 安装和升级Node

Installing node.js on OSX 10.11 El Capitan
http://coolestguidesontheplanet.com/installing-node-js-on-osx-10-10-yosemite/
How to Install Node.js and NPM on a Mac (Brew版本)
http://blog.teamtreehouse.com/install-node-js-npm-mac
brew安装Node.js存在的问题
https://www.reddit.com/r/node/comments/3kkcpu/is_anyone_able_to_brew_upgrade_node_to_400/
Switch Node.js versions with the Node Version Manager (nvm)
http://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

2.1 nvm

nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

关于nvm参考 Nodejs.nvm

NPM

1. NPM简介

javascript package manager

NPM: Node Package Manager

"npm is the package manager for the Node JavaScript platform. It puts modules in

place so that node can find them, and manages dependency conflicts intelligently."

man npm

RCTRootView & RCTView

1. RCTRootView

Native Code(Objective-C Code)和React Native间的接口由RCTRootView暴露出来。

RCTRootView中只包含RCTRootContentView对象，该对象是实际的React Native组件的容器。

@interface RCTRootContentView : RCTView <RCTInvalidating>

@property (nonatomic, readonly) BOOL contentHasAppeared;

- (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge;

@end

2. RCTView

RCTView是ReactNative中UI容器组件(可以包含其它UI对象的组件)的父类，其直接子类包含:

RCTTextView RCTScrollView RCTRootContentView RCTWebView

TODO: UML图

3. RCTViewNodeProtocol

RCTViewNodeProtocol: Logical node in a tree of application components.

4. RCTBridge

Reference

1. A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript
https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987#.5853ux96p
2. AppHub – Update React Native Apps Without Re-Submitting to Apple
https://news.ycombinator.com/item?id=10048072
3. An iOS Developer on React Native
https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0#.uz3t35nfi
从iOS开发者的角度过度到React Native

4. 阿里的weex

4.1 如何看待阿里无线前端发布的Weex?
http://www.zhihu.com/question/37636296
4.2 对无线电商动态化方案的思考（二）
https://github.com/amfe/article/issues/14
5. Displaying Data
https://facebook.github.io/react/docs/displaying-data.html
6. react-native (AAAA)
https://github.com/facebook/react-native
7. awesome-react-native (AAAA)
https://github.com/jondot/awesome-react-native