31/01/17
4 min · react

Introducción a React - Hola Mudo

Si estas leyendo este post es porque escuchaste en algún lado el nombre React y te llamó la atención el Hype (entusiasmo, euforia, locura, rock & roll, etc) que hay sobre este tema.

Por ahora sólo tenemos que saber que React es una librería de Javascript, creada por Facebook, para crear interfaces de usuario.

La intención de este post es poder aprender esta librería sin frustrarnos en el intento. Existe algo que denomino el “ecosistema de React” que está compuesto por varios módulos o librerías de Javascript que nos permiten trabajar mejor y que colaboran a que la experiencia sea mucho más placentera, como puede ser utilizar la nueva versión de Javascript (ES6), node, npm, Babel, JSX, Redux, Webpack y muchos más. A lo largo de esta series de posts iremos introduciendo algunas de estas librerías, de forma progresiva, a medida que vamos mejorando nuestro conocimiento sobre React.

Hace un tiempo me enseñaron que la mejor forma de aprender una nueva tecnología es utilizarla en un proyecto. En esta oportunidad vamos a construir el típico Hola Mundo con la variante de mostrar Hola Mudo en honor a un amigo con el que trabajé hace varios años.

Hola Mudo

Para poder arrancar necesitamos tener un documento HTML vacío y abrirlo en el browser. Creamos un nuevo archivo en nuestro editor de texto (atom, sublime, etc), copiamos / pegamos el template de html básico y luego salvamos el archivo como index.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Introducción a React</title>
  </head>
  <body>
  </body>
</html>

Ahora necesitamos levantar un server para poder ver el documento y una forma simple de hacerlo es abrir la consola, ir hasta el directorio donde tenemos el archivo que creamos y corremos el siguiente commando:

$ python -m SimpleHTTPServer

Abrimos el browser y escribimos la siguiente url: http://localhost:8000 para poder ver nuestro documento.

Ya tenemos nuestro entorno de trabajo levantado por lo cual vamos a agregar la librería de React a nuestro proyecto por medio de los siguientes scripts:

<body>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
</body>

Cuando el browser lea esta etiqueta va a descargar las librerías de React y React DOM. En el módulo de React tenemos el core de la librería que nos permite crear elementos y componentes, mientras que el módulo React DOM (react-dom) provee métodos específicos del DOM.

Agregamos una etiqueta script vacía, donde vamos a escribir nuestro código Javascript, dentro del body pero antes de la etiqueta de cierre del mismo.

<body>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <script>
    // acá vamos a poner nuestro código
  </script>
</body>

El primer método que vamos a ver se llama createElement que nos provee el módulo de React.

<script>
  var titulo = React.createElement('h1', {}, 'Hola Mudo');
</script>

El método createElement acepta 3 parámetros y retorna un nuevo react element que vamos a guardar en la variable titulo.

El primer parámetro puede ser un string (cadena de texto) con el nombre del tipo de elemento que queremos crear o un componente de React (lo vamos a ver más adelante). Utilizamos ‘h1’ ya que queremos crear un título del tipo h1.

El segundo parámetro acepta un objeto con los atributos que va a tener el elemento HTML. Podemos ver que le pasamos un objeto de Javascript literal vacío ya que no vamos a utilizar ningún atributo.

Finalmente el tercer parámetro acepta los hijos que va a tener nuestro elemento y por el momento podemos pasar un string como contenido del mismo con el mensaje Hola Mudo.

Excelente ya tenemos creado nuestro elemento pero por ahora no podemos verlo hasta renderizarlo dentro de un contenedor. Agregamos un elemento div con el ID contenedor dentro del body de nuestro documento.

<body>
  <div id=“contenedor”></div>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
  <script>
    var titulo = React.createElement('h1', {}, 'Hola Mudo');
  </script>
</body>

El método render del módulo ReactDOM nos permite renderizar un elemento o componente de React dentro de un contenedor. Este método acepta un elemento como primer parámetro que va a ser renderizado dentro del contenedor que le pasamos como segundo parámetro. Para poder seleccionar el div con el ID contenedor utilizamos document.getElementById.

<script>
  var titulo = React.createElement(‘h1', {}, 'Hola Mudo');
  ReactDOM.render(titulo, document.getElementById('contenedor'));
</script>

Si probamos este código en el browser deberíamos ver un texto con la leyenda Hola Mudo. Podemos limpiar un poco más el código seleccionado el contenedor y guardando una referencia en una variable que luego pasamos como segundo parámetro al método render.

<script>
  var titulo = React.createElement('h1', {}, 'Hola Mudo');
  var contenedor = document.getElementById('contenedor');
  ReactDOM.render(titulo, contenedor);
</script>

Podés ver el código completo en el repo de github.

Ya sabemos crear y renderizar elementos utilizando React y no parece tan complejo, los espero en el próximo post para seguir aprendiendo juntos.