React Native 起手式 + Redux

About Me

Rick Chiang | Full Stack Developerrick.chiang@addweup.com

以前：.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