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

An Introduction to React Native

An Introduction to React Native

An introduction to React Native and an overview of its developer experience to an audience primarily made up of iOS developers and designers.

Event: CocoaHeads Montreal
Location: Shopify Montréal

Naoufal Kadhom

April 12, 2016
Tweet

More Decks by Naoufal Kadhom

Other Decks in Technology

Transcript

  1. An Introduction to
    React Native

    View Slide

  2. Hi, I’m Naoufal
    Naoufal

    View Slide

  3. Hi, I’m No-Fell
    Senior UI Engineer @ Unsplash

    View Slide

  4. Hi, I’m No-Fell
    Senior UI Engineer @ Unsplash

    View Slide

  5. Unsplash
    Do whatever you want high-resolution photos

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. What is React Native

    View Slide

  13. First, What is React

    View Slide

  14. React
    • JavaScript Library
    • A new declarative way of building UIs
    • One-way data flow

    View Slide

  15. Declarative UI

    View Slide

  16. Example

    View Slide

  17. Example
    • Liked
    • Count
    • Color
    • Transition

    View Slide

  18. The Imperative Way
    • Liked
    • Count
    • Color
    • Transition

    View Slide

  19. The Declarative Way
    • Liked
    • Count
    • Color
    • Transition

    View Slide

  20. Declarative Wins
    • Less Code
    • Easier to Reason about the Application
    • Faster Development

    View Slide

  21. React Structure

    View Slide

  22. React Structure
    React
    React Native
    React Dom
    Objective-C/Swift/Java

    View Slide

  23. React Native

    View Slide

  24. React Native
    • It’s React
    • Manipulates Native UI Components
    • Powerful Native Plugin API
    • CSS Style with Flexbox
    • Apple Approved OTA Updates

    View Slide

  25. Development Tools

    View Slide

  26. Development Tools
    • Live Reload
    • Hot Module Replacement
    • Inspector
    • Chrome Debugger

    View Slide

  27. Apps

    View Slide

  28. Apps

    View Slide

  29. Demo

    View Slide

  30. Connect
    @naoufal on Twitter & GitHub

    View Slide