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

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