Configurando React desde cero con Webpack

Si estamos comenzando con React, quizás la mejor forma de crear nuestros proyectos sea usando la utilidad que React nos brinda llamado Create-React-App. Utilizar esta herramienta es una de la mejores formas de empezar ya que así solo nos ocupamos de la lógica de nuestra aplicación en React. Sin embargo, si estamos ante un proyecto de gran complejidad quizá no sea la mejor opción. Esto principalmente porque con Create-react-app perdemos control sobre algunos aspectos de nuestro proyecto como la integración con más herramientas de desarrollo que sí sería posible si utilizamos Webpack.

En este tutorial aprenderemos a crear un proyecto en React desde cero, configurando Webpack y Babel de tal forma que podamos utilizar JSX y todas las capacidades que nos brinda React sin utilizar Create-react-app.

Índice

  1. Preconfigurando nuestro entorno
  2. Configurando React
  3. Herramientas adionales
  4. Tu turno
  5. El código

1. Preconfigurando nuestro entorno

Lo primero que necesitamos en nuestro proyecto es npm, el gestor de dependencias que nos permitirá instalar las diferentes herramientas como webpack en nuestro proyecto. Para agregar npm utilizamos el siguiente comando.

npm init -y

Estoy utilizando la forma rápida de configurar npm, saltándome las preguntas de configuración. Si quieres editar la configuración lo puedes hacer en el archivo package.json.

Ahora necesitamos agregar Webpack como dependencia de desarrollo en nuestro proyecto, para esto usamos el siguiente comando.

npm install --save-dev --save-exact webpack
Estamos utilizando la última versión exacta para evitar problemas de compatibilidad en el futuro.

Además tenemos que instalar el CLI de Webpack que nos permitirá usar los comandos de webpack en nuestro proyecto. Esto para luego compilar nuestro proyecto de React.

npm install --save-dev --save-exact webpack-cli

Después de instalar estas dos dependencias debemos crear la carpeta, llamada comúnmente src, donde colocaremos el código de nuestro proyecto. Además dentro de esta carpeta crearemos el archivo index.js que será el archivo principal de nuestro proyecto de React. Luego de esto deberíamos tener la siguiente estructura.

📦 react-app
 ┣ 📂node_modules
 ┣ 📂src
 ┃ ┗ 📜index.js
 ┣ 📜package-lock.json
 ┗ 📜package.json

Ahora pasaremos a configurar Webpack para lo cual crearemos un archivo llamado webpack.config.js donde colocaremos el siguiente código. Este código ya lo expliqué en un tutorial anterior llamado Primeros pasos con webpack.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
  },
};

La segunda herramienta que necesitamos es Babel, principalmente por dos razones. La primera es para transpilar el código JavaScript moderno hacia JavaScript estándar compatible con cualquier navegador. Y la segunda razón es para transpilar código JSX propio de React, incomprensible para los navegadores, hacia JavaScript puro. Así que para instalar Babel usamos el siguiente comando.

npm install --save-dev --save-exact @babel/core

Pero como sabemos Webpack funciona con Loader así que necesitamos el loader de Babel para conectarlo con Webpack. Podemos instalar este loader usando el siguiente comando.

npm install --save-dev --save-exact babel-loader

Ahora debemos configurar este loader en el archivo de configuración de Babel (webpack.config.js) para esto agregamos el siguiente código. Un código similar es explicado en un tutorial anterior llamado Manejo de Loader y Plugins en Webpack, que sugiero revisarlo. Pero básicamente esta configuración nos permitirá utilizar el loader de Babel en los archivos .js y .jsx.

...
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      use: "babel-loader",
      exclude: /node_modules/,
    },
  ],
},

Pero como sabemos Babel funciona con Presets y Plugins, que son configuraciones ya predefinidas y listas para descargar. En nuestro caso necesitamos un preset para transpilar código de JavaScript moderno hacia JavaScript antiguo, un plugin para poder utilizar código asíncrono de JavaScript y por último un preset para transpilar código JSX hacia JavaScript puro. Para instalar todos estos presets usamos los siguientes comandos.

# Preset para transpilar JavaScript moderno
npm install --save-dev --save-exact @babel/preset-env

# Plugin para poder utilizar código asíncrono
npm install --save-dev --save-exact @babel/plugin-transform-runtime

# Esta es una dependencia del plugin anterior
# y debe instalarse como dependencia de proyecto
npm install --save --save-exact @babel/runtime

# Este preset es para transpilar código JSX a código JavaScript
npm install --save-dev --save-exact @babel/preset-react

Para configurar estos presets y plugins agregamos el archivo .babelrc en el cual colocaremos los presets y plugins que utilizaremos de la siguiente forma.

{
  "plugins": ["@babel/plugin-transform-runtime"],
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Ya casi llegamos al final de las configuraciones, pero aún nos faltan unos cuantos Loaders y Plugins más que nos permitirán generar una carpeta de producción de todo nuestro proyecto compilado. Así que primero instalaremos los loaders que harán que Webpack entienda nuestros archivos CSS. Para instalar estos dos plugins utilizamos los siguientes comandos.

# Nos permitirá importar archivos CSS dentro de JavaScript
npm install --save-dev --save-exact css-loader

# Hará que Webpack entienda el código CSS y luego lo inyecte
# al HTML para visualizar los estilos en la página
npm install --save-dev style-loader

Por último instalaremos un Plugin que generará el archivo index.html automáticamente con todo lo necesario para funcionar en un servidor. Así que utilizamos el siguiente comando para instalar este plugin.

npm install --save-dev --save-exact html-webpack-plugin

Y ahora que tenemos todo instalado debemos configurarlos dentro del archivo webpack.config.js de la siguiente manera.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  mode: "development",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node-modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "AndyGeek",
    }),
  ],
};

Ahora solo agregaremos el siguiente script al package.json para poder compilar nuestro proyecto con Webpack de forma muy simple.

"build" : "npx webpack"

Y para probar Webpack y finalizar esta sección. Dentro del archivo ./src/index.js colocamos el siguiente código luego de agregar style.css junto al otro archivo.

// Código index.js
import "./style.css";
console.log("Hola mundo");

/*Código style.css*/
body {
  background-color: aqua;
}

Para compilar nuestro proyecto solo bastará con ejecutarnpm run build y veremos como se genera una carpeta llamada public con nuestro index.html en su interior, que es nuestra web ya compilada lista para subirse a la red.

2. Configurando React

Para poder utilizar React en nuestro proyecto necesitamos instalar React y React-dom como dependencias del proyecto. Para hacer esto utilizamos los siguiente comando.

# React es el nucleo de React
npm install --save-exact react

# React-dom es la parte de React que nos permite manipular el DOM
npm install --save-exact react-dom

Luego de instalar estas dos dependencias ya podremos utilizar código React en nuestro archivo index.js asi que ahi colocaremos el siguiente código.

import React from "react";
import ReactDOM from "react-dom";
import "./style.css";

ReactDOM.render(
  <>
    <h1>Hola mundo</h1>
  </>,
  document.getElementById("root")
);

Sin embargo, para que esto funcione debemos agregar un <div> con el id de root dentro de un archivo index.html que funcionará como plantilla para Webpack. Aquí también podríamos colocar Bootstrap o alguna librería que quisiéramos utilizar en el futuro.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Y por último debemos indicarle a Webpack que este archivo funcionará como plantilla por lo que nos dirigimos a webpack.config.js y agregamos la linea de template a la instancia de HtmlWebpackPlugin que tenemos ahí.

new HtmlWebpackPlugin({
  title: 'AndyGeek',
  template: path.resolve(__dirname, 'src/index.html'),
}),

Después de realizar todas estas configuraciones tendremos la siguiente estructura de archivos.

📦 react-app
 ┣ 📂public
 ┣ 📂node_modules
 ┣ 📂src
 ┃ ┣ 📜style.css
 ┃ ┣ 📜index.html
 ┃ ┗ 📜index.js
 ┣ 📜.babelrc
 ┣ 📜webpack.config.js
 ┣ 📜package-lock.json
 ┗ 📜package.json

Y listo si utilizamos es comando npm run build generaremos la carpeta public donde habrá un index.html que contendrá nuestro proyecto listo para ejecutarse en el navegador.

3. Herramientas adionales

Ahora solo necesitamos el servidor de desarrollo de tal forma que cuando hagamos alguna modificación el proyecto se compile automáticamente y lo podamos ver rápidamente en el navegador. Para instalar este servidor utilizamos el siguiente comando.

npm install --save-dev webpack-dev-server

Además debemos crear un nuevo script que nos permitirá ejecutar nuestro servidor y ver nuestro proyecto en el navegador.

"dev" : "npx webpack-dev-server"
Sin embargo, debemos tener en cuenta que usar este servidor no generará los archivos de public, asi que para esto debemos continuar utilizando el script build anterior, pero debemos cambiar el modo de compilación de webpack a production en el archivo de configuración de Webpack.

Por ultimo siempre es necesario agregar un archivo .gitignore donde debemos colocar los archivos que obviaremos en el repositorio de Git, tales como Node_modules. Por lo que desde ya podemos ir colocando el siguiente código.

# dependencies
/node_modules

Y nunca está de más crear un archivo README.md con la información de nuestro proyecto e inicializar Git usando el comando git init.

4. Tu turno

Ahora es tu turno de dejar atrás Create-react-app y crear un proyecto desde cero utilizando Webpack. De esta forma sentirás el control que puedes tener al conocer cada una de las dependencias y herramientas que uses en tu proyecto. Anímate que tu tienes el control no el Framework.

5. El código

Cuando quieras puedes utilizar el siguiente repositorio de Github como ejemplo github.com/andygeek/react-webpack.