Diveria Tutorial Series: Babel + Webpack + React desde cero con VS 2017

Luego de comenzar un par de proyectos con React, y entretenerme un poco con la tecnología, me empecé a preguntar “¿y esto cómo funciona?”. Dado que arranqué “de atrás para adelante” con dicha tecnología, usando primero el tipo de proyecto SPA React en VS2017 y luego usando NPM para generar un proyecto React con Babel, comencé a investigar cómo se interrelacionan todas las tecnologías presentes.

Es por eso que me puse como meta armar una app web React desde 0, usando Visual Studio 2017, pero no usando Typescript, sino Babel como transpiler. No es mi intención entrar en las configuraciones finas de cada uno de los componentes: mi idea es llegar a poner un simple Hola Mundo emitido desde un componente React, pero desde VS2017. En esta pequeña serie muestro paso a paso cómo logré mi objetivo.

Parte 1: Herramientas Base + Proyecto base en Visual Studio

Parte 2: Webpack

Parte 3: Babel + React

 

Parte 1: Herramientas Base + Proyecto base en Visual Studio

Las herramientas:

Visual Studio 2017: https://www.visualstudio.com/es/downloads/

Asegúrense de instalar el workload ASP.Net and Web Development, como para tener una base.

NodeJS: https://nodejs.org/es/

NPM: https://www.npmjs.com/

Con esto tenemos para comenzar a jugar.

El proyecto:

Podría haber empezado simplemente con una carpeta, pero preferí arrancar con un proyecto ASP.NET Core vacío. De esta manera, después nos podríamos ampliar a un proyecto WebAPI para interactuar con React (se llevan excepcionalmente bien).

Creamos un proyecto ASP.NET Core vacío:

Le damos un nombre, presionamos OK… y seleccionamos Empty Project:

Presionamos OK y estamos listos para largar. Pero antes…

Task Runner Explorer:

La verdad no sé cómo no es parte de VS a esta altura, pero tenemos que agregar la extensión de Visual Studio NPM Task Runner Explorer: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner . Esta herramienta nos propone una nueva toolbar muy piola para arrancar los scripts de NPM (y ver que todo funcione).

Carpetas básicas + configuración de NPM:

Para ordenar un poco el proyecto, vamos a crear un par de carpetas:

  • src: aquí vamos a poner todos los archivos fuente de la aplicación (en su mayoría, js).
  • dist: en esta carpeta quedarán los archivos de despliegue de la aplicación.

El siguiente paso es agregar un archivo de configuración de NPM, packages.json, mediante Visual Studio:

(Si no tienen la opción disponible, no importa: agréguenlo como un archivo .json más).

Con estos pasos estamos listos para empezar a agregar archivos configurar las diferentes piezas para que colaboren entre sí. En la siguiente sección pondremos en marcha la primera pieza: Webpack.

 

Parte 2: Webpack

Webpack es un generador de módulos (module bundler): nos va a permitir modularizar aplicaciones web cliente complejas y automatizar un montón de procedimientos a aplicar al momento de desplegar, como ser minificar, transpilar e incluso traducir a ES5 los módulos generados para que sean compatibles con diferentes versiones de navegadores, todo esto a través de módulos que se agregan a Webpack (más de esto luego). A través de un simple archivo Webpack.config.js vamos a conseguir esta “magia”. En esta parte del paso a paso, nuestro objetivo será conseguir un archivo generado vía Webpack, ubicado en la carpeta dist. Para más info sobre Webpack, visiten la página del proyecto en https://webpack.js.org/.

Agreguemos Webpack a nuestro proyecto. Tenemos dos vías para hacerlo (de hecho, todo lo que pase por npm puede hacerse de estas dos maneras).

  • La más natural: en una consola, abierta en la carpeta donde se encuentra package.json, correr el comando npm webpack –save
  • Usando VS2017: abrir el archivo packages.json, y en la sección devDependencies agregar la siguiente entrada: “webpack”: “3.10.0”. La “magia” se produce al guardar el archivo: lo van a ver en la parte inferior del IDE, y también en la sección “Dependencies” en el Solution Explorer:

Una vez terminada la “instalación”, se generará una carpeta node_modules dentro de la carpeta de proyecto: ahí NPM guarda todo lo que baja. En este caso, Webpack baja además todas sus dependencias (que son unas cuantas):

Ya tenemos instalado Webpack, pongámoslo en marcha. Para esto, creamos un pequeño archivo app.js dentro de la carpeta src, para tener algo sobre qué trabajar. Dentro de dicho archivo, hagamos algo tan simple como escribir “Hola Mundo” en la consola del navegador:

Ahora, creamos un pequeño archivo de configuración de Webpack en el directorio raíz de la aplicación. El mismo debe llamarse Webpack.config.js.

Dentro del mismo incluiremos las siguientes líneas básicas de configuración:

module.exports = {

entry: “./src/app.js”,

output: {

filename: “./dist/bundle.js”

}

};

Con esto, indicamos a Webpack que el “punto de entrada” de nuestra aplicación es el archivo app.js, y que la salida de todo el proceso va a estar en bundle.js dentro de la carpeta dist. No es muy emocionante aún, pero es la “base” de lo que viene.

Vamos a correr Webpack: como buena app NPM que es Webpack, puede hacerse desde consola, pero en VS, tenemos el Task Runner Explorer (TRE para abreviar). Lo abrimos desde el menú View->Other Windows->Task Runner Explorer:

Esta ventana de herramientas trae pre-configuradas varias maneras de correr tanto NPM como Webpack: no vamos a cubrir todas ellas, vamos a usar las que nos interesan por el momento.

Para que Webpack genere nuestro bundle, buscamos en TRE la entrada Webpack->Run->Development. Verán que se abre una “consola” a la derecha y podrán ver allí a Webpack correr:

En la carpeta dist, van a encontrar el archivo bundle.js generado: al final de dicho archivos encontraremos el “Hola Mundo” de nuestro archivo app.js.

Cuando tengamos ya nuestra app, vamos a tener que poder iniciarla en algún lugar. Microsoft nos propone el IIS Express, pero Webpack tiene sus propios planes. Webpack-dev-server es un pequeño servidor web muy piola donde podremos correr nuestras aplicaciones.

El dev server es un paquete npm más: lo agregamos al archivo packages.json, y al guardarlo lo tendremos instalado: (noten que el archivo packages.json provee intellisense para agregar los paquetes y sus versiones):

Guardamos el archivo, y ya tenemos el servidor web instalado. Para ver que esté funcionando, volvemos al TRE: en este caso, hacemos click en webpack.config.js->Serve->Hot:

Si abrimos el navegador en la dirección http://localhost:8080, veremos que el servidor está activo (aunque no veremos nada, ya que no tenemos nada aún):

Pasemos a mostrar algo más “web”. Para esto necesitamos una página html. Creémosla con Visual Studio, dentro de la carpeta src. La llamaremos index.html y su contenido será el siguiente:

Unamos esta página web con nuestro app.js mediante Webpack. Para esto, agreguemos en el package.json el siguiente plugin de Webpack, html-webpack-plugin:

Y en el archivo webpack.config.js, agregamos la sección plugins, como sigue:

Desde TRE, volvemos a correr el web server, y ahora nos encontraremos con una página en blanco: la misma tiene el encabezado de nuestro html, y en la consola veremos el “Hola mundo” de nuestro archivo app.js:

También veremos que automáticamente se ha generado un tag script en la página, donde se ve la referencia al archivo bundle.js:

En la siguiente sección pasaremos a instalar Babel y React, para ya poner en marcha nuestra primera clase React.

 

 

Parte 3: Babel + React

En las secciones 1 y 2 de este paso a paso, vimos cómo poner las primeras fichas de la estructura de un pequeño proyecto React utilizando Visual Studio 2017. Como tal, este IDE da mucho soporte a quien programa en js y html, con lo cual se hace muy cómodo a la hora de programar grandes aplicaciones. Y si le sumamos las pequeñas “comodidades” que nos brinda a la hora de correr estas aplicaciones, se vuelve en un aliado muy poderoso para el programador.

Quedamos con nuestra pequeña aplicación “Hola Mundo” que aún no hace nada: empecemos a darle vida a través de Babel.

Babel:

React usa muchas características de EcmaScript 6 (http://es6-features.org) las cuales no son soportadas por todos los navegadores (aún los más modernos). Es por eso que hace falta una herramienta que nos ayude a traducir y compilar (de ahí el término “transpile”) EcmaScript 6 a EcmaScript 5, de manera que los navegadores “entiendan” el código que generamos. Microsoft hizo lo suyo con Typescript, pero está también Babel, que es la que voy a usar en este caso. Ambos transpilers pueden ser usadas perfectamente: mi idea de usar Babel es que no es parte de los proyectos de VS base y quería explorar cómo configurarla “a mano”. Agrego que esta configuración es perfectamente válida para trabajar con VS Code: y si además lo hacemos sobre plataforma Linux, nos viene como anillo al dedo.

Para agregar Babel a nuestro proyecto, vamos como siempre al package.json, y agregamos las siguientes dependencias:

Babel tiene su propio archivo de configuración, llamado .babelrc (no olvidar el punto al principio). En el directorio raíz del proyecto, lo creamos y agregamos lo siguiente:

Con esto indicamos a Babel que utilice los presets que agregamos previamente.

Ahora tenemos que decirle a Webpack que Babel procese los archivos js antes de generar el bundle. Para eso, agregamos lo siguiente en webpack.config.js:

Con esto le indicamos a Webpack que cualquier archivo .js o .jsx que encuentre en el proyecto (exceptuando la carpeta node_modules y sus subcarpetas) los transpile con Babel antes de enviarlo al archivo bundle.js.

Si iniciamos nuevamente el servidor (y este inicia correctamente) quizá no veamos nada nuevo: de todas formas, el código de app.js está siendo procesado por Babel antes de ser desplegado. Prometo que lo veremos más adelante. Pasemos ahora a React.

React.js:

ReactJS es una librería muy interesante para generar UI de aplicaciones SPA (Single Page Application). Me resulta muy novedoso su “enfoque” en cuanto al manejo de los orígenes de datos, y la curva de aprendizaje no me resultó muy empinada (de hecho, tardé más en aprender a configurar el entorno para poder usarla que a usar la herramienta en sí). Dado que no voy a ahondar aquí en su uso, les dejo el link a la página oficial de React, https://reactjs.org/.

Primero, agreguemos React al archivo package.json:

Luego, dentro del archivo index.html, agreguemos un div donde se “inyectará” la aplicación React:

De más está decir la importancia del Id de dicho div, ya que en nuestro caso React ubicará el div por su id.

Dentro de app.js, reemplacemos nuestro humilde console.log por algo más parecido a React, como se muestra a continuación:

Ahora sólo es cuestión de iniciar nuestro dev server, ir al navegador, y ver nuestra app React funcionando:

Si además generamos el archivo bundle usando Webpack, y abrimos el archivo bundle.js dentro de la carpeta dist, veremos que el archivo creció considerablemente y que nuestro “Hola Mundo desde React!!!” no está fácil de encontrar… y si lo encontramos, no se parece en nada a lo que hay dentro de app.js:

Hola mundo desde react en bundle.js

He aquí a Babel trabajando desde Webpack, como lo esperábamos, traduciendo ES6.

Con esto doy por concluida esta pequeña serie sobre cómo configurar Webpack+Babel+React usando Visual Studio 2017. La configuración que quedó es lo mínimo que logré para poner en marcha la app: mucho puede mejorarse o agregarse (desde armar constantes en las rutas del webpack.config, hasta agregar archivos css e imágenes para que Webpack los minifique). Ahondaremos en cuestiones más específicas de cada una de las herramientas en siguientes posts.

¡Muchas felicidades!

 

 

 

 

Summary