Upload
ch-rick
View
165
Download
2
Embed Size (px)
Citation preview
React Native 起手式 + Redux
About Me
Rick Chiang | Full Stack [email protected]
以前:.NET MVC、ionic 2、Angular 2、TypeScript
現在:ReactJS、React Native、NodeJS、Python、Docker
React ?
不懂 React 也可以直接學 React Native嗎
不懂 React 也可以直接學 React Native嗎
React ?
Babel
ES6
ES7
Webpack
npmRedux
Server-Side Render
SEOroute
React 沒那麼複雜 就是處理 View 而已
React
元件化
舉個例
React 很簡單就是在寫 View 而已
才怪
Virtual DOM
今天主角是 React Native
Learn once, write anywhere
React Native ?
87 %
Bridge
IOS Android
2015.03.27 v.0.1.0 release
2015.09.15 v.0.11.0 Support Android
2016.10.25 v0.36.0
Install
NodeJS
V8 Engine
NPM(Node Package Manager)
Install
Install
npm install -g react-native-cli
Install
讓我們可以用 react-native 指令產生 RN 專案
react-native init rn_demo1
Install
產生 React Native 專案
Install
Install
Run on IOSXcode
IOS
Install Xcode
Demo
IOS
react-native run-ios
IOS
IOS
Run on AndroidAndroid Studio
JDK
Genymotion
Virtual Box
Android
Android
Android
Android
Android
Android
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
Demo
Android
Android
react-native run-android
Android
Android
Developer Experience
Android
Demo
DX
Running on DeviceDemo
Demo React Native
Redux
npm i redux –save redux-persist --save redux-actions --save react-redux --save
React Native + ReduxDemo
QA
Thanks