Primeros pasos con React

Antes de empezar este tutorial es recomendable tener conocimientos intermedios de Javascript y de ES6.

1. Introducción

React es una librería para crear interfaces de usuarios. Fue creada por Facebook en 2011 y liberada como open source en 2013, cuenta con proyectos en producción por compañías como Netflix, Airbnb, Walmart, Facebook e Instagram.

Sus más notables propuestas son:
  • Propagación de datos unidireccional: Los datos son propagados de componentes padres a componentes hijos. La comunicación entre padres e hijos se hace mediante callbacks y los eventos son enviados de hijos a padres, siendo los componentes padre los que gestionan el estado y la lógica.
  • DOM Virtual: React genera una estructura en memoria semejante al DOM físico. Cuando detecta algún cambio compara entre el DOM virtual y el DOM físico y sólamente recarga aquello que haya cambiado. Ésta innovación hace obsoleto el tener que recargar la página entera cada vez que el estado es modificado.
  • JSX: JSX es una extensión de la sintaxis de Javascript comúnmente usada para codificar los componentes. Es semejante a html y se embebe en los ficheros .js, con lo que disponemos de todas las ventajas programáticas de Javascript.
  • Aplicaciones isomórficas: Esto quiere decir que las aplicaciones web se pueden renderizar tanto en el cliente como en el servidor. Si ésta se renderiza en el servidor se puede enviar al cliente desde el servidor html puro en aquellos casos que se pueda.
  • React Native: Facebook lanzó en 2015 React Native, el cual permite crear componentes usando herramientas de desarollo web y que genera aplicaciones nativas tanto para Android como para IOS.

Todo el código podrá verse en Github en este link.

2. Entorno

  • Hardware: MacBook Pro 17’ (2,66 GHz Intel Core i7, 8GB DDR3)
  • Sistema operativo: macOS Sierra 10.12.4
  • Entorno de desarrollo: VSCode
  • Nodejs 7.7.4

3. Instalación

Vamos a usar Create React App para crear una aplicación web sin necesidad de configurar nada.

Unicamente necesitaremos instalar en nuestra máquina NodeJS (Versión 7.7.4 o mayor). Si estás en windows es necesario reiniciar.

Una vez instalado NodeJS pasaremos a descargar la utilidad de create-react-app. Para ello abrimos terminal y seguimos estos comandos:

Si todo ha ido bien veremos la siguiente pantalla: Create React App ejecutándose

Además veríamos que se abre nuestro navegador con la aplicación ya corriendo.

4. ¿Qué es lo que ha hecho create-react-app?

Create React App ha generado y dispuesto una estructura de ficheros de la siguiente forma:

Además nos ayuda a generar un servidor local de desarrollo que nos muestra errores nos ofrece linting en nuestro editor y recarga la página automáticamente cuando un cambio es detectado. 😎

5. Componentes

Vamos a crear nuestro primer componente. Creamos un fichero nuevo llamado Hola.js en la carpeta src.

Nota: Por convención los componentes de React se escriben con la primera letra en mayúsculas.

Para usar este componente vamos a ir al fichero App.js y pondremos lo siguiente:

Guardamos y veremos que la página se ha recargado automáticamente. Tendríamos que ver lo siguiente:

Vamos a hacer un repaso rápido del código que acabamos de escribir.

Aquí importamos React. React tiene que estar en el contexto para que sepa que es un componente de React. Además, importamos de la librería de React el módulo { Component }. Esto se debe a que nuestra clase debe extender de Component.

Este es nuestro componente y debe extender de Component.

Este es el único método de nuestra clase. Tiene que ser llamado obligatoriamente render() y este método es el que se encarga de renderizar el componente. Varios puntos a tener en cuenta. React necesita que retornemos un único elemento (Independientemente de cuantos hijos tenga), por ejemplo, esto nos daría un error:

Mientras que esto estaría bien

Y el otro punto importante es que hay ciertas palabras reservadas que no se pueden usar, ya que recordemos que estamos escribiendo html (JSX) en Javascript, y hay nombre que colisionan. Por ejemplo, class debe ser sustituida por className y for tiene que ser sustituida por htmlFor.

Esta línea quiere decir que vamos a exportar nuestro componente para que éste pueda ser usado a lo largo de nuestra aplicación.

6. Props

Vamos a hacer que nuestro componente Hola sea dinámico.

El objeto props es un objeto especial donde se determinan todas las propiedades que tiene un componente. Se usa para hacer que los componentes rendericen una cosa u otra. A este objeto props se le puede pasar desde strings hasta objetos e incluso funciones.

Para asignarle un prop a un componente vamos a App.js y cambiamos por Veremos que la página se recarga y deberíamos ver lo siguiente:

Es importante ver que para hacer uso de expresiones en jsx éstas tienen que estar entre llaves. Dentro de estas llaves podemos hacer virguerías como:

O por ejemplo

Que hace que si la propiedad que hemos pasado a nuestro componente es “César” nos saluda como es debido.

7. State

Vamos a ver una parte primordial de las aplicaciones hechas con React. El estado. Imaginemos que queremos hacer un contador que vaya contando de uno en uno.

Primero hagamos un componente llamado Contador.js en la carpeta src. Vamos a ir poco a poco explicando lo que hace cada parte.

En el constructor de la clase llamamos a super() requisito obligatorio si tenemos un constructor. En la siguiente línea inicializamos state y le asignamos un objeto con una clave y un valor. Este estado puede ser cualquier cosa, desde más objetos hasta arrays o strings.

Si queremos más estados, sólamente los tenemos que separar por comas

En el método ´render()´ pintamos el estado con this.state.contador. Ahora bien, el puntazo de React es que cuando modificamos el estado, todos aquellos componentes que dependen de ese estado se recargan automáticamente.

Para ello vamos a crear un botón de aumente el contador y un método de aumentar:

Y para usarlo vamos a App.js e importamos nuestro componente y lo incluimos como se muestra a continuación.

Si todo ha ido bien veremos lo siguiente: Y podrás comprobar que si pulsas sobre el botón el contador va aumentando. 👍

8. Conclusión

React es una gran propuesta de Facebook para solventar el diseño y la programación de interfaces complejas. Además nos permite reutilizar componentes, abstrae la manipulación directa del DOM y nos da la posibilidad de separar modularmente los componentes.

9. Referencias