Slide 1

Slide 1 text

React vs React-Native by Jesse Wolgamott (@jwo) for Houston React Meetup - Aug 17, 2017

Slide 2

Slide 2 text

What is React Native?

Slide 3

Slide 3 text

Mobile Apps in React iPhone / iPad / AppleTV Android phones / tablets

Slide 4

Slide 4 text

React Native was created by Facebook

Slide 5

Slide 5 text

Both iOS and Android with one codebase* *ish

Slide 6

Slide 6 text

Is it Native? React Native: both JS and native code

Slide 7

Slide 7 text

Is it Native? JS runs on virtual machine on the mobile device and communicates with the native code

Slide 8

Slide 8 text

Similarities

Slide 9

Slide 9 text

Rendering React React-Native Editor Atom Atom Language JSX JSX Toolset WebPack WebPack Metaphor Components Components Testing Jest Jest Linter Prettier Prettier

Slide 10

Slide 10 text

Differences

Slide 11

Slide 11 text

Rendering HTML Native
text

Slide 12

Slide 12 text

Native Code Geolocation Camera in-app-purchases

Slide 13

Slide 13 text

Deployment HTML Native Public Server App Store

Slide 14

Slide 14 text

Dev Flow

Slide 15

Slide 15 text

Easy, Fun 1. create-react-native-app 2. use Echo App to run on mobile device 3. Eject 4. Build and Deploy

Slide 16

Slide 16 text

Hard, :( 1. create-react-native-app 2. Eject 3. Integrate with mobile app 4. Run on mobile device or simular 5. Build and Deploy

Slide 17

Slide 17 text

Layouts 1. Use Flexbox 2. Get Better At Flexbox 3. GOTO 2

Slide 18

Slide 18 text

Navigation 1. React-Router (my perferred) 2. react-native-router- ux

Slide 19

Slide 19 text

State 1. Redux (my perferred) 2. react-native-router- ux

Slide 20

Slide 20 text

Resources http://facebook.github.io/react-native/ https://js.coach/react-native https://expo.io/

Slide 21

Slide 21 text

Demo Code: github.com/jwo/demo-react-native Full App github.com/jwo/example-react-native-redux- router