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 full-size slide

  2. Hi, I’m Naoufal
    Naoufal

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Unsplash
    Do whatever you want high-resolution photos

    View full-size slide

  6. What is React Native

    View full-size slide

  7. First, What is React

    View full-size slide

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

    View full-size slide

  9. Declarative UI

    View full-size slide

  10. Example
    • Liked
    • Count
    • Color
    • Transition

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. React Structure

    View full-size slide

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

    View full-size slide

  16. React Native

    View full-size slide

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

    View full-size slide

  18. Development Tools

    View full-size slide

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

    View full-size slide

  20. Connect
    @naoufal on Twitter & GitHub

    View full-size slide