BabelJS - Trabajar con Babel y JSX

En este capítulo, entenderemos cómo trabajar con JSX y babel. Antes de entrar en detalles, comprendamos qué es JSX.

¿Qué es JSX?

JSX es un código JavaScript con una combinación de sintaxis XML. La etiqueta JSX tiene un nombre de etiqueta, atributos y elementos secundarios que hacen que parezca xml.

React usa JSX para crear plantillas en lugar de JavaScript normal. No es necesario usarlo, sin embargo, a continuación se presentan algunas ventajas que lo acompañan.

  • Es más rápido porque realiza la optimización al compilar código en JavaScript.

  • También es de tipo seguro y la mayoría de los errores se pueden detectar durante la compilación.

  • Hace que sea más fácil y rápido escribir plantillas, si está familiarizado con HTML.

Hemos utilizado babel 6 en la configuración del proyecto. En caso de que desee cambiar a babel 7, instale los paquetes necesarios de babel usando@babel/babel-package-name.

Crearemos la configuración del proyecto y usaremos webpack para compilar jsx con reacción a JavaScript normal usando Babel.

Para iniciar la configuración del proyecto, ejecute los comandos que se indican a continuación para la instalación de babel, react y webpack.

mando

npm init

Ahora, instalaremos los paquetes necesarios con los que necesitamos trabajar - babel, webpack y jsx -

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom

Aquí está el package.json después de la instalación:

Ahora creará un archivo webpack.config.js, que tendrá todos los detalles para agrupar los archivos js y compilarlos en es5 usando babel.

Para ejecutar webpack usando el servidor, hay algo llamado webpack-server. Hemos agregado un comando llamado publicar; este comando iniciará el webpack-dev-server y actualizará la ruta donde se almacenan los archivos finales. Ahora mismo, la ruta que usaremos para actualizar los archivos finales es la carpeta / dev.

Para usar el paquete web, debemos ejecutar el siguiente comando:

npm run publish

Crearemos el webpack.config.js archivos, que tienen los detalles de configuración para que funcione el paquete web.

Los detalles en el archivo son los siguientes:

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js|jsx)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['es2015','react']
            }
         }
      ]
   }
};

La estructura del archivo es como se muestra arriba. Comienza con la ruta, que proporciona los detalles de la ruta actual.

var path = require('path'); //gives the current path

El siguiente es el objeto module.exports, que tiene propiedades de entrada, salida y módulo.

La entrada es el punto de partida. Aquí tenemos que dar los archivos js principales que queremos compilar.

entry: {
   app: './src/main.js'
},

path.resolve(_dirname, ‘src/main.js’) - buscará la carpeta src en el directorio y main.js en esa carpeta.

Salida

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

La salida es un objeto con detalles de ruta y nombre de archivo. La ruta contendrá la carpeta en la que se guardará el archivo compilado y el nombre del archivo indicará el nombre del archivo final que se utilizará en su.html archivo.

módulo

module: {
   rules: [
      {
         test:/\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['es2015','react']
         }
      }
   ]
}
  • El módulo es un objeto con detalles de reglas que tiene propiedades, es decir, prueba, inclusión, cargador, consulta.

  • La prueba contendrá detalles de todos los archivos js que terminan con .js y .jsx. Tiene el patrón que buscará .js y .jsx al final en el punto de entrada dado.

  • Incluir indica la carpeta que se utilizará para buscar los archivos.

  • Loader usa babel-loader para compilar código.

  • La consulta tiene propiedades preestablecidas, que es una matriz con el valor env - es5 o es6 o es7. Hemos utilizado es2015 y reaccionamos como predeterminado.

Crear carpeta src/. Añadir main.js y App.jsx en eso.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
         var style = {
         color: 'red',
         fontSize: 50
      };
      return (
         <div style={style}>
            Hello World!!!
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(
      , document.getElementById('app'));

Ejecute el siguiente comando para empaquetar el archivo .js y convertirlo usando ajustes preestablecidos es2015 y react.

mando

npm run pack

Añadir main_bundle.js de la carpeta dev a index.html -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "dev/main_bundle.js"></script>
   </body>
</html>

mando

npm run publish

Salida