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. Introduction to React Native William Durand – Clermont'ech, December 2017

    1
  2. React? JavaScript library for building User Interfaces (UIs) Facebook Open

    Source Learn Once, Write Anywhere 2 . 1
  3. React 101 Abstract UI tree with components Virtual DOM with

    diff algorithm Data flow is unidirectional 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
  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
  6. React Native? Build mobile apps using JavaScript Facebook Open Source

    Learn Once, Write Anywhere 3 . 1
  7. Misconception Does the JS compile to native code? No. JavaScript

    ➡ Bridge ➡ Native code 3 . 2
  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
  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
  10. A React Native application is a real mobile application. 3

    . 5
  11. Xcode View Hierarchy 3 . 6

  12. Who? 3 . 7

  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
  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
  15. Developer Experience Debugger in Chrome Fast feedback loop Live/Hot reload

    is ❤❤❤ 3 . 10
  16. 3 . 11

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