Introduction à React Native (API Hour 32)

Il y a 2 ans, Facebook a dévoilé React Native, un framework pour développer de vraies applications mobiles avec JavaScript et React. Ce combo est vite devenu une alternative viable au développement mobile traditionnel. Aujourd’hui, tout le monde utilise des applications écrites avec React Native (Airbnb, Instagram et Skype n’en sont que quelques exemples).

Voyons ce que cela donne “pour de vrai”.

Sources : https://github.com/willdurand-slides/introduction-to-react-native

Transcript

1. Introduction to
   React Native
   William Durand – Clermont'ech, December 2017
   1
   

   View Slide

2. React?
   JavaScript library for building User Interfaces (UIs)
   Facebook Open Source
   Learn Once, Write Anywhere
   2 . 1
   

   View Slide

3. React 101
   Abstract UI tree with components
   Virtual DOM with diff algorithm
   Data flow is unidirectional
   2 . 2
   

   View Slide

4. React in Action
   JavaScript code
   No Errors Show Details
   Preview
   State value is: 42
   INCREMENT
   import React from 'react';
   import ReactDOM from 'react-dom';
   const Counter = ({ value }) => (
   State value is: {value}
   );
   class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = { value: 42 };
   }
   handleOnClick = () => {
   this.setState(prevState => ({ value: prevState.value + 1 }));
   }
   d () {
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   2 . 3
   

   View Slide

5. What else?
   Data management with
   Static type checker: (also check out )
   Testing tools: ,
   Live/Hot Reload, DevTools ❤
   The rest of the JavaScript ecosystem
   Redux
   Flow TypeScript
   Hundreds of third-party components
   Jest Enzyme
   2 . 4
   

   View Slide

6. React Native?
   Build mobile apps using JavaScript
   Facebook Open Source
   Learn Once, Write Anywhere
   3 . 1
   

   View Slide

7. Misconception
   Does the JS compile to native code? No.
   JavaScript ➡ Bridge ➡ Native code
   3 . 2
   

   View Slide

8. React Native in Action (iOS)
   JavaScript code
   No Errors Show Details
   Preview
   State value is: 42
   INCREMENT
   import React from 'react';
   import { AppRegistry, Button, Text, View } from 'react-native';
   const Counter = ({ value }) => (
   State value is: {value}
   );
   class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = { value: 42 };
   }
   handleOnClick = () => {
   this.setState(prevState => ({ value: prevState.value + 1 }));
   }
   d () {
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   3 . 3
   

   View Slide

9. React Native in Action (Android)
   JavaScript code
   No Errors Show Details
   Preview
   State value is: 42
   INCREMENT
   import React from 'react';
   import { AppRegistry, Button, Text, View } from 'react-native';
   const Counter = ({ value }) => (
   State value is: {value}
   );
   class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = { value: 42 };
   }
   handleOnClick = () => {
   this.setState(prevState => ({ value: prevState.value + 1 }));
   }
   d () {
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   3 . 4
   

   View Slide

10. A React Native application is a real
    mobile application.
    3 . 5
    

    View Slide

11. Xcode View Hierarchy
    3 . 6
    

    View Slide

12. Who?
    3 . 7
    

    View Slide

13. What else?
    Remember the similar slide about React?
    +
    by Microsoft
    An ever-growing community
    Universal Windows Platform
    Plenty of third-party components/bridges
    3 . 8
    

    View Slide

14. A service by Microsoft to automatically push (OTA)
    updates to your mobile applications.
    Skip the submission to Google Play/App Store
    CodePush
    3 . 9
    

    View Slide

15. Developer Experience
    Debugger in Chrome
    Fast feedback loop
    Live/Hot reload is ❤❤❤
    3 . 10
    

    View Slide

16. 3 . 11
    

    View Slide

17. Thank You.
    Questions?
    twitter.com/couac
    github.com/willdurand
    4
    

    View Slide