Configurar un entorno React, Parte 4

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

React ha sido conocido en el pasado por ser difícil de comenzar a crear aplicaciones, ya que realmente tenía que entender cómo configurar las herramientas de construcción manualmente. Esto es incluso antes de escribir una sola línea de código React.

La herramienta crear-reaccionar-aplicación ayuda enormemente con este problema, ya que le permite a cualquiera crear una aplicación React que funcione completamente sin necesidad de saber cómo configurar las herramientas de construcción. La realidad es que la aplicación crear-reaccionar estará bien para la mayoría de las aplicaciones, especialmente si eres nuevo en React.

A medida que adquiera más experiencia con React, es posible que tenga ciertos requisitos para sus aplicaciones que necesitan una configuración personalizada de los archivos de configuración. En este caso, deberías poder configurar las herramientas de compilación React manualmente, ya que la aplicación create-react-app las oculta de forma predeterminada.

En este tutorial, te mostraré cómo configurar una aplicación React configurando manualmente las herramientas de compilación a medida que avanzamos. Esperamos que esto le dé la confianza para seguir adelante y experimentar con configuraciones más complejas.

Aunque puede parecer un poco desalentador al principio, disfrutará de todos los beneficios de tener control total sobre cada configuración de configuración única. Y puede decidir exactamente qué herramientas se incluyen en su aplicación, que pueden variar de un proyecto a otro. Este enfoque también le permite incorporar fácilmente nuevas herramientas de construcción a medida que se presentan (lo que hacen con frecuencia).

¿Estás listo para crear tu primera aplicación React completamente desde cero? Vamos a hacerlo.

Crear la estructura de archivos de la aplicación

Para demostrar cómo configurar una aplicación React a través de la configuración manual de las herramientas de construcción, estaremos creando la misma, muy simple, aplicación React de los tutoriales anteriores de esta serie.

Comience creando una carpeta llamada my-first-components-build, y luego abra una ventana de línea de comando que apunte a esta carpeta.

Escriba npm init para crear un archivo package.json. Este archivo contendrá toda la información sobre las herramientas utilizadas para crear su aplicación, además de la configuración asociada. Acepte todas las configuraciones predeterminadas y solo presione Enter (alrededor de diez veces) hasta completar.

Si aceptó todos los valores predeterminados, package.json se verá así:

{
  "name": "my-first-components-build",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Ahora necesitamos agregar los scripts React y ReactDOM a nuestro proyecto. Lo haremos a través de npm, el administrador de paquetes para Node.js.

Dentro del mismo directorio de línea de comandos, ingrese:

1	npm install --save react react-dom

Esto instala tanto React como ReactDom, más cualquier dependencia requerida por esos dos módulos. Notará que ahora tenemos un nuevo directorio node_modules que es donde se han agregado los módulos.

Si echa un vistazo al archivo package.json, se ha agregado una nueva propiedad dependencies que contiene información sobre los módulos de nodos que instalamos.

1	"dependencies": {
2	"react": "^15.6.1",
3	"react-dom": "^15.6.1"
4	}

Esto sucedió porque especificamos la opción --save en nuestro comando npm install. Esto notificó a npm que queríamos hacer un seguimiento de nuestras dependencias de proyectos instalados. Esto es importante si queremos compartir nuestro proyecto.

Por lo general, debido a que la carpeta node_modules es tan grande, no desea intentar compartir esto directamente. En su lugar, compartes tu proyecto sin la carpeta node_modules. Luego, cuando alguien descarga su proyecto, todo lo que tienen que hacer es escribir npm install para duplicar la configuración directamente desde package.json.

Nota: En npm 5.x, los módulos instalados se guardan automáticamente en package.json. Ya no tiene que especificar manualmente la opción --save.

Dentro de la carpeta my-first-components-build, cree una nueva carpeta src y agregue un archivo index.js a ella. Volveremos sobre esto más adelante a medida que comencemos a crear nuestra aplicación React, una vez que hayamos configurado los archivos de configuración del proyecto.

Agregue un archivo index.html dentro de la misma carpeta con el siguiente código:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Creating a React App Manually, Using Build Tools</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Queremos poder compilar nuestra aplicación en un solo archivo JavaScript, y también hacer uso de las clases y módulos JSX y ES6. Para hacer esto, necesitamos instalar los módulos Webpack y Babel a través de npm.

Instalemos a Babel primero. Escriba lo siguiente en la ventana de línea de comandos:

1	npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Esto instala todos los módulos necesarios para que Babel compile los códigos ES6 y JSX en JavaScript estándar.

Ahora, instalemos Webpack, de nuevo a través de la línea de comando:

1	npm install --save-dev html-webpack-plugin webpack webpack-dev-server

Esto instala todos los módulos necesarios para Webpack, un servidor web local, y nos permite dirigir a Webpack para crear un archivo index.html dinámico en la carpeta public basado en el que agregamos a la carpeta src. También podemos agregar una referencia dinámica al archivo JavaScript incluido dentro del archivo HTML cada vez que se construye la aplicación.

Una vez que se hayan instalado estos nuevos módulos, su archivo package.json ahora se verá así:

1	"dependencies": {
2	"react": "^15.6.1",
3	"react-dom": "^15.6.1"
4	},
5	"devDependencies": {
6	"babel-core": "^6.25.0",
7	"babel-loader": "^7.1.0",
8	"babel-preset-env": "^1.5.2",
9	"babel-preset-react": "^6.24.1",
10	"html-webpack-plugin": "^2.28.0",
11	"webpack": "^3.0.0",
12	"webpack-dev-server": "^2.5.0"
13	}

Esta vez, sin embargo, las dependencias de Webpack y Babel se guardan en package.json como dependencias de desarrollo.

Esto significa que estos módulos particulares son necesarios durante la fase de desarrollo (es decir, compilación) de la aplicación. Por otro lado, las dependencias (como React y ReactDOM) se requieren durante el tiempo de ejecución y, por lo tanto, se incluirán directamente junto con nuestro código de aplicación personalizado.

Configuración de Webpack

Para que Webpack genere nuestra aplicación y la incluya en un solo archivo, debemos configurar los ajustes. Dentro de la carpeta de la aplicación raíz, cree webpack.config.js, que se utiliza para almacenar configuraciones de compilación específicas de Webpack.

Necesitamos webpack para hacer tres cosas:

Compile el código ES6 / JSX a JavaScript (a través de Babel).
Cree nuestra aplicación y agrúpela en un solo archivo JavaScript.
Cree un archivo index.html, y dentro agregue una referencia a nuestro archivo de JavaScript empaquetado.

Dentro de webpack.config.js, agregue:

var path = require('path');
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'build.js'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html'
  })]
}

No te preocupes demasiado por la sintaxis utilizada aquí; acaba de entender la visión general de lo que está pasando.

Todo lo que estamos haciendo es exportar un objeto JavaScript con ciertas propiedades que controlan cómo Webpack construye nuestra aplicación. La propiedad entry especifica el punto de inicio de nuestra aplicación React, que es index.js. A continuación, la propiedad output define la ruta de salida y el nombre de archivo del archivo JavaScript empaquetado.

En cuanto al proceso de compilación en sí, queremos que Webpack pase todos los archivos JavaScript a través del compilador de Babel para transformar JSX / ES6 a JavaScript estándar. Lo hacemos a través de la propiedad module. Simplemente especifica una expresión regular que ejecuta las transformaciones de Babel solo para archivos JavaScript.

Para completar la configuración de Babel, debemos agregar una entrada al archivo package.json para especificar qué transformaciones de Babel queremos realizar en nuestros archivos JavaScript. Abre package.json y agrega una propiedad babel:

1	"babel": {
2	"presets": [ "env", "react" ]
3	},

Esto ejecutará dos transformaciones en cada archivo JavaScript en nuestro proyecto. La transformación env convertirá JavaScript ES6 a JavaScript estándar que es compatible con todos los navegadores. Y la transformación react compilará el código JSX para las llamadas a la función createElement(), que es un JavaScript perfectamente válido.

Ahora, de vuelta a nuestro archivo webpack.config.js.

La última propiedad que tenemos es plugins, que contienen las operaciones especiales que queremos realizar durante el proceso de construcción. En nuestro caso, necesitamos que Webpack cree un archivo index.html que incluya una referencia al archivo JavaScript empaquetado. También indicamos que un archivo index.html existente (el que creamos anteriormente) se usará como plantilla para crear el archivo index.html empaquetado final.

Compilar y probar

Ahora agreguemos una propiedad script a package.json. Por cierto, puedes agregar tantos scripts como quieras para realizar varias tareas. Por ahora, solo queremos poder ejecutar Webpack, así que en package.json elimine el script "test" y reemplácelo con:

1	"scripts": {
2	"build": "webpack",
3	},

Antes de probar el proceso de construcción, agreguemos un componente React a index.js para que tengamos algo que renderizar.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
        return (
            <div>
                <h2>Hello World!</h2>
            </div>
        )
    }
}

ReactDOM.render( <App />, document.querySelector( '#app' ) );

Esto debería parecerte muy familiar si has seguido los tutoriales anteriores de esta serie.

Desde la línea de comando, ejecute:

1	npm run build

Después de un rato, debería ver una nueva carpeta public creada dentro de my-first-components-build, que contiene index.html e index.js. Abre index.html para ver el resultado de nuestra aplicación React de prueba.

Observe que el archivo JavaScript incluido se ha agregado para nosotros, y el componente de prueba se representa en el elemento DOM correcto.

Automatizar el proceso de compilación

Una vez que comience a realizar varios cambios en su aplicación, pronto descubrirá que es bastante tedioso tener que editar manualmente un archivo, guardarlo, ejecutar el comando de compilación y luego volver a cargar la ventana del navegador para ver los cambios.

Afortunadamente, podemos usar el mini servidor Webpack que instalamos anteriormente para automatizar este proceso. Agregue un segundo script a package.json para que la propiedad 'scripts' tenga este aspecto:

1	"scripts": {
2	"build": "webpack",
3	"dev": "webpack-dev-server --open"
4	},

Ahora ejecuta:

1	npm run dev

Después de unos segundos, verá una nueva pestaña del navegador abierta con su aplicación web ejecutándose. La URL ahora apunta a un servidor local en lugar de apuntar a un archivo local específico. Realice un cambio menor en index.js en la carpeta src y guárdelo. Observe que su aplicación se actualiza automáticamente en el navegador casi instantáneamente para reflejar los nuevos cambios.

Webpack ahora monitoreará los archivos en su aplicación para detectar cambios. Cuando se realice y se guarde cualquier cambio, Webpack volverá a compilar su aplicación y recargará automáticamente la ventana del navegador con las nuevas actualizaciones.

Nota: el servidor de Webpack no reconstruirá su aplicación, como tal, sino que almacena los cambios en un caché, por lo que puede actualizar el navegador tan rápidamente. Esto significa que no verá las actualizaciones reflejadas en la carpeta public. De hecho, puede eliminar esta carpeta por completo al usar el servidor Webpack.

Cuando necesite crear su aplicación, simplemente puede ejecutar npm run build para crear la carpeta public nuevamente (si es necesario) y generar los archivos de la aplicación, listos para su distribución.

Terminando nuestra aplicación

Para completar, agreguemos los dos componentes simples que hemos estado usando en los tutoriales anteriores.

Agregue dos archivos nuevos en la carpeta del proyecto raíz llamada MyFirstComponent.js y MySecondComponent.js a la carpeta principal de la aplicación. En MyFirstComponent.js, agregue el siguiente código:

import React, { Component } from 'react';

class MyFirstComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: Hello from React!</p>
        )
    }
}

export default MyFirstComponent;

Y en MySecondComponent.js, agregue:

import React, { Component } from 'react';

class MySecondComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: My Second React Component.</p>
        )
    }
}

export default MySecondComponent;

Para usar estos componentes en nuestra aplicación, actualice index.js a lo siguiente:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MyFirstComponent from './MyFirstComponent';
import MySecondComponent from './MySecondComponent';

class App extends Component {
    render() {
        return (
            <div>
                <h2>My First React Components!</h2>
                <MyFirstComponent number="1st" />
                <MySecondComponent number="2nd" />
            </div>
        )
    }
}

ReactDOM.render( <App />, document.querySelector( '#app' ) );

Esto da como resultado el mismo resultado que hemos visto anteriormente, excepto que esta vez a través de la configuración de la aplicación React 100% manualmente.

Finished React app

Plantillas reutilizables de React

Una vez que haya realizado esta configuración manual una vez y haya creado los archivos de configuración de configuración, esta es la única vez que necesitará hacer esto completamente desde cero. Para proyectos futuros, puede reutilizar uno o más de sus archivos de configuración existentes, haciendo que los proyectos React posteriores sean mucho más rápidos de configurar.

Incluso podría crear un conjunto de plantillas de inicio React especialmente diseñadas y alojarlas en GitHub. Entonces sería un caso simple de clonar un proyecto de inicio y ejecutar npm init para instalar los módulos Node.js requeridos.

Descarga e instala el proyecto

El proyecto React para este tutorial está disponible para descargar, por lo que puede jugar con él o usarlo como plantilla para nuevos proyectos.

Haga clic en el enlace Descargar archivo adjunto en la barra lateral derecha para acceder al archivo .zip del proyecto. Una vez descargado, extraerlo y abrir una ventana de línea de comandos. Asegúrate de que estás en el directorio my-first-components-build.

Ingrese los siguientes comandos para instalar y compilar la aplicación React.

1	npm install
2	npm run dev

El primer comando descargará todos los módulos Node.js necesarios para el proyecto, lo que tomará un minuto o dos. El segundo comando compilará la aplicación React y ejecutará el mini servidor web, mostrándolo en el navegador.

Intenta hacer algunos cambios en tu aplicación React. Cada vez que guarde los cambios, su aplicación se volverá a compilar, y la ventana del navegador se actualizará automáticamente para reflejar la nueva versión de su aplicación.

Cuando desee compilar su proyecto para su distribución, simplemente ejecute el siguiente comando.

1	npm run build

Conclusión

A lo largo de esta serie de tutoriales, hemos examinado varias formas en que puede acercarse a la configuración de las aplicaciones React, cada una de las cuales requiere progresivamente más tareas de configuración por adelantado. Pero el beneficio a largo plazo es que tiene mucho más control y flexibilidad sobre cómo se configura exactamente el proyecto.

Una vez que hayas dominado la configuración de React, creo que encontrarás el desarrollo de aplicaciones muy divertido. Me encantaría escuchar tus comentarios. ¡Déjame saber qué planeas construir a continuación con React!