Después de haber comenzado con ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS, vamos a ir un poco más profundo en cómo funcionan los componentes de React.

Cuando creamos un componente e interactuamos con el pasa por un ciclo de vida. Si conocemos que pasa en cada paso podemos aprovechar de hacer modificaciones o reaccionar a ciertos eventos para hacer nuestro componente y aplicación comportarse como queremos.

Vamos a ver 3 ciclos:

  1. Inicialización del componente
  2. Actualización del componente
  3. Destrucción del componente

Y veremos en cada ciclo que métodos son llamados y que propiedades están disponibles.

1. Inicialización del Componente

Esta es la fase inicial donde el componente es creado.

Los métodos y triggers que son llamados durante esta fase son:

  1. getInitialState
  2. getDefaultProps
  3. componentWillMount
  4. render
  5. componentDidMount

getInitialState

Este es llamado sólo una vez antes de que el componente se monte. Regresará el valor inicial de this.state.

getDefaultProps

Solo se invoca una sola vez y es guardado en cache cuando el componente es creado. Los valores serán guardados en this.props.

Como es invocado antes de la creación de cualquier instancia no puede depender en los valores anteriores de this.props.

componentWillMount

Invocado solo una vez justo antes que se llame al render del componente, tanto en el cliente como en servidor, si se coloca un valor de estado (this.state) dentro de este método no provocará una actualización.

render

Este método retorna el componente como tal para su visualización, sino quieres que se muestra nada debes retornar null o false. Es el único método requerido siempre por los componentes.

Esta función debe ser pura, lo que quiere decir que no debe modificar el estado del componente y que regresará el mismo resultado cada vez que se llame. Tampoco debe leer o escribir directamente al DOM o interactuar con el navegador, para este tipo de intereacciones se pueden utilizar otros métodos como por ejemplo componentDidMount().

componentDidMount

También se invoca una sola vez, sólo en el cliente, y es llamado inmediatamente después de la vizualización inicial (realizada por la función render). En este método ya puedes acceder a cualquier referencia de los componentes hijos, el método componentDidMount de los hijos es siempre llamado antes que el de los padres.

En este método puedes integrar otros frameworks de Javascript, colocar timers con setTimeOut o setInterval o hacer llamadas AJAX.

Aquí finaliza la fase de inicialización y el componente debería ya mostrarse en nuestro navegador.

2. Actualización

La fase de actualización pasa o cuando hay nuevos props o cuando cambia el estado.

  1. componentWillRecieveProps (solo cuando hay nuevos props)
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

componentWillRecieveProps

Sólo es llamado cuando un componente está recibiendo nuevos props. Podemos utilizar este método para actualizar el estado (this.state) sabiendo que va a haber un cambio en los props.

Los valores antiguos de los props se pueden acceder con this.props ya que aún no se han actualizado.

Este método recibe como parámetros los valores de los props a actualizar.

Por ejemplo:

componentWillReceiveProps: function(nuevosProps) {
  this.setState({
    votos: nuevosProps.votos > this.props.votos
 });

Nota importante: NO implica que un cambio de estado vaya a generar un cambio en los props.

Este método NO es llamado cuando hay un cambio de estado.

shouldComponentUpdate

Es llamado antes de render cuando son recibidos nuevos props o estados. Este método por defecto retorna true, pero si estamos seguro que la actualización de los props o el estado no requiere que se actualice el componente puedes sobreescrbirlo y retornar false, en cuyo caso no se llamara a método render hasta el próximo cambio y tampoco se llamarán a los métodos componentWillUpdate y componentDidUpdate.

Aquí es donde es importante la inmutabilidad del estado del componente, en este método podemos hacer comparaciones entre los cambios y ver si es necesario actualizar o no. Esto nos permite obtener mejor rendimiento y menos uso de nuestros recursos.

Por ejemplo podemos verificar si no hubo cambios en nuestro props y si es así no actualizar.

shouldComponentUpdate: function(nuevosProps, nuevoEstado) {
  return nuevosProps.id !== this.props.id;
}

También como se muestra tenemos acceso al nuevoEstado, por lo que podemos hacer otras comparaciones y ver si es necesario actualizar o no.

Este método no se llama en la inicialización.

componentWillUpdate

Se llama justo antes de llamar a render(), cuando se reciben los nuevos props o estados. Aquí podemos hacer preparaciones antes de que ocurra la actualización.

Es importante saber que NO podemos utilizar this.setState() en este método, si necesitamos cambiar el estado debido a un cambio en los props debemos usar el método componentWillReceiveProps que vimos anteriormente.

Ejemplo:

componentWillUpdate: function(nuevosProps, nuevoEstado) {
  ...
}

Este método no se llama en la inicialización.

render

Es igual al que vimos en la fase de inicialización y es donde se crea el componente como tal.

componentDidUpdate

Se llama justo después de render después que todos los cambios han sido hechos en el DOM. Puedes utilizar este componente para hacer alguna operación el DOM después que el componente se haya actualizado.

componentDidUpdate: function(anteriorProps, anteriorEstado) {
  ...
}

3. Destrucción

Esta es la última fase y es cuando el componente se destruye y consiste en un sólo método.

componentWillUnmount

Es llamado justo antes de que el componente sea removido del DOM, es útil para hacer cualquier operación de limpieza, tales como invalidar timers, eliminar elementos que se hayan creados durante componentDidMount y cualquier otra operación pendiente.

Conclusión

Siempre es importante conocer por cuales ciclos de vida pasa cualquier elemento de nuestra aplicación, muchas veces tratamos de realizar operaciones donde no corresponde, o queremos evitar que pasen ciertos eventos cuando se cumplen ciertos valores, o queremos acceder a datos antes de que se muestren y todo lo podemos hacer con los métodos que vimos.

También te pueden interesar ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS.

Como siempre si tienen cualquier duda o sugerencia siempre son bienvenidos los comentarios.

 

 

En el artículo anterior Introducción a ReactJS vimos como que es React y un par de pequeños ejemplos de como crear un componente, en este artículo instalaremos todo lo necesario para correr React en nuestra computadora.

Instalar Node

Lo primero que tenemos que tener instalado es Node, preferiblemente en su última versión.

Mac OS X o Linux (Recomendada)

Si tienes cualquiera de estos dos sistemas operativos recomiendo instalar node con NVM, este es un manejador de versiones de node que permite cambiar de versiones cuando lo necesites y mantener actualizado node a su última versión de forma sencilla.

Nota: Para linux necesitas tener instalado build-essentials y libssl-dev.

Los pasos para instalarlo son:

1- Ejecutar en el terminal:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

2- Para instalar la última versión de node ejecutamos:

nvm install node

Para más información ve a la página de NVM.

Mac OS X (Alternativo)

Tienes dos opciones ir a la página de Node descargar el instalador y ejecutarlo o instalarlo con brew ejecutando:

brew update
 brew install node

Con cualquiera de los dos métodos debería quedar instalado node y npm.

Si ya lo tenías instalado lo puedes actualizar con:

brew update node

Linux (Alternativo)

Puedes instalar node en Linux usando cualquier instalador de paquetes de tu distribución por ejemplo para Debian y Ubuntu ejecutando:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install nodejs npm

También puedes descargar el instalador desde la página de Node

MS Windows

Descarga el instalador desde la página de Node

Instalar Webpack

Hay dos librerías que se utilizan con React para crear el bundle de nuestra aplicación, hacer live reload y mucho más una es browserify y la otra es Webpack, yo prefiero Webpack y por eso indico como se instala aquí, si prefieres browserify instala ese.

Para instalar Webpack simplemente ejecutamos:

npm install webpack -g

También necesitaremos el Webpack-dev-server para instalarlo ejecutamos:

npm install webpack-dev-server -g

Esto instalará el paquete de webpack y webpack-dev-server de manera global.

Instalar Babel

En nuestros ejemplos vamos a estar utilizando ES6 (o ES2015 como prefieras llamarlo) y para esto necesitamos Babel que “transpila” o transforma el código ES6 a la versión anterior para que sea entendido por todos los navegadores, sin tener que preocuparnos de nada.

Para instalarlo ejecuta:

npm install babel -g

Empezando un proyecto

Listo esas son las herramientas que necesitamos ahora veremos con configurar un proyecto de ejemplo con estas herramientas.

En este ejemplo vamos a hacer un simple botón que al presionarlo nos muestre un número aleatorio.

Creamos un directorio que yo voy a llamar react-configuracion

mkdir react-configuracion

cd react-configuracion

Una vez dentro del directorio ejecutamos:

npm init

Presionamos Enter para seleccionar todas las opciones por defecto, después lo podremos cambiar en el archivo package.js.

Esto inicializará nuestro proyecto con un archivo package.js.

Ahora tenemos que instalar react y react-dom ejecutando:

npm install react react-dom --save

Eso lo instalará y lo guardará en nuestras dependencias.

Para que no tengamos errores en la instalación debemos declarar webpack y webpack-dev-server en nuestras dependencias para eso ejecutamos:

npm install webpack webpack-dev-server --save-dev

Ahora instalaremos algunos preset de Babel:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Nota: Recuerda que debes tener instalado babel, webpack y webpack-dev-server como lo indicamos en los pasos anteriores.

Ahora vamos a empezar a crear nuestra aplicación.

Primero creamos un archivo llamado webpack.config.js en tu editor favorito, este archivo es donde indicaremos como se compilará nuestro proyecto y donde se hará la transformación de JSX a Javascript, en este archivo colocamos lo siguiente:

module.exports = {
 entry: './main.js', //cual es la entrada de nuestra aplicacion
 output: {
   path: './', //donde colocará los archivos al terminar
   filename: 'index.js' //el nombre de nuestro bundle
 },
 devServer: { // opciones para el servidor de desarrollo
   inline: true, // para que se recargue automáticamente cuando cambie un archivo
   port: 3333 // puerto donde funcionará el servidor
 },
 module: {
   loaders: [
     {
       test: /\.js$/, //probamos por la extensión .js
       exclude: /node_modules/, //no queremos procesar los archivos en node_modules
       loader: 'babel', //utilizamos babel
       query: { //cargamos los presets que instalamos
         presets: ['es2015', 'react']
       }
     }
   ]
 }
};

Todo está comentado en el archivo para que lo puedan entender mejor.

Ahora creamos un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Número Aleatorio</title>
</head>
<body>
 <div id="app"></div>
 <script src="index.js"></script>
</body>
</html>

Un HTML estandar donde agregamos un div con id #app que será nuestro elemento target para la aplicación e incluimos el index.js que es el bundle que crea Webpack como lo indicamos anteriormente.

Creamos un archivo llamado App.js donde crearemos nuestro primer componente, colocamos el siguiente contenido:

import React from 'react';
const App = React.createClass({
 getInitialState() {
   return { num: Math.ceil(Math.random() * 6) };
 },
 getNumeroAleatorio() {
   this.setState({num:Math.ceil(Math.random() * 6)});
 },
 render() {
   return (
     <div>
       <p>{this.state.num}</p>
       <button onClick={this.getNumeroAleatorio}>Lanzar</button>
     </div>
   )
 }
});

export default App;

Simplemente estamos creando un componente con JSX, con un estado inicial de un número aleatorio, una función que coloca el estado de num en un número aleatorio, el componente como tal que consiste en mostrar el número y un botón para actualizarlo que llama la función getNumeroAleatorio. Finalmente exportamos la clase. Puedes ver más de los componentes en el primer artículo de Introducción a ReactJS.

Luego creamos el archivo main.js donde mostraremos nuestro componente, en este archivo colocamos lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Aquí importamos la librerías necesarias y nuestro componente que acabamos de crear, luego indicamos con ReactDOM.render() que muestre nuestro componente App (primer argumento), y que lo asocie con el div con id app que creamos en nuestro index.html.

Por último modificamos nuestro archivo package.js, eliminamos la linea que dice test dentro de scripts y agregamos una nueva linea de start donde llamamos a webpack-dev-server.

{
 "name": "react-configuracion",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },
 "devDependencies": {
   "babel-core": "^6.4.5",
   "babel-loader": "^6.2.2",
   "babel-preset-es2015": "^6.3.13",
   "babel-preset-react": "^6.3.13",
   "webpack": "^1.12.13",
   "webpack-dev-server": "^1.14.1"
 }
}

El cambio ocurre en la línea 7,  “start”: “webpack-dev-server”.

Guardamos todos los archivos y en nuestra terminal dentro del directorio del proyecto ejecutamos:

npm start

Nuestro servidor correrá en el puerto 3333 como lo indicamos en el archivo de webpack.config.js.

Abrimos nuestro navegador en:

http://localhost:3333

y deberíamos ver algo como:

Componente ReactJS

Si hacemos click en el botón nos debería mostrar un número aleatorio del 1 al 6.

Si cambiamos algo nuestro servidor debería recargar automáticamente, puedes probar cambiado la palabra lanzar en el botón en App.js por otra cosa y deberías verlo en el navegador sin necesidad de hacer click en botón de recargar.

Eso es todo por ahora, tenemos una base para nuestros futuros proyectos.

Cualquier duda o sugerencia puedes dejar un comentario.

Durante el último año se ha hablado mucho acerca de ReactJS, ha generado una gran cantidad de artículos, posts, discusiones, comentarios tanto negativos como positivos. Y muchos aún se preguntarán por que tanta discusión al respecto, y es que ReactJS viene a cambiar mucho de lo que se consideran “mejores prácticas” y la forma en que se hacen las cosas, y como todo cambio puede producir rechazo.

Cada vez es mayor la adopción de ReactJS en el mundo del desarrollo web y móvil (con react native), no sólo es usada por Facebook, Instagram y Whatsapp sino por compañías como Airbnb, Asana, Uber, Periscope, Khan Academy, Reddit, entre muchas otras.

Si quieres saltar la teoría y ver el código haz click aquí

¿Qué es React?

Antes que nada hay que definir que es ReactJS, es simplemente una librería de Javascript para crear interfaces de usuarios, es decir sería la V del MVC, o lo que mostramos al usuario, no más ni menos que eso.

Es una librería creada y hecha open source por Facebook y la hicieron para resolver los problemas que se les presentaban al hacer una aplicación tan grande como lo es Facebook y poder facilitar la creación de componentes interactivos, reusables y actualizables.

Los principios en los que React se basa son los siguientes:

Simple
Si le indicas a React como se debe ver tu aplicación en un momento determinado, React se encargará de actualizar tu Interfaz cuando los datos cambien, lo que ahorra mucho trabajo y esfuerzo a la hora de optimizar y mejorar tu aplicación.

Declarativo
Cuando los datos cambian, React actualiza tu Interfaz y sólo actualiza las partes que deben ser cambiadas. En la programación declarativa tu le dices al programa como quieres que se vea o que haga cuando tiene ciertos estados y el programa resuelve como hacerlo, esto es distinto a la programación imperativa tu le dices al programa como hacer las cosas.

Componentes Reusables
React se basa en construir componentes, cada componentes es totalmente encapsulado por lo que es fácil reutilizarlos y probarlos. Además puedes colocar varios componentes juntos, o uno dentro de otros.

Imagina un típico post de blog como este donde tienes el contenido, una sección de comentarios, la lista de comentarios, cada uno de estos elementos puede ser un componente e inclusive tener subcomponentes por ejemplo las estrellas de rating de los comentarios.

Todo en React se trata de los componentes.

Virtual DOM

El Virtual DOM es exactamente lo que dice el nombre un DOM (esctructura de las páginas HTML) virtual, se puede pensar como una capa de abstracción. Esto tiene varios beneficios entre ellos que se pueda “mostrar” o hacer render de la página mucho más eficiente, además como es una capa de abstracción puedes cambiar el Virtual DOM por casi cualquier cosa como por ejemplo Node en el servidor y tener SSR (Server Side Rendering), o por una implementación de componentes nativos móviles (como se hace con React Native).

Dale 5 minutos
Basado en este artículo, darle 5 minutos se refiere a que al principio React parece que va en contra de todo lo que sabes, cambia mucho de los paradigmas y “mejores prácticas” que conocemos, pero todo es cuestion de darle un poco de tiempo y acostumbrarse después empezarás a entenderlo mejor y ver los beneficios. Creeme era el primero que salió corriendo al ver HTML, CSS y JS mezclado en un solo archivo.

JSX

Aunque React se puede escribir en Javascript puro, es recomendado y se ha convertido la norma escribir los componentes en JSX.

JSX te permite crear objetos de Javascript usando sintaxis de HTML. Por ejemplo para hacer un link en React en Javascript puro sería algo como:

React.createElement(‘a’, {href: ‘https://facebook.github.io/react/’}, ‘Hola!’)

Con JSX se transforma en:

<a href=”https://facebook.github.io/react/”>Hola!</a>

Los archivos JSX tienen extensión .jsx en vez de .js, como estamos acostumbrados y tienen varias peculiaridades que veremos en los ejemplos.

El archivo JSX al final es transformado automáticamente en Javascript, y creanme que aunque al principio cuesta entenderlo hace la vida más fácil para escribir los componentes de React.

Más información y opiniones de JSX la pueden encontrar aqui y aquí.

Bueno ya basta de hablar de teoría pasemos a un poco de código para entender como se ve React.

Dirección de los Datos

Esto también es muy importante en React, la dirección de los datos es un sólo sentido, viaja a traves de state y props al componente, por lo que cuando tenemos varios componentes usualmente tenemos un componente padre que maneja el estado y le pasa a los hijos datos a través de los props.

Supongamos nuevamente el ejemplo de los comentarios, tenemos dos componentes un componente padre que representa la lista de los comentarios y luego cada comentario es un componente, posiblemente en el componente padre tendremos la candidad de comentarios además de la lista de los comentarios, pero al comentario hijo solo le interesaría el texto y autor de un comentario individual por lo que eso se lo pasaríamos de padre a hijo a través de props.

Además imaginemos que tenemos una función de ordenar en el padre donde se pueden ordenar los cometarios por fecha, el único que manejaría el estado del orden sería el padre los hijos no tienen porque saber nada acerca del orden. Esta separación permite hacer componentes muy específicos, fácil de probar y de manejar, a diferencia de tener cientos de lineas de código difíciles de entender.

Empezando con un simple Componente

Como esto es una introducción vamos a utilizar jsFiddle para ver los ejemplos, en futuros artículos veremos como configurar React en nuestro computador.

Vamos a crear un componente muy sencillo el típico Hola Mundo

const Hola = React.createClass({
  render() {
    return <div>Hola {this.props.nombre}</div>;
  }
});

React.render(<Hola nombre="Mundo" />, document.body);

Así es como se ve un componente (muy simple) en React.

Primero declaramos el Componente Hola a través de React.createClass, dentro de esta función tenemos render que es el que crea el componente como tal.

Aquí estamos utilizando JSX, como ven usamos una sintaxis muy parecida a HTML con el <div>.

Luego tenemos un atributo los {…} indican que React tiene que cambiar esto por el atributo que le estamos pasando en este caso this.props.name. Los Props son una de las forma que tiene React para pasar atributos o datos a los componentes y lo accedemos en el componente a través de this.props.

Por último llamamos a React.render el cual toma dos argumentos:

  1. El nombre del componente, en este caso le pasamos el componente con el prop ‘nombre’ definido como “Mundo”.
  2. Donde se debe mostrar o montar el componente, en este caso lo hacemos directamente en el body.

En jsFiddle puedes probar cambiando el nombre a otra cosa o cambiando el div por un H1, por ejemplo.

Un Componente con Estado

Todo componente en React tiene un objeto state y un objeto props. En el ejemplo anterior vimos como utilizar los props a través de this.props, el Estado (State) es lo que nos va a permitir la intereactividad de nuestro componente.

Los estados se manejan a través de los siguientes mecanismos:

  • setState, para colocar el valor de un estado
  • this.state, para acceder a los valores de los estados
  • getInitialState, es un método para colocar el estado inicial que queremos que esté nuestro componente.

Otra característica de nuestros componentes son los Eventos, los eventos están asociados a nuestros componentes como propiedades y pueden disparar métodos, por ejemplo cuando presionamos un botón, hacemos scroll, entre otros.

Vamos a hacer un ejemplo de un componente que es un contador que se incrementa cada vez que hacemos click sobre un botón.

 

const Contador = React.createClass({
  getInitialState() {
    return {
      contador: 0
    }
  },
  incrementarContador() {
    this.setState({
      contador: this.state.contador + 1
    });
  },
  render() {
    return (
      <div className="mi-componente">
        <h1>Contador: {this.state.contador}</h1>
        <button type="button" onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
});

React.render(<Contador/>, document.body);

Los pasos a seguir serían:

  1. Crear un componente Contador con React.createClass.
  2. Colocamos un estado inicial del contador a 0 con getInitialState.
  3. Creamos un método incrementarContador() que aumenta el contador en 1 cada vez que lo llamamos.
  4. Llamamos a render() que se encarga de mostrar nuestro componente, aquí tomamos el valor del contador con this.state.contador y llamamos el método con onClick dentro del botón.
  5. Por último llamamos a React.render para mostrar nuestro componente.

Ahora cada vez que hacemos click sobre el botón el contador se incrementa en 1.

Puedes modificarlo en jsFiddle aquí http://jsfiddle.net/n5yx2bpy/1/

Conclusión

React es una librería que nos sirve para manejar nuestra interfaz de usuario a través de componentes, aunque es un cambio en la forma de pensar de construir aplicaciones, también tiene una serie de ventajas que nos ayuda a tener aplicaciones más fáciles de manejar, que se pueden probar fácilmente y escalables.

Dicho esto React no es para todo tipo de aplicaciones, si tienes una aplicación muy pequeña o estás haciendo sólo un prototipo, React puede ser demasiado. Lo bueno de React es que no tienes que cambiar toda tu aplicación de una vez, puedes ir cambiando pequeños elementos por componentes poco a poco y donde más lo necesites, así lo hizo Facebook con muchas de sus aplicaciones.

Ahora queda mucho por aprender y por avanzar, React está actualmente por la versión 0.14.7 al momento de escribir este artículo, fue puesta como código abierto en 2013 y especialmente en 2015 fue cuando comenzar a ganar mucha más atención. Todo el tiempo están saliendo nuevas mejoras y funcionalidades.

En próximos artículos veremos más en profundidad como usar React y haremos una pequeña aplicación.

Por ahora si quieres aprender más de React te recomiendo ver la página principal de React https://facebook.github.io/react/index.html y hacer el tutorial.

Si quieres ver ejemplos de componentes puedes visitar https://js.coach/

Si tienes alguna duda o sugerencia puedes dejar un comentario.