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
Tweet

More Decks by Jesse Wolgamott

Other Decks in Programming

Transcript

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

    View Slide

  2. What is React Native?

    View Slide

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

    View Slide

  4. React Native was created by
    Facebook

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Similarities

    View Slide

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

    View Slide

  10. Differences

    View Slide

  11. Rendering
    HTML Native

    text

    View Slide

  12. Native Code
    Geolocation
    Camera
    in-app-purchases

    View Slide

  13. Deployment
    HTML Native
    Public Server App Store

    View Slide

  14. Dev Flow

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide