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

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

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

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

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

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

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

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

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

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

Xcode View Hierarchy 3 . 6

Who? 3 . 7

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

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

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

3 . 11

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