Sobre ReactJS hay muchísimo que decir y tendremos tiempo para ello. Quiero usar este primer post que voy a hacer sobre la tecnología para dar una breve introducción práctica. Este no será el post en el que discutiré si ReactJS es mejor que tal o cual framework o librería, o si está bien o mal mezclar html con el Javascript de tus componentes. Ya habrá tiempo para eso.

No, aquí vamos a ir al grano. Cómo pasar de cero a tener un hello world funcionando con ReactJS.

Lo primero que debemos hacer, obviamente, es preparar nuestro entorno de trabajo para ReactJS. Será muy simple y funcionará con Grunt. A partir de aquí deberías tener correctamente instalado en tu máquina NodeJS, NPM y Grunt

(1) Creamos nuestra carpeta de trabajo e instalamos las dependencias que vamos a necesitar:

$ mkdir hello-react
$ cd hello-react

(2) Dentro vamos a creamos una estructura de ficheros parecida a esto:

├── Gruntfile.js
├── package.json
└── src
    ├── index.html
    └── js
        └── main.js

(3) Ahora definimos como dependencias en nuestro package.json:

  • Browserify: Herramienta que nos permite generar un bundle con las dependencias definidas al estilo NodeJS. Bueno, realmente usamos la tarea de grunt para esta herramienta.

  • 6to5: Compilador de ES6 a ES5. Esta es realmente una herramienta enorme que se va a llevar más de un post en este blog. Pero por ahora nos bastará con saber que nos permite compilar los ficheros JSX a JS plano.

Para definir estas dependencias asegúrate de que tu fichero package.json queda exactamente así:

{
  "name": "hello-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "[TU NOMBRE AQUÍ]",
  "license": "ISC",
  "devDependencies": {
    "6to5ify": "^4.1.1",
    "grunt-browserify": "^3.3.0"
  },
  "dependencies": {
    "react": "^0.12.2"
  }
}

(4) Creamos las tareas de Grunt. Dentro de nuestro fichero Gruntfile.js vamos a definir una única tarea que hará las veces de compilador y de watcher para vigilar los cambios en nuestros ficheros y recompilarlo todo otra vez:

module.exports = function(grunt) {

  grunt.initConfig({
    browserify: {
      dev: {
        options: {
          browserifyOptions: {
            debug: true // QUEREMOS VER EL SOURCEMAP DEL BUNDLE
          },
          watch: true,
          keepAlive: true,
          transform: [ '6to5ify' ]
        },
        files: { 'src/js/bundle.js': ['src/js/main.js'] }
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');

  grunt.registerTask('default', ['browserify']);

};

Existe una tarea de Grunt específica para hacer watch sobre fichero. Pero si usamos watchify ganaremos en velocidad al recompilar, pues solo compilaremos las partes que hayan cambiado. Creedme, la diferencia de velocidad es considerable.

(5) Luego debemos crear una página básica para mostrar nuestro componente funcionando:

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Mi primer componente de React dice:</h1>

    <div id="root">
      <p>Aquí cargará ReactJS su propio componente</p>
      <p>Si ves esto, es que algo no ha salido bien :(</p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- Este fichero contiene ReactJS y la definición de nuestro componente -->
    <script src="js/bundle.js"></script>

  </body>
</html>  

En esta página cargamos el fichero resultante de usar Browserify. Este fichero tiene traducido todo rastro de JSX a JS plano y además están empaquetadas todas las dependencias en un único JS. Guay, no ?!

(6) Por último, lo que queremos ver de verdad: nuestro component. El contenido de nuestro fichero main.js

var React  = require('react');

React.render(  
  <p> Hola, fanáticos de ReactJS!! </p>,
  document.getElementById( 'root' )
);

Simple, verdad?!. Lo único que hacemos es requerir react como dependencia (si te fijas, a ReactJS lo hemos cargado como dependencia del proyecto en el package.json y Browserify sabe dónde buscarlo). Le indicamos a React que queremos que agregue nuestro componente a la página en el nodo con id root.

Ahora, abre index.html en tu navegador favorito y deberías ver cómo el texto cambia y ReactJS te saluda.


Ya sé que en este primer ejemplo un simple p puede parecer demasiado básico. Pero piensa que ya tienes montado tu entorno de desarrollo.

Vendrán muchos más posts introduciendo nuevos conceptos sobre React que van a utilizar las bases que aquí hemos sentado. Así que si te interesa el tema no dudes en suscribirte a la lista de correo para no perderte ningún nuevo tutorial.

Suscríbete a mi lista de correo

* Campos obligatorios