ReactJS y el uso de los componentes en la web (Parte 3: Un cliente de la pantalla de inicio de Reddit)

react

 

Parte 2

Conforme vamos avanzando y aprendiendo más acerca de los componentes web web con una librería de Javascript llamada ReactJS, vamos a empezar a ver posibles formas de crear interfaces de forma sencilla y escalable.

Lo que hoy vamos a hacer es un pequeño cliente de la página de inicio de Reddit. Reddit es un sitio web lleno de temas y foros de discusión, pero también es muy sencillo acceder a su información pues tiene un API abierta para cualquier uso.

Por si no lo sabía, en cada página de Reddit pueden agregar un /.json al final de la url para obtener su información en un objeto de JSON. Por ejemplo: https://www.reddit.com/.json.

 

Con un API abierto de esta manera, es bien sencillo obtener una lista de temas y mostrarlos en nuestro ejemplo. Pero veamos el códigoEn nuestra vista de HTML mostramos lo siguiente:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="container">
			
		</div>
		<script type="text/jsx" src="/static/app.js.jsx"></script>
	</body>
</html>

Bueno, pues ya explicamos en la Parte 2, tenemos que importar las librerías de ReactJS y del traductor de JSX, ahora, también vamos a utilizar JQuery para hacer peticiones ajax y el uso de promesas.

JQuery puede implementar promesas a partir de la versión 1.6

 

Ahora lo bueno, mostremos el código de js para mostrar una lista de posts de Reddit:

/** @jsx React.DOM */
$(document).ready(function() {
  ReactClientComponent = React.createClass({
    getInitialState: function() {
      return ({});
    },
    componentDidMount: function() {
      var promise = $.get('https://www.reddit.com/.json');
      var _this = this;

      promise.done(function(response){
        var data = response.data.children;
        _this.setState({
          data: data
        });
      });
    },
    render: function() {
      var content;
      if(this.state.data) {
        content = this.state.data.map(function(element, index){
          
          return (
            <li key={element.data.id}>
              <a href={element.data.url}>
                {element.data.title}
              </a>
            </li>
          );
        }); 
      }
      return (
        <div>
          <h1>Reddit and ReactJS RULEAN!</h1>
          <ul>
            {content}
          </ul>
        </div>
      );
    }
  });

  React.render(
    <ReactClientComponent />,
    document.getElementById('container')
  );
});

Muy bien, pues vamos a explicar el código:

React.render(
  &lt;ReactClientComponent /&gt;,
  document.getElementById('container')
);

Primero, pues inicializamos nuestro componente el container que definimos en HTML con el id container.

Ahora, cuando nosotros definimos nuestro componente, nuestro componente tiene un ciclo de vida, o sea que hay funciones que se ejecutan antes y después de la función RENDER, que es la función que nos va a mostrar nuestro elemento en HTML.

Si quieren aprender del ciclo de vida de un componente en ReactJS pueden revisar la documentación acerca de eso.

Básicamente significa que un componente tiene varias faces, desde el momento en que se va a montar en el archivo HTML como después, o cuando se actualiza el estado de este elemento y demás.

Un componente en reactJS cuenta con 2 tipos de atributos PROPS y STATE.

PROPS: Los PROPS son los atributos que se mandan cuando se inicializa una instancia de nuestro componente, a través de atrobutos parecidos a los HTML.

STATE: Son los valores que tiene un componente en determinado momenta, por lo que pueden cambiar a través de su ciclo de vida.

Luego explicaremos más a fondo la diferencia, pero por el momento podemos decir que los props no cambian a través de la vida de un componente, pues son valores inciales, y el state sí cambia pues representan los valores que tienen ciertos fragmentos del componente en determinado momento.

Cuando cambiamos el state del componente, se manda a updatear el componente, con sus funciones correspondientes.

 

Ahora vamos a revisar el código de muestra:

getInitialState: function() {
  return ({});
},

Esta función define el estado inicial del componente, pero por el momento no tiene ningún valor.

    render: function() {
      var content;
      if(this.state.data) {
        content = this.state.data.map(function(element, index){
          
          return (
            <li key={element.data.id}>
              <a href={element.data.url}>
                {element.data.title}
              </a>
            </li>
          );
        }); 
      }
      return (
        <div>
          <h1>Reddit and ReactJS RULEAN!</h1>
          <ul>
            {content}
          </ul>
        </div>
      );
    }

Ahora veamos el método render.

Este método muestra el componente en HTML, pero tiene mucha más lógica. Pregunta si existe una variable en el estado con el nombre data.

Si existe el valor, hace una iteración con la función map de Javascript, lo cual regresa un arreglo con elemento con sintaxis JSX.

Con ReactJS y JSX, es posible asignar componentes con formato JSX a variables válidas de Javascript. Por eso podemos regresar un conjunto de elementos <li> que en su interior tienen elementos <a>.

 

Para utilizar sintaxis de Javascript así como para utilizar variables se utiliza el código entre {} caracteres.

 

Ahora, pasemos al código de la función componentDidMount, que como sabemos y por su nombre se ejecuta ya que se ha llamado la función render por primera vez.

Ahora, ese es el lugar perfecto para inicializar plugins de jQuery o para hacer llamadas AJAX. Así que eso es lo que haremos.

  componentDidMount: function() {
    var promise = $.get('https://www.reddit.com/.json');
    var _this = this;

    promise.done(function(response){
      var data = response.data.children;
      _this.setState({
        data: data
      });
    });
  },

El código es bien sencillo:

Una promesa es una función o acción que se ejecuta cuando un proceso asincrono ha terminado. JQuery ofrece promesas cuando haces una llamada AJAX, pero no es la única manera de hacerlo, pues también existen librerías como Q que manejan las promesas y pronto será un esttandar con la salida de Ecmascript 6

 

-> Definimos una promesa haciendo una petición get en jQuery.

-> Cuando la promesa ha sido cumplida, llamamos a la función setState del componente con la variable data.

Cuando la función setState es llamada, en ese instante se actualiza el estado y se vuelve a llamar a la función render, haciendo el comportamiento que definimos anteriormente.

El resultado es el siguiente:

reddit

 

Podemos ver el poder de React, no solo una herramienta para crear interfaces de usuario, sino una nueva metodología que se adapta y es escalable, pues podemos definir componente sencillos o complejos con una lógica más elaborada con pocas lineas de código.

GG.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s