Configuración de una aplicación en React
Hola a todos, nuestro equipo de DevSun Europe continúa con la serie de artículos relacionados con React. En el artículo de hoy empezaremos a dar los pasos necesarios para la configuración de una aplicación en React. Como mostramos en los artículos anteriores Introducción a React y Comparativa entre React, Angular y Vue, React es una biblioteca que permite construir aplicaciones flexibles de manera dinámica y rápida.
La configuración de una aplicación en React puede realizarse de diferentes maneras, como, por ejemplo: añadiendo las bibliotecas de JavaScript directamente en el HTML o empleando manejadores de paquetes como npm o yarn.
Conceptos generales sobre Babel, NPM, Yarn y Webpack
Antes de empezar a configurar un proyecto en React resulta necesario comprender el funcionamiento de las siguientes tecnologías: Babel, NPM, Yarn y Webpack.
¿Qué función realiza Babel?
Babel es un compilador de JavaScript, que transforma el código basado en JSX a JavaScript. Es capaz de convertir el código de ECMAScript2015+ a versiones anteriores de JavaScript que son compatibles con ambientes y navegadores más antiguos. Este proceso de conversión es llamado transpilación, del inglés transpilation, que se refiere a la unión de los procesos de compilación y transformación. Babel brinda, además, una interface de comandos (CLI) que logra transpilar el código de una manera sencilla con una mínima configuración.
¿Qué función realiza NPM?
NPM es un manejador de paquetes de JavaScriptque incluye gran cantidad de registros de softwares basados en JavaScript. Con npm se logra instalar, compartir, distribuir el código, manejar dependencias, entre otras funciones. Para el uso de npm, se hace necesaria la instalación de la plataforma Node.js, la cual posibilita escribir aplicaciones del lado del servidor con lenguajes que son usados en el lado del cliente y que se familiarizan con JavaScript.
¿Qué función realiza Yarn?
Una alternativa a npm ampliamente utilizada por los desarrolladores es Yarn. Al igual que npm, Yarn es un manejador de paquetes. Fue lanzado por Facebook en el 2016. Es seguro, rápido, confiable, permite compartir el código con otros desarrolladores y controlar las dependencias del proyecto. También requiere de la instalación de Node.js, para el caso de la última versión estable de Yarn (1.12.3) hasta la fecha se necesitan versiones superiores o iguales de Node a la 4.8.0.
¿Qué función realiza Webpack?
Webpack es un empaquetador de módulos de JavaScript de código abierto. Su principal función consiste en agrupar en un solo paquete los archivos de JavaScript que se usan en el proyecto. Webpack toma los módulos con sus dependencias, con los que genera un archivo estático en Javascript. De esta forma logra optimizar los tiempos de carga y ejecución de los archivos JavaScript en los navegadores.
Configuración a través del uso de CDNJS o UNPKG
La manera más sencilla de configurar un proyecto en React es incluyendo los enlaces a las bibliotecas de React y Babel en el HTML. Babel será capaz de transpilar todos los bloques de Javascript que sean del tipo text/babel.
La instalación de las bibliotecas de React y Babel se puede realizar desde los populares hosting de bibliotecas de JavaScript CDNJS y UNPKG.
Enlaces desde CDNJS
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/cjs/react.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom. production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
Enlaces desde UNPKG
<script crossorigin src="https://unpkg.com/[email protected]/cjs/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/cjs/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>Hola mundo
El ejemplo básico Hola Mundo quedaría de la siguiente forma.
Contenido del archivo html:
<html>
<body>
<div id="root"></div>
<!-- Enlaces desde CDNJS, UNPKG o carpeta local -->
<script src="app.js" type="text/babel"></script>
</body>
</html>Contenido del archivo app.js. Definido como clase del tipo ES6
class Bienvenido extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hola, {this.props.nombre}</h1>;
}
}
ReactDOM.render(
<Bienvenido nombre="Julia" />,
document.getElementById('root')
);Configuración mediante los manejadores de paquetes NPM y Yarn
El empleo de npm o Yarn permite obtener una mayor ventaja, facilitando la instalación y actualización del ecosistema de paquetes.
Configuración mediante NPM
Para la instalación de un proyecto en React con npm es necesario aplicar los siguientes comandos:
npm init
npm install --save react react-dom
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev Con babel-core se transforma el código de ES6 a ES5.
Mediante babel-preset-react se logra transformar JSX a JavaScript.
Configuración mediante Yarn
Para la configuración del proyecto con Yarn se sigue el siguiente orden de comandos:
npm install -g yarn
yarn add react react-dom
yarn add babel-core babel-loader babel-preset-react babel-preset-es2015 La estructura de la aplicación sería de la siguiente forma:
src/
/index.jsx
/index.html
/componentes
/HolaMundo.jsx
/styles
En el archivo HolaMundo.jsx de la carpeta componentes añadiremos el siguiente
código:
import React, { Component } from 'react';
class HolaMundo extends Component {
render() {
return (
<div className="hola-mundo">
<h1>Hola Mundo</h1>
</div>
);
}
}
export default HolaMundo; En el archivo index.jsx incluiremos el componente HolaMundo.
import React from 'react';
import ReactDOM from 'react-dom';
import HolaMundo from './componentes/HolaMundo';
ReactDOM.render(
<HolaMundo />,
document.getElementById('app')
); Configuración con el empleo de Webpack
Luego de la instalación con yarn o npm, configuramos Webpack para empaquetar los módulos y dependencias de JavaScript. Primero es necesario instalar las dependencias correspondientes a webpack.
yarn add webpack webpack-dev-server pathLuego de completar la instalación de webpack, creamos y configuramos el archivo webpack.config.js en la raíz del proyecto. En el mismo asignamos el archivo bundle.js al directorio
de salida (output). Este archivo se generará con webpack agrupando los módulos y dependencias
de JavaScript de la aplicación.
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname,'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
}
}; Dentro de index.html introducimos la llamada al archivo bundle.js:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Configuración de Proyecto en React</title>
</head>
<body>
<div id="app"></div>
<script src="/output/bundle.js"></script>
</body>
</html>
También añadimos Babel para la transpilación del código dentro del webpack.config.js.
La configuración de Babel en webpack se conforma en los cargadores (loaders) y empleamos
babel-loader con es2015 y react-presets.
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
devServer: {
contentBase: './src',
publicPath: '/output'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx/,
use: {
loader: 'babel-loader',
options: { presets: ['react', 'es2015'] }
}
}
]
}
}; Para ejecutar webpack incluímos el archivo package.json en el directorio raíz. Con
el empleo de
–p (producción) el código se compacta y ofusca.
scripts: {
"build": "webpack -p",
"dev": "webpack-dev-server --hot --inline"
} Mediante el comando yarn run build compilamos y creamos el archivo bundle.js en nuestro
directorio.
Para finalizar, ejecutamos nuestro proyecto que se mostrará en el navegador con la dirección
http://localhost:8080 con el comando yarn run dev.
Plantilla básica de un proyecto en React
La forma más rápida de comenzar una aplicación en React es mediante el generador que brinda Facebook llamado Create React App. Este crea aplicaciones instantáneas que no requieren de una configuración adicional y pueden ser adaptables a cualquier backend. Para instalar create-react-app se siguen los comandos:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start Cuando la aplicación esté lista para el despliegue a la producción, ejecutamos npm run build lo que construirá nuestra aplicación en la carpeta build.
Con este artículo hemos expuesto los diferentes procederes para la configuración de una aplicación en React. En próximos artículos nuestro equipo de DevSun Europe seguirá profundizando en React, importante biblioteca de JavaScript.
Total de Vistas: 210
