Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React vs React-Native

React vs React-Native

Newbiew/Beginniner friendly exploration into what is similar and what is different in react-native

Jesse Wolgamott

August 17, 2017

More Decks by Jesse Wolgamott

Other Decks in Programming


  1. React vs React-Native by Jesse Wolgamott (@jwo) for Houston React

    Meetup - Aug 17, 2017
  2. What is React Native?

  3. Mobile Apps in React iPhone / iPad / AppleTV Android

    phones / tablets
  4. React Native was created by Facebook

  5. Both iOS and Android with one codebase* *ish

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

  7. Is it Native? JS runs on virtual machine on the

    mobile device and communicates with the native code
  8. Similarities

  9. Rendering React React-Native Editor Atom Atom Language JSX JSX Toolset

    WebPack WebPack Metaphor Components Components Testing Jest Jest Linter Prettier Prettier
  10. Differences

  11. Rendering HTML Native <div> <View> text <Text>

  12. Native Code Geolocation Camera in-app-purchases

  13. Deployment HTML Native Public Server App Store

  14. Dev Flow

  15. Easy, Fun 1. create-react-native-app 2. use Echo App to run

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

    app 4. Run on mobile device or simular 5. Build and Deploy
  17. Layouts 1. Use Flexbox 2. Get Better At Flexbox 3.

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

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

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

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