React vs React-Native

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

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