Creación de una aplicación de diccionario usando React Native para Android

() translation by (you can also view the original English article)

Introducción

React Native de Facebook es un poderoso framework que te permite crear aplicaciones Android e iOS de forma rápida y sin esfuerzo utilizando solamente JavaScript y JSX. Las aplicaciones creadas con React Native hacen uso de los componentes nativos de la interfaz de usuario y, por lo tanto, son indistinguibles de las aplicaciones creadas directamente con los SDK de Android e iOS.

Su rendimiento tampoco es muy diferente al de las aplicaciones nativas, porque casi todo el código de JavaScript se ejecuta en segundo plano en una instancia incrustada de JavaScriptCore, que es el mismo motor de JavaScript que impulsa a Safari de Apple.

En este tutorial, te ayudaré a comenzar a trabajar con React Native para Android mostrándote cómo crear una sencilla aplicación de diccionario inglés-alemán.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente instalado en tu computadora:

La versión más reciente del SDK de Android y la biblioteca de soporte de Android
La versión más reciente de Node.js

A partir de septiembre de 2015, React Native solamente es compatible con OS X. Sin embargo, con la ayuda de algunos scripts, React Native v0.11.4 funciona bien en Ubuntu 14.04.

1. Instalación de React Native

React Native está disponible como un paquete de Node.js y se puede instalar rápidamente usando npm, Node Package Manager (Gestor de paquetes de Node).

1	npm install -g react-native-cli

Para usar React Native con el fin de desarrollar aplicaciones Android, debes configurar el valor de una variable de entorno llamada ANDROID_HOME para que sea igual a la ruta absoluta del directorio que contiene el SDK de Android. Si estás usando el shell Bash, puedes configurar la variable usando export.

1	export ANDROID_HOME=/path/to/Android/Sdk

2. Creación de un proyecto nuevo

Para crear un proyecto de React Native, debes usar la interfaz de línea de comandos, o CLI, de React Native, a la que puedes acceder usando el comando react-native. En este tutorial vamos a crear una aplicación de diccionario, así que asignemos el nombre Dictionary (Diccionario) al proyecto.

1	react-native init Dictionary

Una vez que el comando termine de ejecutarse, tendrás un nuevo directorio llamado Dictionary (Diccionario) que contendrá una aplicación de inicio de React Native. Entra al nuevo directorio usando cd.

1	cd Dictionary

Antes de continuar, te sugiero que ejecutes la aplicación de inicio para asegurarte de que tu entorno de desarrollo tenga todo lo que React Native necesita. Para hace eso, escribe el siguiente comando:

1	react-native run-android

Ahora encontrarás una aplicación llamada Dictionary (Diccionario) instalada en tu emulador. Haz clic en su icono para ejecutarla. Si todo salió bien, deberías ver una pantalla similar a esta:

3. Preparación del punto de entrada de tu aplicación

De forma predeterminada, el punto de entrada de una aplicación Android de React Native es un archivo de JavaScript llamado index.android.js. Cuando generaste el proyecto usando la CLI de React Native, este archivo se creó automáticamente. Sin embargo, contiene código que pertenece a la aplicación de inicio. Puedes modificar y usar partes de ese código para tu aplicación, o simplemente puedes eliminarlo todo y comenzar desde cero. Para este tutorial, te sugiero que hagas esto último.

Una vez que hayas eliminado el contenido de index.android.js, usa require para cargar un módulo llamado react-native. Este módulo contiene todas las funciones y objetos de React Native que necesitarás para crear tu aplicación.

1	var React = require('react-native');

4. Creación de un componente de React

Los componentes de React son objetos de JavaScript responsables de renderizar y actualizar automáticamente la interfaz de usuario de una aplicación React Native. De hecho, casi todos los elementos de la interfaz de usuario de una aplicación React Native son un componente de React. Esto significa que, para crear la interfaz de usuario de tu aplicación, debes crear tu propio componente de React personalizado. Para hacer eso, usa la función createClass de React. El siguiente código crea un componente llamado Dictionary (Diccionario):

1	var Dictionary = React.createClass({
2
3	});

Puedes ver este componente como la primera pantalla de tu aplicación.

Paso 1: Definición del diseño

React Native llama automáticamente a la función render cada vez que necesita dibujar o actualizar un componente. Por lo tanto, debes agregar esta función a tu componente. Dentro de la función, puedes definir el diseño del componente usando JSX, una extensión de sintaxis de JavaScript que te permite mezclar fácilmente etiquetas XML con código JavaScript.

React Native ofrece varios componentes que puedes usar para crear el diseño. Por ahora usaremos un React.View como contenedor, un React.Text para mostrar texto y un React.TextInput para aceptar la entrada del usuario. Agrega el siguiente código al componente:

render: function() {
    var layout =
        <React.View style = { styles.parent } >

            <React.Text>
                Type something in English:
            </React.Text>

            <React.TextInput />

            <React.Text style = { styles.germanLabel } >
                Its German equivalent is:
            </React.Text>

            <React.Text style = { styles.germanWord } >                
            </React.Text>
          
        </React.View>
    ;
	return layout;
},

Si estás familiarizado con HTML, puedes pensar en el View como un div de HTML, en el Text como un span de HTML, y en el TextInput como un elemento input de HTML.

Paso 2: Adición de estilos

En el fragmento de código anterior, varios componentes tienen un atributo style. El atributo style es bastante similar al atributo class de HTML. Sin embargo, en lugar de hacer referencia a una clase CSS en una hoja de estilo, hace referencia a un objeto JSON en una instancia de React.StyleSheet.

Para crear un objeto React.StyleSheet para tu aplicación, debes usar la función React.StyleSheet.create. Como su único argumento, espera un objeto JSON que contenga los estilos de los componentes individuales. Estos son los estilos que usé para nuestra aplicación de ejemplo:

var styles = React.StyleSheet.create({

	// For the container View
    parent: {
        padding: 16
    },

	// For the Text label
    germanLabel: {
        marginTop: 20,
        fontWeight: 'bold'
    },

	// For the Text meaning
    germanWord: {
        marginTop: 15,
        fontSize: 30,
        fontStyle: 'italic'
    }
});

Paso 3: Registro del componente

Par que React Native sepa que debe renderizar tu componente cuando tu aplicación sea ejecutada, debes registrarlo usando la función React.AppRegistry.registerComponent. Para hacer eso, agrega el siguiente código al final de index.android.js:

1	React.AppRegistry.registerComponent('Dictionary', () => Dictionary);

Si no estás familiarizado con las funciones flecha de ES6, simplemente puedes usar el siguiente código JavaScript convencional en su lugar:

1	React.AppRegistry.registerComponent('Dictionary', function() {
2	return Dictionary;
3	});

Si lo deseas, ahora puedes volver a cargar tu aplicación para ver el nuevo diseño. Para hacer eso, presiona el botón de menú de tu emulador y haz clic en Volver a cargar JS.

4. Control del estado del componente

Todos los componentes tienen una variable miembro especial llamada state, que es un objeto JSON. Es especial, porque tan pronto como el valor de la variable state de un componente cambia, React Native automáticamente vuelve a renderizar el componente para reflejar el cambio. Esta es una función muy útil y, si la usas correctamente, puedes evitar el tener que obtener o actualizar manualmente el contenido de los elementos de la interfaz de usuario de tu aplicación.

Agreguemos dos claves, input y output, a la variable state del componente Dictionary. Para hacer eso, tendrás que usar una función llamada getInitialState. El valor de retorno de esta función se convierte en el valor de la variable state del componente.

getInitialState: function() {
    return {
        input: '',
        output: ''
    };
},

Ahora puedes asociar el TextInput con input y el último componente Text con output. Después de hacer eso, tu diseño debería verse así:

<React.View style = { styles.parent } >

    <React.Text>
        Type something in English:
    </React.Text>

    <React.TextInput text = { this.state.input } />

    <React.Text style = { styles.germanLabel } >
        Its German equivalent is:
    </React.Text>

    <React.Text style = { styles.germanWord } >
        { this.state.output }
    </React.Text>
  
</React.View>

Como habrás adivinado, input contendrá la palabra en inglés escrita por el usuario, mientras que output contendrá su equivalente en alemán.

Si bien los cambios en state se envían automáticamente a la interfaz de usuario, lo contrario no ocurre. Esto significa que la variable state de nuestro componente no cambia si el usuario escribe algo en el TextInput. Para actualizar state manualmente, deberías usar el método setState del componente.

Para enviar el valor del TextInput a input, puedes agregar un oyente onChangeText al TextInput y hacer una llamada a setState en su interior. Usando ES6, la etiqueta del TextInput se verá así:

1	<React.TextInput text = { this.state.input }
2	onChangeText={(e) => this.setState({input: e})}
3	/>

En este punto, cualquier cosa que el usuario escriba en el TextInput de tu aplicación estará disponible inmediatamente en input. Todo lo que nos queda por hacer es asociar input a su equivalente en alemán y actualizar output. Para hacer eso, puedes usar un diccionario llamado Diccionario para principiantes del Sr. Honey (alemán-inglés) por Winfried Honig. Descarga el equivalente en JSON del diccionario de GitHub y agrégalo a tu proyecto.

Para cargar el diccionario dentro de index.android.js, usa require.

1	var english_german = require('./english_german.json');

Ya que english_german no es más que un objeto JSON global en el que las palabras en inglés son claves y sus equivalentes en alemán son valores, todo lo que debes hacer ahora es verificar si input está disponible como una clave y, de ser así, llamar a setState para asignar a output el valor asociado. El código para hacer eso podría tener esta apariencia:

showMeaning: function() {
	// Use the ternary operator to check if the word 
	// exists in the dictionary.
	var meaning = this.state.input in english_german ? 
		            english_german[this.state.input] : 
		            "Not Found";

	// Update the state
	this.setState({
		 output: meaning 
	});
},

Ahora puedes asignar showMeaning al oyente onSubmitEditing del TextInput, con el fin de que se invoque solamente cuando el usuario haya terminado de escribir.

<React.TextInput
    onChangeText={(e) => this.setState({input: e})}
    text = { this.state.input }
    onSubmitEditing = { this.showMeaning }
/>

Tu aplicación de diccionario está lista. Puedes volver a cargarla y escribir una palabra en inglés para ver inmediatamente su traducción en alemán.

Conclusión

En este tutorial, aprendiste cómo instalar React Native y cómo usarlo para crear tu primera aplicación Android, un diccionario inglés-alemán, usando solamente JavaScript y JSX. Al hacer eso, aprendiste a crear un componente personalizado, a estilizarlo y a usar su variable state para controlar lo que muestra.

Para obtener más información sobre React Native, puedes consultar su documentación.