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

Going native with React

Going native with React

Introduction to React Native I gave at the React Oslo meet-up. See live stream here: https://www.youtube.com/playlist?list=PLbMnjQUBUpsfERckoazC28esfQLW-EtvL

Mike Grabowski

December 08, 2016
Tweet

More Decks by Mike Grabowski

Other Decks in How-to & DIY

Transcript

  1. React Native
    Mike Grabowski
    @grabbou

    View Slide

  2. is a framework for building cross-platform apps
    React Native

    View Slide

  3. React

    View Slide

  4. Learn once
    Write everywhere

    View Slide

  5. Better DX

    View Slide

  6. Fully native

    View Slide

  7. Extensible

    View Slide

  8. Let’s get started!

    View Slide

  9. brew install node
    brew install watchman
    brew install flow
    npm install -g react-native-cli
    Get ready

    View Slide

  10. react-native init DemoApp
    New project

    View Slide

  11. react-native run-ios
    react-native run-android
    Run it

    View Slide

  12. View Slide

  13. How it works
    what makes it a native app

    View Slide

  14. Arch
    Source: https://www.smashingmagazine.com/2016/08/test-automation-frameworks-for-react-native-apps/

    View Slide

  15. App code

    View Slide

  16. Environment
    ES2015
    console.log
    CommonJS require
    XMLHttpRequest, fetch
    setTimeout
    navigator.geolocation

    View Slide

  17. Styling
    CSS Flexbox to the rescue

    View Slide

  18. Autolayout

    View Slide

  19. View Slide

  20. Portable
    Moving code around platforms

    View Slide

  21. Platform
    .OS
    .select({ ios, android })

    View Slide

  22. Extensions
    .ios.js
    .android.js

    View Slide

  23. Interactions
    quick look at the available components

    View Slide


  24. A simple container

    View Slide


  25. Renders text in the app

    View Slide


  26. Getting info from the users

    View Slide


  27. Let’s click all the things

    View Slide

  28. And many more…
    Over 30 components and APIs

    View Slide

  29. DX
    Up to speed with *tools*

    View Slide

  30. View Slide

  31. Give it a try!

    View Slide

  32. Thank you

    View Slide