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

E568ea5f2735715aa668253c1698a35c?s=128

Mike Grabowski

December 08, 2016
Tweet

Transcript

  1. React Native Mike Grabowski @grabbou

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

  3. React

  4. Learn once Write everywhere

  5. Better DX

  6. Fully native

  7. Extensible

  8. Let’s get started!

  9. brew install node brew install watchman brew install flow npm

    install -g react-native-cli Get ready
  10. react-native init DemoApp New project

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

  12. None
  13. How it works what makes it a native app

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

  15. App code

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

  17. Styling CSS Flexbox to the rescue

  18. Autolayout

  19. None
  20. Portable Moving code around platforms

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

  22. Extensions .ios.js .android.js

  23. Interactions quick look at the available components

  24. <View /> A simple container

  25. <Text /> Renders text in the app

  26. <TextInput /> Getting info from the users

  27. <Touchable* /> Let’s click all the things

  28. And many more… Over 30 components and APIs

  29. DX Up to speed with *tools*

  30. None
  31. Give it a try!

  32. Thank you