Introducción a ReactJS

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.