Tablón de Películas con React Native. PARTE 2 | Componentes

Una pro y un contra de React Native es que necesitar saber o aprender React (No me digas… ), por eso en esta sección tocaremos lo más elemental para poder hacer React

Atento anuncio, aparir de aquí, todo el código estará en github :D

La diferencia de React en Web y React Native, es que tenemos muchos componentes “Out of the box”/”Fuera de la caja”, para comenzar a construir interfaces visuales, lo cual es de mucha ayuda considerando que aquí no existen las etiquetas básicas de HTML, como <div>, <p>, <h1>, etc… y aquí cada nuevo componente tiene que partir de un componente hecho de manera nativa, escrito en Java o Object-C, y debe estar enlazado al proyecto en React Native.


Ya habrás notado que cuando creaste el proyecto se generaron dos index en javascript, uno para iOS (index.ios.js) y otro para Android, (index.android.js), eso es porque React Native necesita por aparte los indices de donde va a obtener el código para construir una plataforma móvil.

Y tal vez te preguntes que si cada que quieres hacer un proyecto en React Native tienes que hacer doble trabajo escribiendo código para iOS y para Android. Bueno realmente no, existirán los casos donde alguna librería o algún componente solo tenga soporte para una de las dos plataformas, pero la mayoría del tiempo el código se escribe igual para todas las plataformas que se trabajen con React Native, React Native está hecho para la productividad y cumple con su propósito.

Para solucionar el caso del código independiente a cada plataforma, vamos a crear un nuevo componente que unifique a las plataformas

Vamos a crear una carpeta “src ”en la raíz de proyecto, dentro de ella un archivo llamado App.js
En el nuevo archivo App.js pegaremos todo el código que tenía cualquiera de los dos index, no importa cúal de los dos escojas, tienen el mismo código
Los únicos cambios que haremos es que ya no estaríamos importando AppRegistry, y la clase del componente se exporta por si misma, como aparece en la última línea del código
// src/App.js
import React, { Component } from ‘react’
import { StyleSheet, Text, View } from ‘react-native’
class App 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>
}
}
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,
},
})
export default App // esta línea exporta el componente

Ahora solo falta modificar los dos index independientes, para que reconozcan este codigo y exporten lo mismo a sus respectivas plataformas

Solo hay que importar el componente App en cada uno de los dos index y retornarlo como único componente
// index.android.js y index.ios.js
import React, { Component } from ‘react’
import { AppRegistry } from ‘react-native’
import App from ‘./src/App’ // importamos nuestro componente
class react_native__movies extends Component {
render() {
return <App/> // y lo retornamos como unico componente
}
}

AppRegistry.registerComponent(‘react_native__movies’, () => react_native__movies)
// Esta ultima línea es súper importante ya que hace todo el trabajo de exportar directamente a la plataforma móvil

Ya habrás notado que en remplazo de <div> y otras etiquetas del DOM se utilizan los componentes que se importan desde React Native

import { StyleSheet, Text, View } from ‘react-native’

Donde <Text> hace el juego de todas las etiquetas de texto como <span>, <p>, <h1> …

donde <View> hace el juego de todas las etiquetas de texto como <div>, <section>, <main>

y te habrás dado cuenta que no hay CSS… exactamente, en remplazo los estilos se escriben en formato JSON que se instancia en una variable constante que se construye a partir del componente StyleSheet con los indices que se muestran en la documentación oficial de React, donde la única diferencia es que los indices que están separados por un guion se escriben en camelCase

background-color => backgroundColor

Finalmente, si aun no estas tan familiarizado con la estructura de los componentes de React, dejare esta pequeña anatomía de un componente

// Anatomia de un componente
/* 
* Todos los componentes dependen de react,
* Por lo que hay que importarlo desde la librería
*/
import React, { Component } from ‘react’
import { Text, View } from 'react-native'
/*
* Es buena practica que todos los componentes
* se escriban en Mayúscula y en CamelCase
* y desde que se usa ES6/ES2015
* los componentes deberían ser clases
* Que exportan de Component
*/
class ElComponente extends Component {
constructor() {
super()
/*
* no es necesario que agregues el
* constructor a menos que lo necesites,
* pero cada que lo agregues no olvides el super()
* aquí regularmente se inicializa el state y los props
*/
}
render() {
/*
* El render puede que sea la parte mas importante
* esta es la que despliega el componentene en la vista
* mantelo lo mas limpio posible,
* aquí retornas la estructura de tu componente
* Recuerda que solo puedes retornar un componente
* así que todo el demás código, envuélvelo en otro componente
* ejemplo abajo
*/
return <View>
<Text>Hola<Text/>
<Text>Mundo<Text/>
</View>
}
}
/*
* No olvides exportar tu componente
* si quieres hacer uso de el
*/
export default ElComponente