React Native - Apps multiplataforma

Aprende todo lo necesario para crear apps multiplataforma nativas iOS y Android, utilizando Javascript, gracias al framework de Facebook, React Native.

Transcript

1. REACT NATIVE APPS MULTIPLATAFORMA BIZKAIA ENPRESA DIGITALA - 17/10/16 IMANOL TERÁN MARURI - WIDDIAPPS
2. QUIÉN SOY IMANOL TERÁN MARURI IOS & WEB DEVELOPER AND TRAINER
3. TEMARIO > ¿Qué es React Native y por qué aprenderlo? > Conceptos básicos > Crear un Proyecto > Proyecto avanzado. App multiplataforma (iOS y Android)
4. ¿QUÉ ES REACT NATIVE Y POR QUÉ APRENDERLO?
7. > Facebook no es solo una red social, también colabora activamente con la comunidad de desarrolladores > Principios de 2015 lanza un extensión de su librería React
8. > Capaz de generar apps nativas para dispositivos móviles iOS y Android > Utilizando javascript > Con la capacidad de servir de puente entre los componentes nativos de cada sistema
9. FORMAS DE CREAR APPS
10. WEBAPPS HECHAS EN NAVEGADOR WEB (WEBVIEWS)
11. > Apps más lentas, sobre todo si usamos muchos gráficos. > Menos opciones en un WebView que en un Browser. > En muchos casos, sensación y comportamiento diferente que una app nativa. > PhoneGap / Cordova
12. APPS NATIVAS
13. > Apps más eficientes. > Plataformas cerradas. > Menos control sobre lo que hay "por debajo". > Actualizaciones del sistema pueden hacer nuestra app inservible. > Esfuerzos para sacar actualizaciones.
14. UTILIZAR CAPA DE JAVASCRIPT
15. > Utilizar motor Javascript del entorno movil y ejecutar nuestro Javascript ahí. > Los controles nativos se mapean a objetos y funciones Javascript. > Appcelerator Titanium. > React Native podría estar dentro de este grupo.
16. > En iOS, utiliza JavaScriptCore, motor JavAscript por defecto en iOS y en Safari. > Desarrolladores iOS pueden interactuar con el directamente. > Diferencia: React ejecuta el código Javascript en un hilo separado, por lo que mejora el rendimiento de la interfaz, sin bloqueos y mayor fluidez en las animaciones.
17. WRITE ONCE, RUN EVERYWHERE
18. WRITE ONCE, RUN EVERYWHERE
19. WRITE ONCE, RUN EVERYWHERE
20. > Componentes UI específicos de cada plataforma. > No sirve mismo código para iOS y Android. > React Native permite aprender una serie de habilidades y utilizarlas para desarrollar para varias plataformas.
21. PODEMOS CREAR APPS NATIVAS UTILIZANDO JAVASCRIPT Y REACT
22. REACT NATIVE
23. REACT
24. CREA INTERFACES COMPLEJAS UTILIZANDO COMPONENTES DE FORMA DECLARATIVA
25. import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } }
26. > Una App hecha en React Native es una app NATIVA > No hablamos de apps en HTML5, web-apps ni apps híbridas. > Utiliza elementos nativos, los cuales juntamos utilizando Javascript y React.
27. import React, { Component } from 'react'; import { Image, ScrollView, Text } from 'react-native'; class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } }
28. > Programación no es 100% "cross-platform", pero casi. > La base es React Native. > Nos permite trabajar a nivel de programación funcional en la construcción de interfaces y que estos reaccionen dinámicamente a través del framework
29. > No "perdemos" tiempo recompilando nuestra app. > Se recarga de forma instantánea cada vez que hay un cambio. > Incluso podemos ejecutar código nuevo manteniendo el estado actual de la app.
30. > Podemos utilizar / mezclar código nativo en cualquier momento que lo necesitemos. > App de Facebook funciona así: parte en React Native y parte en Swift/Objective-C , Java.
31. import React, { Component } from 'react'; import { Text, View } from 'react-native'; import { TheGreatestComponentInTheWorld } from './your-native-code'; class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift - the product development process is the same. </Text> </View> ); } }
32. CONCEPTOS BÁSICOS DATOS QUE CONTROLAN UN COMPONENTE
33. PROPS
34. > Podemos modificar los componentes de React Native en el momento de crearlos mediante parámetros. > Estos parámetros se llaman props > Image es uno de los componentes de React Native.
35. import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <Image source={pic} style={{width: 193, height: 110}}/> ); } } AppRegistry.registerComponent('Bananas', () => Bananas);
36. {pic} > De esta forma, convertimos el objeto en JSX > JSX nos permite meter cualquier código Javascript entre { }
37. > También podemos usar props con nuestros propios componentes. > Así, podremos crear un componente y utilizarlo en diferentes lugares de la app, cambiando sus propiedades. > Tenemos que llamar a this.props dentro de nuestra función render
38. import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class Greeting extends Component { render() { return ( <Text>Hello {this.props.name}!</Text> ); } } class LotsOfGreetings extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } } AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
39. > Al utilizar name como un prop, podemos personalizar nuestro componente Greeting y reutilizarlo para cada uno de nuestros mensajes.
40. VIEW COMPONENT
41. > Uno de los componentes más útiles y que más utilizaremos. > Nos sirve como contenedor para otros componentes.
42. Con props y los componentes Text, Image y View, podemos crear una gran cantidad de vistas estáticas de nuestra app.
43. STATE
44. > Lo usamos para manipular los datos de nuestra app que van a cambiar > Inicializamos state en el constructor, y después llamamos a setState cuando quieres cambiar el componente. > Estos estados cambiarán en función de algún cambio en el servidor o recibimos algún input por parte del usuario.
45. import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = {showText: true}; // Toggle the state every second setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000); } render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text>{display}</Text> ); } } class BlinkApp extends Component { render() { return ( <View> <Blink text='I love to blink' /> <Blink text='Yes blinking is so great' /> <Blink text='Why did they ever take this out of HTML' /> <Blink text='Look at me look at me look at me' /> </View> ); } } AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
46. STYLE
47. > React Native no tiene una forma específica de dar estilo a nuestras apps. > Debemos hacerlo utilizando Javascript. > Todos los componentes del framework aceptan el atributo style
48. CSS
49. > Los nombres de estilos y valores son muy similares a los utilizados en CSS. > Ligeras variaciones: backgroundColor en lugar de background-color
50. > Normalmente, para pasar el estilo, usamos un objeto Javascript típico. > Si la app crece en complejidad, podemos pasar un array de estilos (el último elemento tiene preferencia, como CSS)
51. import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class LotsOfStyles extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
52. SIZE
53. > Los tamaños en React Native, no van en unidades, representan pixeles independientemente de la densidad.
54. > Tamaño fijo. > Tamaño flexible.
55. TAMAÑO FIJO > Usar cuando queremos que un componente tenga siempre el mismo tamaño, sin importar las dimensiones de la pantalla del dispositivo. > Debemos añadir al componente un widthy un height fijos
56. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
57. TAMAÑO FLEXIBLE > Si usamos flex en un componente, conseguimos que crezca o decrezca, en función del espacio disponible en pantalla.
58. > Normalmente usaremos flex: 1, de forma que el componente ocupe TODO el espacio disponible. > Este espacio se comparte con el resto de componentes que estén en su mismo nivel. > Cuanto mayor sea el valor flex, mayor será la proporción de espacio que ocupe con respecto a los otros componentes.
59. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDimensionsBasics extends Component { render() { return ( // Try removing the `flex: 1` on the parent View. // The parent will not have dimensions, so the children can't expand. // What if you add `height: 300` instead of `flex: 1`? <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
60. LAYOUT
61. FLEXBOX
62. > Especificación de la W3C para layout web. > Soporte en navegadores mejorado. > Muchos frameworks lo están incluyendo > Permite controlar orientación, espacio y orden de los elementos de la interfaz.
63. Consiste en proporcionar al contenedor la habilidad para cambiar la anchura y altura de los elementos que contiene, con el fin de rellenar de la forma más eficiente posible el espacio en blanco y prevenir los desbordes > Flexbox
64. PROPIEDADES DE FLEXBOX EN REACT NATIVE > flexDirection > alignItems > justifyContent > flex
65. FLEXDIRECTION > Determina el eje principal del layout de nuestra app. > row | column
66. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` to `column`. <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
67. JUSTIFYCONTENT > Determina la alineación de un componente en el eje principal. > flex-start | center | flex-end | space- around | space-between
68. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class JustifyContentBasics extends Component { render() { return ( // Try setting `justifyContent` to `center`. // Try setting `flexDirection` to `row`. <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
69. ALIGNITEMS > Determina la alineación de un componente en el eje secundario. > flex-start | center | flex-end | stretch
70. import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class AlignItemsBasics extends Component { render() { return ( // Try setting `alignItems` to 'flex-start' // Try setting `justifyContent` to `flex-end`. // Try setting `flexDirection` to `row`. <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
71. TEXT INPUT
72. > Para manejar la introdución de texto en la app por parte del usuario, tenemos el componente TextInput > Tiene dos props: onChangeText y onSubmitEditing
73. import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; class PizzaTranslator extends Component { constructor(props) { super(props); this.state = {text: ''}; } render() { return ( <View style={{padding: 10}}> <TextInput style={{height: 40}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 10, fontSize: 42}}> {this.state.text.split(' ').map((word) => word && '!').join(' ')} </Text> </View> ); } } AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
74. SCROLLVIEW
75. > Componente de tipo contenedor que permite hacer scroll. > Puede contener varios componentes y vistas. > Se puede hacer scroll vertical y horizontal (configurando la propiedad horizontal)
76. > Componente reocmendado para mostrar pocos elementos. > Todos los componentes contenidos se renderizan, aunque no se estén mostrando en ese momento por pantalla. > Si tienes que mostrar muchos elementos utiliza ListView
77. import React, { Component } from 'react'; import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native' class IScrolledDownAndWhatHappenedNextShockedMe extends Component { render() { return( <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>If you like</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Scrolling down</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>What's the best</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:96}}>Framework around?</Text> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Image source={require('./img/favicon.png')} /> <Text style={{fontSize:80}}>React Native</Text> </ScrollView> ); } } AppRegistry.registerComponent( 'IScrolledDownAndWhatHappenedNextShockedMe', () => IScrolledDownAndWhatHappenedNextShockedMe);
78. LISTVIEW
79. > Para mostrar una lista vertical de elementos, que aunque con contenido diferente, cuentan con una estructura similar. > Ideal para mostrar cantidades grandes de datos. > Sólo renderiza los elementos que se están mostrando en pantalla.
80. TIENE DOS PROPS > dataSource: fuente de información para mostrar en la lista. > renderRow: coge un elemento de la fuente y devuelve un componente formateado listo para renderizar.
81. import React, { Component } from 'react'; import { AppRegistry, ListView, Text, View } from 'react-native'; class ListViewBasics extends Component { // Initialize the hardcoded data constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' ]) }; } render() { return ( <View style={{paddingTop: 22}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> </View> ); } } // App registration and rendering AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
82. NETWORKING
83. > Muchas veces necesitamos cargar datos desde una URL remota. > Unas veces necesitaremos hacer peticiones POST a una API REST. > Otras, coger una serie de datos estáticos desde un servidor externo.
84. FETCH API > API proporcioanda por React Native. > Similar a XMLHttpRequest u otras APIS que hayas utilizado.
85. HACER PETICIONES > Para poder acceder a datos desde una URL externa, solo hay que pasarle la URL: fetch('https://mywebsite.com/mydata.json')
86. NAVEGACIÓN
87. > Utilizamos el componente Navigator para realizar transiciones entre las diferentes vistas de nuestra aplicación. > Puede ser navegación lateral, tipo maestro-detalle o popups modales.
88. NAVIGATOR COMPONENT > Proporciona una implementación en Javascript de una pila de navegación. > Funciona tanto para iOS como para Android. > Fácil de personalizar.
89. ESCENAS
90. ESCENAS > Componente React Native renderizado a pantalla completa. > Otra forma de decir "pantalla".
91. EJEMPLO > Crear escena MyScene.js import React, { Component } from 'react'; import { View, Text, Navigator } from 'react-native'; export default class MyScene extends Component { static get defaultProps() { return { title: 'MyScene' }; } render() { return ( <View> <Text>Hi! My name is {this.props.title}.</Text> </View> ) } }
92. export default nos permite exportar la escena como un componente para que después podamos importarla desde cualquier otro componente.
93. import React, { Component } from 'react'; import { AppRegistry } from 'react-native'; import MyScene from './MyScene'; class YoDawgApp extends Component { render() { return ( <MyScene /> ) } } AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);
94. > Ahora tenemos una app que renderiza nuestra escena y poco más. > Decimos que nuestra escena es un componente reutilizable.
95. > Navegación render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => { return <MyScene title={route.title} /> }} /> ); }
96. ROUTES > Un route es un objeto que contiene información sobre la escena. > Proporciona todo el contexto que funcion del Navigator renderScene necesita.
97. PUSH & POP
98. > Métodos del objeto navigator que hemos pasado a la función renderScene > Sirven para meter o sacar routes en nuestra pila de navegación.
99. navigator.push({ title: 'Next Scene', index: 1, }); navigator.pop();
100. import React, { Component } from 'react'; import { AppRegistry, Navigator, Text, View } from 'react-native'; import MyScene from './MyScene'; class SimpleNavigationApp extends Component { render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => <MyScene title={route.title} // Function to call when a new scene should be displayed onForward={ () => { const nextIndex = route.index + 1; navigator.push({ title: 'Scene ' + nextIndex, index: nextIndex, }); }} // Function to call to go back to the previous scene onBack={() => { if (route.index > 0) { navigator.pop(); } }} /> } /> ) } } AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);
101. import React, { Component, PropTypes } from 'react'; import { View, Text, TouchableHighlight } from 'react-native'; export default class MyScene extends Component { static propTypes = { title: PropTypes.string.isRequired, onForward: PropTypes.func.isRequired, onBack: PropTypes.func.isRequired, } render() { return ( <View> <Text>Current Scene: { this.props.title }</Text> <TouchableHighlight onPress={this.props.onForward}> <Text>Tap me to load the next scene</Text> </TouchableHighlight> <TouchableHighlight onPress={this.props.onBack}> <Text>Tap me to go back</Text> </TouchableHighlight> </View> ) } }
102. SIMILITUDES CON ELEMENTOS HTML
103. > Cuando desarrollamos para la web, utilizamos elementos como <div> <span> <img> <ol> <ul> <table>... > Al desarrollar para React Native, no usamos estos elementos, pero si otros equivalentes bastante similares
104. SIMILITUDES > div: View > img: Image > span, p : Text > ul/ol: ListView
105. TEXT > En HTML, se puede diferentes textos en una amplia variedad de elementos y darles estilo. <p>The quick <em>brown</em> fox jumped over the lazy <strong>dog</strong>.</p>
106. TEXT > En React Native, solo el componente Text puede llevar texto plano
107. TEXT <View> Text doesn't go here! </View> <View> <Text>This is OK!</Text> </View>
108. TEXT > En React Native, no se tiene acceso a subtags como strong o em <Text> The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>. </Text>
109. TEXT > Esto es poco reusable y sería similar a los estilos en linea de HTML, por lo que sería mejor crear shorthands que nos ayuden a replciar esos estilos.
110. TEXT var styles = StyleSheet.create({ bold: { fontWeight: "bold" }, italic: { fontStyle: "italic" } }); var Strong = React.createClass({ render: function() { return ( <Text style={styles.bold}> {this.props.children} </Text>); } }); var Em = React.createClass({ render: function() { return ( <Text style={styles.italic}> {this.props.children} </Text>); } });
111. TEXT > Una vez creados estos componentes, podemos crear estilos anidados, de forma similar a HTML <Text> The quick <Em>brown</Em> fox jumped over the lazy <Strong>dog</Strong>. </Text>
112. IMAGE > Otro de los elementos más comunes en web y en apps junto con el texto. > En web, las introducimos mediante HTML con <img> o CSS con propiedades como background-image > En React Native utilizamos el componente <Image>
113. IMAGE <Image source={require('image!puppies')} />` > Esta llamada a la imagen funciona de forma diferente dependiendo de la plataforma en la que estemos trabajando.
114. IMAGE > En iOS, hay que importar las imágenes en la la carpeta assets del proyecto en Xcode. > Hay que pasar las imágenes en todas las resoluciones necesarias (@1x, @2x, @3x) y Xcode sirve el asset apropiado dependiendo de la resolución de la pantalla.
115. IMAGE > Esto es una gran ventaja, debido a lo limitado del número de dispositivos en iOS. > En Android, apunta a la carpeta de res/drawable
116. IMAGE > También se puede uilizar una aproximación similar a la de HTML, Facebook lo hace en alguna app de ejemplo. <Image source={{uri: 'https:// facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
117. IMAGE > También podemos cargar las imágenes desde la web. > En fase de prototipado, no tenemos que preocuparnos por preparar todos los assets. > Tamaño del paquete de la app más pequeño.
118. IMAGE > Lo peor es que el usuario va a tener que descargarse todo el contenido cada vez. > Dependes demasiado de su plan de datos. > En la mayoría de los casos, habrá que evitar este enfoque.
119. IMAGE > React Native hace hincapié en el uso de componentes, por lo que mejor olvidarnos del modelo HTML-CSS. > Si queremos poner una imagen de fondo: <Image source={require('image!puppies')}> {/* Your content here... */} </Image>
120. IMAGE > El componente Image tiene la prop resizeMode, que acepta los valores: resize | cover | contain > Es un componente muy fácil de utilizar, y muy flexible.
121. CREAR UN PROYECTO
122. INSTALAR REACT NATIVE EN NUESTRO EQUIPO
124. > Entorno Javascript del lado del servidor, basado en eventos. > Utiliza motor V8 de Google. > Compila y ejecuta Javascript a velocidades increíbles. > Código abierto: ejecuta en Windows, macOS y Linux. > Proporciona una manera fácil para construir programas de red escalables.
125. VENTAJAS
126. > Desarrollo más rápido. > Ejecución de tests de unidad se puede hacer más rápido. > Las aplicaciones son más rápidas. > Mejor experiencia de usuario. > Menor coste de infraestructura. > Tiene una gran comunidad.
127. DESVENTAJAS
128. > Dificultad de implementar en alojamientos existentes. > API inestable. > Falta de una librería estándar. > Muchas formas diferentes de programar. > Le falta "rodaje".
129. INSTALAR NODE JS
130. > Descargar desde la web de nodejs > Utilizar un gestor de paquetes
131. > macOS: Homebrew > Windows: Chocolatey
132. MACOS
133. INSTALAR HOMEBREW
134. INSTALAR NODEJS brew install node
135. INSTALAR WATCHMAN > "Observador" de Facebook. React Native lo utiliza para detectar cambios en el código, y así poder recompilar cuando ocurran. brew install watchman
136. INSTALAR HERRAMIENTA REACT NATIVE CLI npm install -g react-native-cli **npm es el gestor de paquetes de Node. Nos permite descargar y gestionar cualquier dependencia que necesite nuestro proyecto**
137. EN LA TERMINAL, IR A LA CARPERTA DONDE QUEREMOS GUARDAR NUESTRO PROYECTO react-native init nombreProyecto
138. WINDOWS
139. INSTALAR CHOCOLATEY
140. INSTALAR NODEJS Y PYTHON2 choco install nodejs.install choco install python2
141. INSTALAR HERRAMIENTA REACT NATIVE CLI npm install -g react-native-cli **npm es el gestor de paquetes de Node. Nos permite descargar y gestionar cualquier dependencia que necesite nuestro proyecto**
142. > Descargar Xcode (macOS) o Android Studio (Windows y macOS).
143. PROBAR NUESTRA INSTALACIÓN DE REACT NATIVE react-native init nombreProyecto cd nombreProyecto react-native run-android | run-ios
144. > Abrimos proyecto generado. > Se abrirá una ventana de terminal para gestionar el React Packager > Cuando se ejecuta una app React Native, carga la aplicación Javascript desde la siguiente URL. http://localhost:8081/index.ios.bundle
145. > Vista principal nos da instrucciones a tener en cuenta. > Para editar UI, debemos editar el fichero index.ios.js > Recargamos la vista con CMD+R > CMD+D para ver opciones de desarrollador
146. > Si hay errores, veremos una vista roja en pantalla. > Error puede ser de nuestra app o del servidor. > Mirar tipo de error, si persiste, cerrar terminal, proyecto y reiniciar.
147. EDITAR INDEX.IOS.JS O INDEX.ANDROID.JS
148. > Importamos la librería principal import React, { Component } from 'react';
149. > Importamos los componentes que vamos a utilizar import { AppRegistry, StyleSheet, Text, View } from 'react-native';
150. > Aquí está la app. > Invocamos a render, el motor que creará la interfaz. class EnpresaDigitala extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } }
151. > Aquí están los estilos, los cuales creamos para después utilizar en el cuerpo del código. const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
152. > Y, por último, la línea que asigna nuestra variable EnpresaDigitala que contiene la clase que hemos creado a la ejecución: > De esta forma se crea el punto de entrada y el contenido de la raíz del programa. AppRegistry.registerComponent('EnpresaDigitala', () => EnpresaDigitala);
153. HELLO WORLD
154. import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class EnpresaDigitala extends Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent('EnpresaDigitala', () => EnpresaDigitala);
155. BUENAS PRÁCTICAS
156. SEGMENTAR Y ORDENAR CÓDIGO > Utilizar funciones helper > No repetir código
157. <View style={styles.container}> <View> <Text> Campo 1 </Text> <TextInput style={styles.input}/> </View> <View> <Text> Campo 2 </Text> <TextInput style={styles.input}/> </View> <View> <Text> Campo 3 </Text> <TextInput style={styles.input}/> </View> <View> <Text> Campo 4 </Text> <TextInput style={styles.input}/> </View> </View>
158. formulario: function(){ return ( <View> <Text> Campo 1 </Text> <TextInput style={styles.input}/> </View> ) } {this.formulario()}
159. MODIFICAR STATE DE NUESTRA APP > En RN tenemos lo que se denomina state > Son valores de nuestros componentes > Al modificarlos, hacen que los componentes se vuelvan a renderizar > Siempre utilizar setState para asegurarnos que se renderizan los cambios
160. MAL this.state.mipropiedad = valor; BIEN this.setState({ mipropiedad: valor });
161. MAQUETAR VISTAS CON FLEXBOX FÁCILMENTE > Si no tenemos claro como maquetar app, Flexbox puede resultar confuso > Podemos crear función helper, para asignar borde de color a los contenedores y trabajar más fácilmente con ellos.
162. distinguirContainer(color){ return({ borderColor: color, borderWidth: 2 }) }
163. <View style={[styles.container, this.distinguirContainer('red')]}></View>
164. VENTAJAS DE USAR REACT NATIVE !
165. CROSS-PLATFORM > Puede convivir con código Java, Swift, Objective-C...y unirse mediante JavaScriptCore de forma que puedas usarlo en tu app > Ahora Apple deja actualizar apps mediante JavaScriptCore sin pasar por validación App Store
166. CICLO DE DESARROLLO RAPIDÍSIMO ! > Cambias una linea de texto y actualizas la app a la vez en iOS y Android, sin compilar.
167. CURVA DE APRENZIDAJE POCO PRONUNCIADA > Muy fácil adentrarse en el desarrollo de apps nativas. > No nos abruma tanto como el uso de las plataformas nativas de Apple y Google.
168. COSAS "MALAS" DE REACT NATIVE !
169. A VECES, AL COMPILAR, DEJA DE FUNCIONAR, HAY COMPORTAMIENTOS EXTRAÑOS > Cerrar y reiniciar desde terminal > Limpiar proyecto y caché > npm install
170. NUEVAS VERSIONES DE RN > Proyecto no se ejecuta > Actualizar RN npm upgrade react-native
171. NAVIGATOR > Documentación confusa > Muchas maneras de implementarlo > Comportamiento complejo de entender
172. LIBRERÍAS
173. > React Native App Intro > React Native Vector Icons > React Native Gifted Form > React Native Push Notifications > React Native Share
174. > React Native Image progress > React Native Google Analytics Bridge > React Native Fabric > React Native Code Push > React Native Sleek Loading Indicator
175. ELEMENTOS REUTILIZABLES > Evitamos crear elementos que utilizamos repetidamente una y otra vez React Native elements
176. PROYECTOS OPEN SOURCE > Hacker news > Snowflake > Calculator > NBA App > Finance > Facebook F8
177. PROYECTO AVANZADO. APP MULTIPLATAFORMA (IOS Y ANDROID)
178. MUCHAS GRACIAS
179. Imanol Terán Maruri @itermar itermar@gmail.com