基于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)
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.: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"}) > bufferutil@1.2. 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--validate@1.2. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf--validate
> node-gyp rebuild CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node > spawn-sync@1.0. 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. 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. node_modules/react-native
├── absolute-path@0.0.
├── graceful-fs@4.1.
├── progress@1.1.
├── stacktrace-parser@0.1.
├── wordwrap@1.0.
├── react-timer-mixin@0.13.
├── event-target-shim@1.1.
├── image-size@0.3.
├── underscore@1.8.
├── semver@5.1.
├── bser@1.0. (node-int64@0.4.)
├── opn@3.0. (object-assign@4.0.)
├── debug@2.2. (ms@0.7.)
├── optimist@0.6. (wordwrap@0.0., minimist@0.0.)
├── source-map@0.4. (amdefine@1.0.)
├── mkdirp@0.5. (minimist@0.0.)
├── promise@7.0. (asap@2.0.)
├── chalk@1.1. (supports-color@2.0., ansi-styles@2.1., escape-string-regexp@1.0., has-ansi@2.0., strip-ansi@3.0.)
├── immutable@3.7.
├── worker-farm@1.3. (xtend@4.0., errno@0.1.)
├── fbjs-haste@0.3.
├── sane@1.3. (fb-watchman@1.6., watch@0.10., minimist@1.2., exec-sh@0.2., walker@1.0., minimatch@0.2.)
├── yargs@3.31. (decamelize@1.1., camelcase@2.0., window-size@0.1., y18n@3.2., string-width@1.0., os-locale@1.4., cliui@3.1.)
├── json5@0.4.
├── art@0.10.
├── node-fetch@1.3. (encoding@0.1.)
├── rebound@0.0.
├── connect@2.30. (cookie@0.1., bytes@2.1., utils-merge@1.0., cookie-signature@1.0., pause@0.1., fresh@0.3., on-headers@1.0., response-time@2.3., content-type@1.0., vhost@3.0., basic-auth-connect@1.0., parseurl@1.3., cookie-parser@1.3., depd@1.0., qs@4.0., connect-timeout@1.6., http-errors@1.3., method-override@2.3., serve-favicon@2.3., finalhandler@0.4., morgan@1.6., express-session@1.11., csurf@1.8., serve-static@1.10., multiparty@3.3., type-is@1.6., errorhandler@1.4., compression@1.5., body-parser@1.13., serve-index@1.7.)
├── regenerator@0.8. (private@0.1., through@2.3., esprima-fb@15001.1001.-dev-harmony-fb, commoner@0.10., recast@0.10., defs@1.1.)
├── uglify-js@2.6. (uglify-to-browserify@1.0., async@0.2., yargs@3.10., source-map@0.5.)
├── ws@0.8. (options@0.0., ultron@1.0., bufferutil@1.2., utf--validate@1.2.)
├── module-deps@3.9. (inherits@2.0., browser-resolve@1.11., through2@1.1., xtend@4.0., defined@1.0., duplexer2@0.0., concat-stream@1.4., parents@1.0., subarg@1.0., readable-stream@1.1., stream-combiner2@1.0., resolve@1.1., JSONStream@1.0., detective@4.3.)
├── jstransform@11.0. (object-assign@2.1., base62@1.1., esprima-fb@15001.1.-dev-harmony-fb, commoner@0.10.)
├── react-haste@0.14.
├── yeoman-environment@1.3. (escape-string-regexp@1.0., log-symbols@1.0., grouped-queue@0.3., text-table@0.2., untildify@2.1., diff@2.2., globby@3.0., mem-fs@1.1., inquirer@0.11., lodash@3.10.)
├── joi@6.10. (topo@1.1., isemail@1.2., hoek@2.16., moment@2.10.)
├── babel-polyfill@6.3. (babel-regenerator-runtime@6.3., babel-runtime@5.8., core-js@1.2.)
├── babel-plugin-syntax-trailing-function-commas@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-destructuring@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-constants@6.1. (babel-runtime@5.8.)
├── babel-plugin-syntax-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-react-jsx@6.3. (babel-helper-builder-react-jsx@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-for-of@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-async-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-flow@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-arrow-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-spread@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-flow-strip-types@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-shorthand-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-rest-spread@6.3. (babel-plugin-syntax-object-rest-spread@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-parameters@6.3. (babel-helper-get-function-arity@6.3., babel-helper-call-delegate@6.3., babel-template@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-template-literals@6.3. (babel-runtime@5.8.)
├── babel-plugin-external-helpers-@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-modules-commonjs@6.3. (babel-plugin-transform-strict-mode@6.3., babel-template@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-react-display-name@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-assign@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-block-scoping@6.3. (babel-template@6.3., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-syntax-jsx@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-computed-properties@6.3. (babel-template@6.3., babel-helper-define-map@6.3., babel-runtime@5.8.)
├── babel-types@6.3. (to-fast-properties@1.0., esutils@2.0., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-classes@6.3. (babel-helper-optimise-call-expression@6.3., babel-messages@6.3., babel-helper-replace-supers@6.3., babel-helper-function-name@6.3., babel-template@6.3., babel-helper-define-map@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-regenerator@6.3. (private@0.1., babel-traverse@6.3., babel-runtime@5.8.)
├── babylon@6.3. (babel-runtime@5.8.)
├── babel-core@6.3. (slash@1.0., shebang-regex@1.0., path-is-absolute@1.0., path-exists@1.0., babel-template@6.3., babel-messages@6.3., private@0.1., babel-helpers@6.3., convert-source-map@1.1., babel-code-frame@6.3., minimatch@2.0., babel-generator@6.3., babel-traverse@6.3., source-map@0.5., lodash@3.10., babel-register@6.3., babel-runtime@5.8.)
├── yeoman-generator@0.20. (path-is-absolute@1.0., path-exists@1.0., read-chunk@1.0., detect-conflict@1.0., yeoman-welcome@1.0., yeoman-assert@2.1., rimraf@2.4., text-table@0.2., xdg-basedir@2.0., user-home@2.0., mime@1.3., class-extend@0.1., dargs@4.0., istextorbinary@1.0., async@1.5., nopt@3.0., run-async@0.1., shelljs@0.5., glob@5.0., cli-table@0.3., diff@2.2., through2@2.0., underscore.string@3.2., findup-sync@0.2., mem-fs-editor@2.1., dateformat@1.0., github-username@2.1., pretty-bytes@2.0., download@4.4., cross-spawn@2.1., html-wiring@1.2., gruntfile-editor@1.1., sinon@1.17., lodash@3.10., inquirer@0.8.)
└── fbjs-scripts@0.4. (object-assign@4.0., through2@2.0., gulp-util@3.0., core-js@1.2., babel@5.8.)
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