Airbnb, Instagram, Netflix, Paypal… todos estos websites tienen algo en común: están utilizando la famosa librería desarrollada y mantenida por Facebook: React.

En esta entrada pretendo, a modo de introducción, compartir algunos de los conocimientos que he ido adquiriendo estas últimas semanas sobre esta librería de Facebook.

¿Qué es React?

React es una librería JavaScript pensada para construir interfaces de usuario de gran rendimiento, independientemente del tamaño de la aplicación, que sean fáciles de comprender, implementar y testear. React no es un framework (como Angular o Ember), es una librería para construir la UI a base de componentes. Aspectos como el routing, comunicación con servidor, traducciones, etc., quedan fuera de su alcance.

Facilitando la construcción y comprensión de nuestra interfaz de usuario

Implementar el control de la interfaz de usuario puede volverse un proceso “poco agradable” a medida que el tamaño de la aplicación crece: para cada instancia de un componente de la interfaz (por ejemplo, un botón o un formulario), debemos llevar un control manual de su creación, actualización y borrado. Es decir, debemos pensar en cómo realizar las transiciones entre los distintos estados de la aplicación.

Una de las ideas que propone React se basa en proporcionar un mecanismo para definir cómo debe de presentarse la interfaz de usuario en cualquier momento, a través de un lenguaje declarativo y una aproximación basada en componentes simples y reutilizables. Con React pensamos en qué queremos mostrar y cuándo hacerlo, más que en cómo llegar a mostrarlo.

Si tenemos el típico componente de cabecera que se muestra o oculta según el usuario esté o no autenticado:
 

$.post('/login', credentials, function( user ) {
    // Aquí nos toca modificar el DOM
    $('header .name').text( user.name );
});

Debemos de hacer referencia a dicho componente y pensar en cómo modificarlo para que se muestre lo que queremos.
 

<header>
  <div class="name">
    Username
  </div>
</header>

Con React, nosotros especificamos qué se debe de mostrar en la interfaz en cada momento desde el propio componente en función del estado del mismo, y React se encarga de actualizar la interfaz por nosotros, es decir, de actualizar el DOM.

 

render: function() { 
  return (
    <header>
    { 
      this.state.name 
      ? this.state.name 
      : <span>Inicia sesión</span> 
    }
    </header>
  );
}

¿Cómo definimos lo que se debe mostrar en la interfaz de usuario?

A través de elementos y componentes:

• Los elementos son objetos inmutables que poseen unos atributos, y que representan un fragmento de la interfaz para un determinado instante. Por ejemplo, un elemento que describe un botón:

 

{
   type: 'button',
   props: {
   className: 'button button-blue',
   children: {
       type: 'b',
       props: {
         children: 'OK!'
       }
     }
   }
 }

•  Que en HTML se correspondería con:

 <button class='button button-blue'>
   <b>
     OK!
   </b>
 </button>

• Se crearía de la siguiente manera:

 

React.createElement(
  'button',
  { className: 'button button-blue' },
  React.createElement(
    'b',
    null,
    'OK!
  )
)

• ​Los componentes definen, agrupan y generan los elementos a renderizar en la interfaz en función de 2 variables: las propiedades y el estado.
  • Las propiedades son atributos de entrada que recibe el componente y que definen cómo se renderizan los elementos cuando se instancia el componente. Estas propiedades pueden ser modificadas por elementos superiores en la jerarquía de componentes, lo que provoca que React renderice de nuevo el componente.
  • El estado es un objeto que almacena información sobre el componente. Cuando el estado cambia (en función de las acciones del usuario sobre el DOM), React ordena al componente renderizarse de nuevo elemento (es decir, crear una nueva descripción de lo que debe mostrarse en la interfaz). React se encarga entonces de actualizar el DOM, comparando el DOM actual con el nuevo, y renderizando de nuevo únicamente lo estrictamente necesario.

Creando los componentes con JSX

Para crear un componente podemos hacerlo de la siguiente manera:
 

function ComponenteSinEstado(props){
  return React.createElement(
    'h1',
    null,
    'Hola, ',
    props.name
  );
}

Y también utilizando la sintaxis de clases de ES6:
 

class ComponenteConEstado extends React.Component{

  constructor(props) {
    super(props);
  }

  render() {
    return React.createElement(
      'div',
      null,
      React.createElement(
        'h1',
        null,
        'Cabecera 1'
      ),
      React.createElement(
        'h2',
        null,
        'Cabecera 2'
      )
    );
  }
}

Para evitar tener que escribir eso, Facebook creó una sintaxis para especificar los elementos y componentes de React de una manera más agradable, concisa y “familiar”:
 

class ComponenteConEstado extends React.Component{
  constructor(props){
    super(props);
    this.state = { title: 'Introducción React'};
  }

  render() {
    const { title } = this.state;
    return (
      <div>
        <h1>Cabecera 1 { title }</h1>
        <h2>Cabecera 2</h2>
      </div>
    )
  }
}

 

Esta sintaxis recuerda a nuestro habitual HTML, pero NO lo es:

• JSX es una extensión de la sintaxis de JavaScript (JavaScript XML).
• Las expresiones JSX no son más que objetos JavaScript, pero expresados con sintaxis de etiquetas.
• Nos permiten evaluar expresiones JavaScript a través de la sintaxis de llaves “{ }”.

Instanciando los componentes

Una vez creado nuestros componentes, debemos instanciarlos bajo un elemento raíz bajo el cuál React actuará:

 

ReactDOM.render(
  <ComponenteConEstado />,
  document.querySelector('#application')
);

Por supuesto, en esta introducción no he contemplado muchísimas cuestiones como son la interacción del usuario con la vista, la actualización del estado de los componentes, cómo React decide que partes del DOM actualizar o no…, y un montón de cuestiones más. Así que, si te ha gustado la entrada, te animo a echarle un ojo a la documentación de React donde encontrarás toda la información que necesitas sobre React explicada por sus creadores.

Referencias:

• https://facebook.github.io/react/
• https://github.com/facebook/react
• http://blog.andrewray.me/reactjs-for-stupid-people/
• http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/