Tablón de Películas con React Native. PARTE 3| Network

Como podría asumir, estas familiarizado con hacer peticiones AJAX con jQuery en web, tristemente(afortunadamente) aun no hay una versión de jQuery que corra en React Native ya que jQuery esta fuertemente ligado al DOM, afortunadamente, existe muchas librerías para hacer peticiones AJAX, que actualmente son mas populares que usar jQuery, y personalmente como desarrollador web, me estoy desligando mucho de la necesidad de usar jQuery y buscar alternativas nativas o en otras librerías.

Afortunadamente(nuevamente), React Native también incluye una librería nativa para hacer peticiones AJAX y que a su vez es el estándar nativo para web. “Fetch”, pero en su defecto, no me gusta mucho esa librería, ya que tiene un pequeño defecto, el cual mostrare mas adelante.

Para fines de esta serie utilizare SuperAgent y haré ejemplos con ambas librerías.


Comenzare aclarando lo que tal vez ya es obvio, en React Native puedes manejar tus dependencias como lo hacías en cualquier proyecto de Node :D, por lo que comenzare instalando la librería de SuperAgent.

Abriremos un terminal situado en la carpeta del proyecto, puedes hacerlo rapidamente si precionas Shift + Click Derecho sobre una parte vacía en el foder del proyecto y precionas la opcion, “Abrir una ventana de Comandos”

$npm install --save superagent

Una vez que la instalación termina, podemos consumir el recurso de pruebas que facebook nos ofrece para consumir un JSON de películas en esta dirección https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json


Ahora nos adentraremos a crear la petición AJAX en nuestro componente src/App.js

Agregare la dirección de la petición como una variable constante (const) como se hace en ES2015

React Native es compatible 100% con ES2015, por lo que podremos utilizar “let”, “const”, funciones de flecha, entre otros excelentes features de lo nuevo de Javascript. NOTA: las clases, como las hemos estado trabajando en el capitulo pasado igual son parte de la nueva definición de Javascript ES2015… tampoco son necesarios los (;), por favor no los uses D:
src/App.js
/* se omitieron lineas de código */
import request from 'superagent'
/* declarada la variable constante antes que la clase*/
const URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'
/* Nuestro componente */
class App extends Component {
constructor() {
super()
    /* Declaras las funciones en el constructor
* Utilizamos bind para "amarrar" las funciones
* y el contexto sea propiedad de esta clase
*/
this.requestSuperAgent = this.requestSuperAgent.bind(this)
}
componentDidMount() {
/* Esta función es parte del ciclo de vida de react
* Se ejecuta al mismo tiempo que render() pero aquí es donde habitualmente deberían hacerse las peticiones asíncronas
*/
this.requestSuperAgent() // Llama la función de abajo
}
requestSuperAgent() { // Esta :P
request
.get(URL)
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
}
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>
)
}
}
/* se omitieron lineas de codigo */

Una vez que corras este código, puede que no veas nada en pantalla, y de hecho no debería verse nada en pantalla mas que el mensaje de bienvenida de React Native.

Para poder ver lo que sucede tras hacer esta petición los console.log() que se ejecutaran los puedes debugear desde el navegador, esto se logra gracias a React Native y su función de “debug JS remotely”, la cual puede encontrar en el menú de desarrollador que se abre cuando, si lo estas corriendo en un dispositivo físico, agitas el celular o si es el emulador puedes acceder a el escribiendo el comando

$adb shell input keyevent 82

en cual quier terminal y entras algo como esto

Se abrirá un navegador, solo es cuestión de ver las herramientas de desarrollador por ejemplo en chrome presionando Shift + Control + i


y Para terminar, agregare el ejemplo con la variación de la librería fetch para que puedas experimentar con ella ya que es nativa, el motivo de que use superagent es que en web es la misma librería que uso, por lo tanto para mantener mi código monolítico en web react y react native, uso las mismas.

src/App.js
/* se omitieron lineas de código */
const URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'
class App extends Component {
constructor() {
super()
    this.requestFetch= this.requestFetch.bind(this)
}
componentDidMount() {
this.requestFetch()
}
requestFetch() {
    /* Aquí podemos ver el detalle de que hablaba
* la librería fetch regresa un objeto cursor
     * que tenemos que parsear en JSON para 
* para poder hacer uso de el
*/
fetch(URL)
.then(res => res.json()) // Parseo
.then(res => {
console.log(res) // Cuerpo de la petición
})
.catch(err => {
console.log(err)
})
.done()
}
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>
)
}
}
/* se omitieron lineas de codigo */