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

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