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 full-size slide

  2. What is React Native?

    View full-size slide

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

    View full-size slide

  4. React Native was created by
    Facebook

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Similarities

    View full-size 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 full-size slide

  10. Rendering
    HTML Native

    text

    View full-size slide

  11. Native Code
    Geolocation
    Camera
    in-app-purchases

    View full-size slide

  12. Deployment
    HTML Native
    Public Server App Store

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide