Introduction à React Native (API Hour 32)

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

F59d2f1ed66b8d9c6ceebea5a748494b?s=128

William Durand

December 13, 2017
Tweet

Transcript

  1. 3.

    React 101 Abstract UI tree with components Virtual DOM with

    diff algorithm Data flow is unidirectional 2 . 2
  2. 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 }) => ( <p>State value is: {value}</p> ); 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
  3. 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
  4. 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 }) => ( <Text>State value is: {value}</Text> ); 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
  5. 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 }) => ( <Text>State value is: {value}</Text> ); 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
  6. 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
  7. 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
  8. 16.