Hola Mundo en ReactJS

Llevamos ya un tiempo donde han ido surgiendo diferentes frameworks para desarrollar aplicaciones basándose en JavaScript: ReactJS, Backbone, underscore, etc.. De alguna forma han revivido este lenguaje de programación y le están sacando más rendimiento del que en un principio se creía que podría tener. De la misma manera facilitan la programación, acercándola más al modo de programar en otros lenguajes de programación.

Nos vamos a centrar ahora en ReactJS. Este framework, mantenido por Facebook y Instagram junto a otras compañías, es de código abierto y está pensado para interfaces de usuario de una sola página. Es un lenguaje declarativo y trata de ser sencillo, a la vez que combinable con otras librerías, ya que ReactJS sólo maneja la interfaz de usuario y se suele usar en entornos muy dinámicos. Se basa en el patrón modelo-vista-controlador (MVC).

Algunos ejemplos de páginas que utilizan este framework son: Imgur, Feedly o Airbnb.

Ejemplo de Hola Mundo con ReactJS

A continuación el ejemplo más básico de uso de ReactJS, el típico Hola Mundo.

Lo primero es definir el HTML de trabajo, donde se visualizará el contenido. Habrá que importar la librería JS del framework para poder usarlo, como se hace con el resto de librerías. También definiremos una capa (div), que la llamaremos, por ejemplo, contenido. En esta capa modificaremos dinámicamente su contenido.

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="contenido"></div>

Lo siguiente ya será el código del lenguaje de programación React para cambiar el contenido. Este podrá ir en un fichero js independiente, para ser referenciado desde el HTML.

var Hola= React.createClass({
   render: function() {
     return <div>Hola {this.props.nombre}</div>;
   }
  });
  ReactDOM.render(<Hola nombre="Mundo" />, document.getElementById('contenido')
);

Lo primero es crear la clase, que en este caso se ha llamado Hola. En ella definimos la función de renderizado, mediante la etiqueta render. Como se aprecia, simplemente retorna una cadena HTML, con la cadena Hola y el valor de la propiedad nombre.

Tras esto, se llama al render pasándole dos parámetros. El primero es código HTML. En este ejemplo se ha usado la directiva <Hola>, la cual hemos declarado en la función que hemos asignado a la clase Hola justo arriba. Es decir, en esta directiva, llamará a su función de render y devolverá Hola y el nombre que se le ha pasado como atributo en la llamada a esta directiva (Mundo). El segundo parámetro es el elemento HTML donde se volcará lo que devuelva la directiva Hola. De esta manera, el resultado se verá en el div llamado contenido del HTML que hemos escrito en el bloque de código de arriba.

Esto es sólo un primer ejemplo básico, pero este framework puede ser muy potente, sobretodo si se combina con otros que lo complementen.