Header Ads


Instalacion y configuración de ReactJS con Webpack y Babel paso a paso

¿Qué es ReactJS?

ReactJS, llamado también React.js, es simplemente una librería, y no un framework, de código abierto desarrollada por Facebook que sirve para el renderizado de las vistas en el navegador. Es decir, sirve para el diseño de interfaces de usuario SPA (aplicaciones de una sola página). ReactJS se integra perfectamente con el nuevo estándar de Javascript ES6 (EcmaScript6) que agrega nuevas funcionalidades al lenguaje.

ReactJS usa los patrones MVC y MVVM para el desarrollo de las aplicaciones web. 
Se puede integrar la librería de React en cualquier sitio web utilizando las dos herramientas Webpack para el empaquetamiento de módulos y la minimización de código y Babel para transpilar el código escrito en Javascript ES6 a la versión estándar de Javascript ES5 para ser entendido por cualquier navegador. 

configuración de ReactJS

Instalación y configuración de React.js

Antes de empezar con nada tienes que tener instalado Node;js para usar la herramienta NPM. Puedes descargar e instalar la última versión de Node.js de su página oficial.

Nota: es aconsejable tener instalado la última versión de NMP por los cual debemos instalar la última versión de Node.js. Si tienes una versión antigua te sugiero que las actualices. 

Una vez instalado npm con Node.js configuramos el proyecto. Creamos un directorio llamado "proyecto" para el proyecto con la consola:

  1. mkdir proyecto && cd proyecto
Creamos una estructura de directorio mínima para mantener el código:

  1. mkdir -p src
Inicializamos el proyecto y creamos el fichero package.json que se puede considerar como el manifiesto del proyecto, con:

  1. npm init -y

Ten en cuenta que de ahora en adelante todas las instalaciones y configuraciones se harán dentro de la carpeta del proyecto llamada "proyecto" que hemos creado. 

Ahora vamos a instalar las dependencias con el comando "npm install". Hay que tener en cuenta también que en un proyecto hay dos tipos de dependencias. El primer tipo son las dependencias propias del proyecto como por ejemplo en nuestro caso la librería de React.js para la producción de los componentes, etc u otras librerías de terceros. Éstas se instalan con el comando:
 "nmp install --save nombre_de_dependencia".

Y el segundo tipo de dependencias son las que están relacionadas con el entorno de desarrollo como el Webpack y Babel que no implican nada en el entorno de producción y se instalan con el comando:
"nmp install --save-dev nombre_de_dependencia".

Instalar y configurar Webpack:

Webpack, es una herramienta muy potente cuando hablamos de proyectos de aplicaciones web diseñadas con la filosofía modular. El desarrollo de aplicaciones con React.js se basa también sobre esa filosofía, es decir que se separa el código en módulos que a su vez estos módulos pueden depender también de otros módulos. Y lo que hace Webpack en este caso es la gestión de esos módulos, concatenar el código, minimizarlo, etc. Webpack crea un bundle para la producción de los ficheros de dependencias y los propios ficheros JS de nuestra aplicación. También nos servirá como un servidor de desarrollo.

Realmente, Webpack tiene muchas otras funcionalidades que no cabe destacarlos todos aquí, ya que es todo un tema independiente, por lo cual nos bastamos hasta ahora por lo explicado. En la siguiente imagen GIF se representa una explicación muy breve sobre la funcionalidad de Webpack. 

 

Instalamos los paquetes webpack y webpack-dev-server. Este último nos crea un servidor de desarrollo para poder servir nuestra página en localhost de una manera más parecida a la producción:

  1. npm install --save-dev webpack webpack-dev-server
Necesitamos instalar también webpack-cli:

  1. npm install webpack-cli --save-dev
Buscamos el archivo package.json y agregamos el comando de webpack:

  1. "scripts": {
  2. "start": "webpack-dev-server --mode development" --open --hot,
  3. "build": "webpack --mode production"
  4. }


Instalar y configurar Babel:

En lo general, los componentes de React son escritos en su mayoría con JS ES6, por lo tanto se necesita un transpilador (compilador) para traducir el ES6 al ES5 en este caso es Babel y precisamente con el paquete babel preset env o con babel-preset-latest.

También React utiliza una sintaxis parecida a HTML, llamada JSX. No es necesaria para utilizar React, sin embargo, hace el código más legible, y escribirlo es una experiencia similar a HTML. Por lo tanto se necesita otro paquete de Babel para compilar JSX a Javascript y se llama babel preset react. 

Agregamos estos paquetes a las dependencias:

  1. npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin
Ahora configuramos Babel creando el fichero ".babelrc" dentro de la carpeta principal del proyecto:

  1. {
  2. "presets": ["env", "react"]
  3. }
A este punto ya estamos preparados para definir una configuración mínima de webpack.
Creamos un fichero llamado webpack.config.js y los rellenamos con lo suiguente:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4. entry: './src/index.js',
  5. output: {
  6. filename: 'app.js',
  7. path: path.join(__dirname,'/build'),
  8. },
  9. module: {
  10. rules: [
  11. {
  12. test: /(\.js|jsx)$/,
  13. exclude: /node_modules/,
  14. use: {
  15. loader: "babel-loader"
  16. }
  17. }
  18. ]
  19. }
  20. plugins:[
  21. new HtmlWebpackPlugin({template:'./src/index.html'}),
  22. ]
  23. };
En objeto "module" lo que hacemos es declarar en la configuración que todos los archivos con la extension .js y .jsx se van a canalizarse por webpack a babel-loader para compilar sus códigos JS ES6 a ES5.

En los objetos "entry" y "output" declaramos los ficheros de entrada y salida. Es decir, ./src/index.js es el fichero que va a cargar todos los componentes de react y se considera como punto de entrada. Y "app.js" es el fichero que se va a producir dentro de la carpeta "build" y es el bundle o paquete final que produce webpack y se considera como punto de salida.

A este nivel ya podemos crear componentes de React.js pero primero debemos instalar sus dependencias.

Instalar react y react-dom

  1. npm i --save react react-dom
Al instalar todas dependencias podemos observar que el fichero "package.json" se está modificando. Los que pasa es que todas la dependencias del entorno de trabajo y de desarrollo se registran es este fichero como propiedades de objetos del objeto Json.
Las dependencias de desarrollo como react y react-dom se registran en el objeto "dependencies", y las dependencias de entorno de desarrollo como babel y webpack se registran en "devDependencies".

ِِCrear un componentes de React.js

Para crear nuestro primer componente de react vamos a crear el fichero "index.html" en la carpeta "src"  creada anteriormente. en este fichero definimos una estructura general de html5. Y ahora los mas importante dentro de la etiqueta "body" ceamos un elemento "div" con id="root". El id puede ser cualquiera.

react js + html

Ahora  nos dirigimos al fichero "index.js" en la misma carpeta "src" y escribimos los suiguiente:


primer componente de react.js

En el código anterior, hemos definido un comoponente llamado "App" extendiente de la clase de React llamada Component. Este componente App retorna con el méthodo "render()" un elemento html, en este caso es el elemento div que a su vez contiene un elemento h1 con el contenido "Hola Comunidad MundoGeeks".

Pero ten en cuenta que estas instrucciones de html no son html puro sino que son instrucciones de  JSX que nos permite integrar el html con Javascript de una forma parecida a como lo hacemos en PHP. Este códgio será transpilado o traducido al javascript puro con el transpilador de Babel.

Y con el méthodo "render()" de la clase ReactDom inyectamos el componente App dentro de componente que hemos creado en el fichero "index.html" con id="root".

Todo ese código no funcionará sino importamos las clases React y ReactDom de las dependencias de desarrollo descargadas anteriormente.

Por último, para ver el resultado ejecutamos el comando: 


  1. npm start

Producción de la aplicación de React.js


Resultado final de la app de React:


 Al ejecutarlo, este ejecutará a su vez al comando "webpack-dev-server --mode development --open --hot" definido anteriormente en el objeto "scripts" del fichero "package.json". Este último comando se encargará de transpilar y producir el código javascript y lanzar el proyecto en el servidor. Podemos acceder a la url: http://localhost:8080  para ver el resultado final.

Si queremos producir los ficheros de producción minimizados podemos ejecutar el comando:

  1. npm build

No hay comentarios

Con la tecnología de Blogger.