Taller de React Native

Presentación

Chapa corporativa
Por qué React Native?
Qué es y qué no es RN?
Componentes (método render())
Virtual DOM
iOS / Android +/- Windows Mobile
Instalación Getting started de FB

Demo 1: Hello World

react-native init HelloWorld
ES2016 doc
Explicación de los archivos del proyecto.
- package.json
- ios
- android
render()
this.props / this.state
Diseño de los componentes (flexbox)
RevealApp

Transparencias

Ciclo de vida de un componente doc

Demo 2: Tabla con n celdas

Crear proyecto con componente genérico compartido entre iOS / Android
Insertar un ListView doc
Añadir datasource
renderRow() (texto + imagen)
Hacer celdas pulsables TouchableHighlight
Convertir la tabla a un componente aislado
Añadir navegación Navigator (existen más métodos de navegación, pero este es transversal (Navigator Comparation)
Crear componente de detalle de una ciudad
Router (github)
Añadir barra de navegación (navigationBar / ToolbarAndroid)
Cargar wikipedia en el detalle (Webview) (github)
Extra ball: BackAndroid

Demo 3: Internet y third-party libraries

APIClient (github)
Show IP in screen with httpbin (github)
Install react-native-sounds (on android)
Play local sound (on iOS)
Fake 'API'
Load JSON (github)
Install react-native-fs (install on android)

Última parte

Usar en dispositivo (ios / android)

Transparencias

Cosas que no se han visto aquí
Experiencia general con react-native