Configurar Webpack & React Parte 1 - 📦 Dependencias y directorios iniciales

Uno de los retos que todo desarrollador React se propone vencer en algún momento de su aprendizaje es crear desde cero su propia configuración de Webpack para usar React y así dejar de lado todo el misterio que encierra create-react-app

Asumo que tienes cierta experiencia con JavaScript y que tienes instalado Node & NPM

Al momento de escribir este tutorial estoy usando Node v14.4.0 y NPM 6.14.5.

📦 Dependencias y directorios iniciales

En esta sección cubriremos lo que va a ser la estructura del árbol de directorios e instalaremos todas las dependencias que necesitaremos para hacer funcionar nuestro proyecto

Inicializando el proyecto

Como paso inicial debemos crear la carpeta que alojara nuestro proyecto, en mi caso le llamare webpackreact pero puedes sentirte libre de llamarle como mas te guste.

Como siguiente paso es crear dos sub carpetas llamadas src y public

.
├── public
└── src

Una vez que tengamos los directorios y estando ubicados en webpackreact procedemos a iniciar nuestro proyecto con npm.

$ npm init -y

Como resultado debemos tener un archivo nuevo llamado package.json con el siguiente contenido. Este archivo es el más importante ya que ahí se agregarán las dependencias que son los paquetes que se utilizaran para desarrollar con React.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Debes tener un resultado final como el siguiente árbol de directorios.

.
├── public
├── src
└── package.json

Instalando dependencias

Las dependencias las vamos a instalar con NPM, pero antes debo aclararte que significa las dos banderas que acompañan al comando de instalación:

1. --save Esta bandera se utiliza para indicar que el paquete a instalar es requerido para que el programa pueda funcionar cuando lo mandes a producción.

2.- --save-dev Esta bandera indica que el paquete a instalar solo se usa cuando estas desarrollando tu aplicación y no es necesario que este presente cuando tu aplicación este en producción.

Instalando React

Contiene todo lo relacionado a React para que podamos desarrollar.

$ npm install --save react react-dom

Instalando Babel

Los navegadores no siempre están a la par con las nuevas características de JavaScript que salen cada año, por eso Babel nos permite que el código JavaScript moderno de ultima generación que vamos escribir para nuestra aplicación React sea transformado en código estándar que cualquier navegador pueda entender.

$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Seguido debemos crear un archivo de configuración de babel .babelrc en donde debemos indicarle que "Presets" debe utilizar.

Los "Presets" son un conjunto de plugins que le dice a babel como debe hacer las cosas, en nuestro caso solo utilizaremos dos que es present-env y preset-react pero puedes ver la lista en la siguiente enlace https://babeljs.io/docs/en/presets

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Al final debemos tener algo como el siguiente árbol de directorios

.
├── public
├── src
├── .babelrc
├── package-lock.json
└── package.json

Instalando Webpack

Webpack es el orquestador ya que el se encargara de unir y darle sentido a todo lo que estamos instalando.

npm install --save-dev webpack webpack-cli

Despedida

Ahora que tenemos la configuración inicial, procederemos en el siguiente parte a crear nuestro código demo.