Configuraci贸n de una aplicaci贸n en React

Configuraci贸n de una aplicaci贸n en React

Configuraci贸n de una aplicacion 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 path

Luego 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 鈥損 (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: 333
Like
Like Love Haha Wow Sad Angry
4

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up