¡Hola mundo!, configura un entorno de desarrollo para React.js

A medida que las aplicaciones frontend SPA (single-page application) desarrolladas con JavaScript y jQuery se vuelven más y más complejas, no es raro encontrarse con sopas de código JS difíciles de entender y mantener.

¡Hola mundo!, configurando un entorno de desarrollo para React.js

React.js es una librería JavaScript desarrollada por Facebook que soluciona este problema con ideas novedosas que no dejan indiferente a nadie.

No es un framework de desarrollo como AngularJS; solo se mete en la V (Vista) de una app MVC (Modelo-Vista-Controlador) de modo que puedes combinar tus GUIs React con la tecnología del lado del servidor que quieras: PHP, Python, Ruby, Java, etc.

Hoy te explico cómo configurar un entorno local Node.js para poder ejecutar un sencillo hola mundo con React. Al principio puede parecer complicado porque hay que hacer bastantes cosas. Pero cuando le coges el truco es muy fácil, ¡y al final te vuelves productivo!

Instalar Node.js

Para programar aplicaciones React no estás obligado a utilizar Node.js como lenguaje de servidor, de hecho muchas veces es mejor utilizar lenguajes como PHP o Python cuya filosofía de funcionamiento no está orientada a eventos.

Por ejemplo, ya hay plantillas de WordPress que se han fijado en React, como Divi 3.0. Clica aquí si te interesa este tema para saber más sobre WordPress REST API.

Instalaremos un entorno Node.js en nuestro sistema operativo porque los paquetes npm solucionan un montón de tareas repetitivas y nos ayudan a ser productivos, y porque todo el mundo lo hace así.

La jugada es programar la lógica de nuestras GUIs en EC6 y React, olvidarnos por completo de las dependencias de los módulos y transpilar automáticamente a EC5 para que la entiendan todos los navegadores. Esto lo conseguimos con dos herramientas chulas: Webpack y Babel.

Así pues, primero de todo hay que instalar Node.js en el sistema operativo. Como yo he hecho este ejercicio en Windows me he ido a la sección de descargas y ahí me he bajado el Windows Installer.

Con Node.js instalado ya podemos acceder a la consola.

Consola de Node.js

Figura 1. Consola de Node.js

Creando una app React.js

Te cuento que tengo instalado WAMP porque yo suelo programar en PHP y a veces debo usar Windows por cuestiones de trabajo, así que he creado mi primer proyecto React.js así:

Luego he instalado React:

Instalación y configuración de Webpack

Webpack es un empaquetador de módulos que soluciona muchas tareas repetitivas. Es una alternativa a Browserify + Gulp que ha gustado mucho a la comunidad de desarrolladores JS, de hecho ahora todos se están pasando a Webpack.

Gracias a Webpack te puedes centrar en escribir el código de tu app en varios archivos, como tiene que ser, de forma estructurada y mantenible. Esta herramienta es capaz de recorrerlos todos resolviendo las dependencias para construir uno solo que es el que terminamos enlazando en nuestro documento HTML.

Estructura de mi proyecto hola mundo

Esta es la estructura de mi aplicación:

Hola mundo en React.js

Figura 2. Hola mundo en React.js

Archivo components/HelloWorld.js:

Archivo app.js:

Archivo index.html:

Fíjate que tenemos que crear un archivo webpack.config.js:

Ahí le decimos cómo queremos que se comporte. Básicamente estamos declarando que el punto de entrada de nuestra app SPA es app.js y deseamos escribir la salida en ./build/bundle.js (el archivo que enlazamos en el navegador).

Con la ayuda de Babel traducimos el código EC6 y React a EC5 para que puedan entenderlo todos los navegadores web.

Por lo tanto, solo nos queda instalar los paquetes npm de Babel:

Al final mi package.json queda así:

Creación del archivo bundle.js

En Windows el comando a ejecutar es así:

La opción -d significa desarrollo, puedes poner -p para obtener un bundle.js minificado de producción.

Salida del comando webpack

Figura 3. Salida del comando webpack

¡Hola mundo!

Este es el aspecto del index.html al abrirlo en un navegador.

Hola mundo en React.js

Figura 4. Hola mundo en React.js

¡Esto es todo por hoy! Gracias por haber leído este tutorial. Hoy hemos aprendido a poner en marcha el entorno de desarrollo de nuestras apps React. Espero que te sirva de ayuda y que lo compartas con tus amigos.

También te puede interesar leer esto…