Introducción a React

9
21244

Introducción a React

0. Índice de contenidos.

1. Introducción

En este tutorial vamos a dar los primeros pasos con React, un framework creado por los ingenieros de Facebook que nos ayudará a crear aplicaciones SPA(Single Page Application), centrándose únicamente en la parte de las vistas. La API de React es bastante pequeña, pero el mayor cambio corresponde a la filosofía detrás del framework, por ello nos vamos a centrar en ver los principales puntos de esta filosofía viendo algunos ejemplo prácticos a la par.

2. ¿De que va React?

Cómo todos sabremos ya a estas alturas, frameworks de Javascript hay muchos, cada uno promete que hará las cosas mejor que el anterior, algunos cogen lo mejor de otros y liman los fallos y otros simplemente se cargan los avances de años de experiencia y hacen algo totalmente distinto (Ember/Angular), otros como React han decidido romper con algunas de las supuestas buenas prácticas que se habían considerado en los últimos años en la parte cliente y junto con la inclusión algunas de las mejores características de la programación funcional han creado un framework especial, que seguramente influencie a muchos otros que vengan después.

Cómo he comentado anteriormente React se encarga solo de la parte de la vista de nuestra aplicación, aunque Facebook propone una arquitectura para modelar el resto de la aplicación, llamada Flux, en este caso la arquitectura no va acompañada de un Framework y ha dejado a la comunidad sacar distintas implementaciones de ese concepto.

Esto puede parecer raro, pero permite que React pueda ser mucho más flexible, ya que no te obliga a elegir un framework monolítico si no que te deja que tu incluyas las piezas que quieres para completar el puzzle.

3. Un poco más de info sobre Flux.

Flux es la arquitectura que recomienda Facebook para complementar con React. Se compone de 3 grandes partes: – Dispatchers – Stores – Views

Una cuarta pieza más pequeña sería la Controller-View, una vista que gestiona varias vistas. Flux se centra en el flujo de la información que deja de ser bidireccional para convertirse en un flujo unidireccional, esto es una de las características más importantes de Flux.

flux
flux

3.1 Actions

Las Actions son los diferentes tipos de operaciones que se pueden producir en nuestra aplicación, acciones como el usuario ha clickado en un botón, se ha completado una petición, se ha añadido un item al carrito, se ha borrado un item del carrito, etc…

Las acciones son eventos de Javascript, con el añadido de que les estamos dando nombres de dominio lo cual ayuda mucho para que los distintos desarrolladores del equipo tengan un lenguaje común ante los diferentes eventos del sistema.

3.2 Dispatcher

El Dispatcher, es el encargado de manejar el tráfico de eventos, recibe todas las acciones y decide si quiere o no actuar en consecuencia, puede esperar a recibir varias acciones antes de actuar.. etc

Este es el único componente que tiene una implementación concreta y se ofrece como una librería.

3.3 Stores

Las Stores son las piezas intermedias entre el Dispatcher y las vistas, a la vez que mantienen los datos necesarios para luego pintarlos en las vistas. Quizás esta sea una de las partes que mas controversia han generado respecto a este tipo de arquitectura, por lo que han salido otras arquitectura similares, solucionando algunos de los problemas que se ha encontrado la gente.

Lo bueno de React es que no te condiciona a usar ninguna arquitectura, por lo que a la hora de usar React puedes valorar las distintas propuestas y coger la que mas se adapte a tu aplicación.

var HelloWorld = React.createClass({
  render: function() {
    return (
     
        Hello, !
        It is {this.props.date.toTimeString()}
      
    );
  }
});

React.render(
    ,
    document.getElementById('example')
);

En el Snippet de código se está haciendo el típico Hola Mundo, podemos ver como se está declarando el componente HelloWorld que luego instancia con la sintaxis <HelloWorld /> pasándole por parámetro cómo si fuera un parámetro HTML, y a continuación lo renderiza en el elemento del DOM con id example.

Esto puede parecer muy raro al principio, pero una vez que te acostumbras ver lo ventajoso que es y que ayuda a ver claramente lo que quieres hacer.

También se puede usar React sin JSX, ya que al final lo que hace JSX es convertir esas etiquetas en llamadas a React.createElement(), en el siguiente ejemplo podemos ver como crearíamos algo con y sin JSX.

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')
Hello!

Esto nos obliga a tener un paso intermedio, que podemos solucionar con distintas herramientas como Browserify, Gulp y Grunt. Que hoy en día ya son imprescindibles para cualquier aplicación seria escrita en Javascript.

5. React y el estado de las vistas

Una de las principales ventajas es que las vistas de React tengan el mínimo estado posible, esto se puede entender de manera muy sencilla, un componente de tipo checkbox, solo tiene dos estados, activo e inactivo. Es importante aclarar que el único estado que ha de almacenar la vista es el estado de UI, como el del ejemplo anterior.

Las vistas que necesiten estados más complejos han de componerse a su vez de subvistas, y será este componente el encargado de iniciar el estado de las vistas. A partir de ahí son las propias vistas las encargadas de cambiar su estado de manera que el estado se puede considerar privado.

Otra característica interesante de React es que una vez se modifica el estado del componente, vuelve a renderizarlo de 0 con ese nuevo estado en un DOM a parte que han denominado DOM virtual, a partir de ahí usan un algoritmo diff para ver las diferencias con el DOM real, y genera los cambios mínimos necesarios para modificar el DOM real al estado deseado. Esto no incurre en una gran penalización de uso de memoria o rendimiento como sucede en otros frameworks que usan otras técnicas como dirty checking o el cambio entero del DOM.

Esto nos facilita mucho la vida ya que nosotros solo tenemos que saber pintar la vista en los diferentes estados y no tenemos que preocuparnos por la transición entre dichos estados y todos los fallos que eso puede provocar.

6. Modificando el estado de un componente (props vs state)

Al estado inicial del componente que se pasa en la inicialización le han dado el nombre de props(propiedades), de manera que para acceder a dichos atributos podemos acceder de la siguiente manera:

var HelloUser= React.createClass({
  render: function(){
    return( Hello {this.props.name} )
  }
});


React.render(
  ,
  document.getElementById('container')
)

Los componentes también tienen un atributo state que recoge el estado de dicho componente, son los propios componentes los que suelen generar el estado inicial a partir de las propiedades que se le han pasado, y actualizarlo según se vayan produciendo los distintos eventos que admita. La manera de actualizar dicho estado es mediante el método setState(object nextState[, function callback]), este método mergea el estado antiguo con el nuevo estado que le pasamos por parámetro y una vez realizado re-renderiza el componente.

La principal diferencia entre las propiedades y el estado es que las propiedades son inmutables, no cambiarán en el ciclo de vida del componente, en cambio el estado si puede cambiar en función de eventos del usuario por ejemplo. Es importante entender que el estado ha de ser usado únicamente para representar estado de la interfaz.

7. Reaccionar ante el cambio

Hasta ahora hemos visto como renderizar componentes a partir de un estado inicial y de una serie de datos originales, pero las aplicaciones necesitan responder ante eventos producidos por el usuario, clicks, escritura en cajas de texto.. etc.

var HelloWorld = React.createClass({
  getInitialState: function () {
    return {value: 'Tell me your name!'};
  },
  handleChange: function (event) {
    var value = event.target.value;
    console.log('The new value is ' + value);
    this.setState({value: value});
  },
  render: function () {
    var value = this.state.value;
    return ;
  }
});

React.render(
  ,
  document.getElementById('container')
);

En el snippet de texto vemos como añadimos un evento como se añaden en HTML, pasándole por parámetro la función que se encargará de manejar el evento.

8. Comunicación entre componentes

El siguiente paso lógico es el comunicar el cambio a otros componentes, la idea es que el cambio siempre se propague hacía arriba(padre) y nunca hacia los lados(hermanos), dejando en las manos del padre la posibilidad de propagar o no el evento hacía abajo.

En el ejemplo a continuación podemos ver todas estas ideas en práctica:

var HelloNameInput = React.createClass({
  handleChange: function (event) {
    var value = event.target.value;
    this.props.onUserInput(value);
  },
  render: function () {
    return ;
  }
});

var HelloNameDisplay = React.createClass({
  render: function () {
    var name = this.props.name ? this.props.name : '';
    var textToShow = 'Hello ' + name;
    return {textToShow};
  }
});

var HelloName = React.createClass({
  getInitialState: function () {
    return {name:''}
  },
  onUserInput: function (value) {
    this.setState({name:value});
  },
  render:function(){
    return(
        
        
    )
  }
});

React.render(
  ,
  document.getElementById('container')
);

El componente HelloName es el componente padre que se encarga de coordinar los otros dos componentes, en este caso es el único que tiene estado, los otros componentes solo tienen propiedades, una vez el usuario escriba algo en la caja de texto, el componente HelloNameInput se lo notificará al padre y el padre modificará su estado, propiciando un re-renderizado de todos los hijos y dándoles el nuevo estado como propiedad.

9. Componentes reusables

Otra de las ideas que busca React es que los componentes sean lo más genéricos posibles de manera que puedan ser reusables, permitiéndonos componer vistas más complicadas a partir de vistas más sencillas.

Podemos ver páginas cómo React Componentes en las que podemos ver componentes realizados por otras personas, que nos ayudarán con distintas abstracciones a la hora de modelar nuestros propios componentes.

10. Conclusiones

Como hemos podido comprobar React es un cambio bastante grande en cuanto a como entender las aplicaciones cliente(SPA), pero parece un gran paso en el buen camino. Quizás al principio se pueda hacer raro por la sintaxis, pero rápidamente vemos que es un mero tema cosmético y que de verdad mejora sin aumentar la complejidad o la curva de aprendizaje.

Hablando de curva de aprendizaje, React tiene una curva de aprendizaje muy corta, en un par de días puedes estar ya modificando código React o creando el tuyo propio, debido a que no hay que tener una idea global de la aplicación si no de lo componente que estamos modificando y los componentes adyacentes.

9 COMENTARIOS

  1. Está bien que quieres compartir tus conocimientos y gracias.
    Este tuto puede ser bueno para los que conozcan REACT.
    Yo no te entendí nada, creo que deberías haber presentado el source.

  2. Me sumo a la mayoría. Se supone que cuando se hace un tutorial debería hacerse partiendo de cero y no dando por supuesto muchas cosas ya que un tutorial es para aprender.

  3. Buen tutorial, Gracias por la información compartida. Supongo que los que no hayan terminado bien de entenderlo les debería venir bien mirar antes javascript y los objetos en javascript

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad