React Native
John Machahuay Giraldo
Acerca de mi
- Full Stack developer.
- Inicié haciendo diseños y ahora me dedico al desarrollo web y móvil.
- Expositor en distintos meetups.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3748731/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3748732/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3748736/pasted-from-clipboard.png)
Agenda
- Aplicaciones híbridas
- Hablemos de React Native
- Debugging
- Ejemplo de demostración
- Recursos
Aplicaciones híbridas
Aplicaciones híbridas son
- "mobile web app", un "HTML5 app"
- Un webView ejecuta la web app
- Acceso a las APIs nativas
- Escribe una vez, despliégalo en distintas plataformas
- Los componentes de UI son HTML con CSS link
React Native es una extensión de híbrido
React Native
- Componentes nativos de UI link
- Creado y mantenido por Facebook
- Apps escritos en Javascript
- Aprende una vez, escribe para distintas plataformas
- 80% - 90% código compartido
React Native
- Los sistemas operativos soportados son >= Android 4.1 (API 16) and >= iOS 8.0.
- No HTML
- No CSS directamente - Flexbox
- No WebView
<div> == <View>
<p> || <span> == <Text>
<button> == <TouchableHighlight>
<img /> == <Image />
<input /> == <TextInput />
React Native vs React
import React, { Component } from 'react';
class SomeComponent extends Component {
render () {
return (
<div>
<p>Hello World</p>
</div>
)
}
}
React (web)
React Native vs React
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class SomeComponent extends Component {
render () {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
React Native (mobile)
React Native - Producción
Cómo iniciar
- Install Node
- brew install watchman
- brew install flow (optional)
- npm install -g react-native-cli
- react-native init DemoApp
- react-native run-ios
- react-native run-android
Muéstrame el código
Componentes
class MyComponent 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.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
Estilos
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,
},
});
Peticiones al servidor
fetch('https://myapi.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
});
Componentes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3148739/Screen_Shot_2016-10-22_at_9.58.46_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3148740/Screen_Shot_2016-10-22_at_9.59.09_AM.png)
Ejemplo
No se olviden darle un clic en "star" :P
¿Por qué usar React Native?
Apariencia nativa de los componentes
Rendimiento
Mejor productividad del desarrollador
React Native es extendible
Aprende una vez, escribe para distintas plataformas
Recursos
- https://www.toptal.com/mobile/comparing-react-native-to-cordova
- https://developers.soundcloud.com/blog/react-native-at-soundcloud
- http://mrn.js.org/
- https://facebook.github.io/react-native/releases/next/docs/getting-started.html#content
Gracias
John Machahuay
React Native webinar
By johnprog
React Native webinar
- 1,222