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
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