Configurar Webpack & React Parte 1 - 📦 Dependencias y directorios iniciales
Tags: javascript, react, webpack, webdev
Published: 2020-07-02 21:38:37

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](https://github.com/facebook/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`

```bash
.
├── public
└── src
```

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

```bash
$ 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.

```javascript
{
  "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.

```bash
.
├── 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.

```bash
$ 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.

```bash
$ 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](https://babeljs.io/docs/en/babel-preset-env) y [preset-react](https://babeljs.io/docs/en/babel-preset-react) pero puedes ver la lista en la siguiente enlace https://babeljs.io/docs/en/presets

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

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

```bash
.
├── 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.

```bash
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.