Hola mundo en React + Babel + Webpack
En este recurso vamos a aprender a crear un proyecto desde cero configurando todos los elementos necesarios para la construcción de un “Hola Mundo” pasando por todos los elementos necesarios.
Aprenderemos:
- Configurar un proyecto
- Instalar React
- Crear un Hola Mundo en React
- Instalar y configurar Babel
- Instalar y configurar Webpack
- Compilar nuestro proyecto
Comencemos con la diversión…
Configurar proyecto
Lo primero que necesitamos es crear e inicializar nuestro proyecto desde la consola o terminal.
mkdir hello-world && cd hello-world
Inicializar proyecto en git (Siempre lo recomiendo sin importar si sera compartido).
git init
Inicializar proyecto con npm para instalar las dependencias necesarias.
npm init -y
Instalar React
Una vez inicializado nuestro proyecto vamos a proceder a instalar React y crear la estructura necesaria para trabajar con react.
Instalar React
npm i react react-dom --save-dev
Estructura organizacional del proyecto:
- src/ - Carpeta donde colocaremos todo el código del proyecto.
- src/components/ - Carpeta donde almacenaremos los componentes.
- index.html - Archivo HTML donde insertaremos la construcción del proyecto.
- index.js - Documento principal de la aplicación.
Si quieres leer más acerca de como estructurar tus proyectos te recomiendo esta lectura: ”File Structure - React“.
Hola Mundo en React
Ahora que tenemos instalado React y comprendemos como estructuraremos el proyecto, vamos a crear nuestras primeras lineas de código.
Creamos las carpetas necesarias para la estructura del proyecto:
mkdir src && mkdir src/components
Creamos el componente HelloWorld:
touch src/components/HelloWorld.jsx
Añadimos el siguiente código:
import React from "react"; // Importamos React
// Creamos un componente presentacional que recibe la propiedad "text"
const HelloWorld = ({ text }) => <h1>{text}</h1>;
export default HelloWorld;
Ahora creamos la entrada principal donde vivirá la aplicación en React.
touch index.js
Añadimos el siguiente código:
import React from "react"; // Importamos React
import ReactDOM from "react-dom"; // Importamos ReactDOM
import HelloWorld from "./components/HelloWorld"; // Importamos nuestro primer componente
// insertamos nuestro componente en nuestro documento HTML utilizando ReactDOM
ReactDOM.render(
<HelloWorld text="Hola Mundo Cruel" />,
document.getElementById("app")
);
Creamos el documento HTML para la aplicación.
touch index.html
Añadimos el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>React Base</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Hasta este momento ya tenemos el código base de una aplicación en React, pero debemos compilar el código y crear una rutina que nos permita optimizar el proceso.
Instalar y configurar Babel
Babel es una herramienta que nos permite transformar nuestro código Javascript ES6 a JavaScript que cualquier navegador soporte. Lo que nos permite tener las nuevas funcionalidad de Javascript en la construcción de nuestros proyectos.
Instalar las dependencias necesarias:
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
Creamos el documento ”.babelrc” donde añadiremos la configuracion de Babel.
touch .babelrc
Añadimos la siguiente configuración:
{
"presets": [
"@babel/preset-env", // Compila ES5 y ES6
"@babel/preset-react" // Compila JSX y sintaxis de React
]
}
Instalar y configurar Webpack
Webpack es una herramienta de compilación que nos permite añadir en un archivo todas las dependencias a los elementos que forman parte de tu proyecto de desarrollo: como el código de nuestra aplicación en React, HTML, CSS, imágenes entre otros recursos. Nos permite tener una tarea programada para optimizar la construcción y la ágil puesta en producción de nuestros proyectos.
Instalando Webpack
npm i webpack webpack-cli html-webpack-plugin html-loader --save-dev
Creamos webpack.config.js
touch webpack.config.js
Añadimos la configuración necesaria:
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js", // Elegimos nuestro punto de entrada
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
}, // Añadimos nuestro punto de salida
resolve: {
extensions: [".js", ".jsx"], // Añadimos el soporte para la extencion de JSX
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // Ignora la carpeta de node_modules
use: {
loader: "babel-loader", // Utiliza la configuracion de Babel
},
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
},
],
},
],
},
plugins: [
// utilizamos este plugin para añadir el compilado al documento HTML
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
}),
],
};
Compilar nuestro proyecto
Para que nuestro proyecto funcione y este listo para ser ejecutado en un navegador o enviarlo a producción tenemos que añadir la siguiente configuración a “package.json”.
"scripts": {
"build": "webpack --mode production"
}
Ahora podemos utilizar el comando “build” para construir el proyecto.
npm run build
El cual nos construirá un proyecto en la carpeta “dist/” donde encontraremos un archivo index.html y bundle.js, ejecutamos el documento index.html en tu navegador de preferencia para ver nuestra aplicación funcionando.
Buenas practicas
Ya para finalizar te recomiendo añadir el archivo .gitignore en la raíz de tu proyecto e ignorar /node_modules/ así como la carpeta /dist/ donde se almacena el proyecto compilado. Y por ultimo guardar los cambios en Git.
Te comparto el repositorio de Github: React Base.
En Conclusion
Aprendimos a crear un proyecto utilizando la configuración mínima para React, aprendimos sobre Babel y sus configuraciones así como utilizar WebPack para preparar nuestro proyecto.