2

Estoy siguiendo un tutorial de React y me encontré con un problema en el primer ejemplo que he probado: importo la versión más moderna de React y del paquete React Dom, también importo la última versión de Babel (para usar JSX) y creo una pequeña versión del Hola Mundo:

<div id="title"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>

<script type="text/babel">
ReactDOM.render(
  <h1>Hola Mundo</h1>, 
  document.querySelector("#title") 
);
</script>

Pero al ejecutar, falla; aparece el siguiente error en browser.min.js y no funciona nada:

Uncaught TypeError: Cannot read property 'keys' of undefined

Mirando en Internet, vi que esto se debe a cambios en el core de la versión de Babel (6.x), y se puede solucionar utilizando una versión antigua (por ejemplo la 5.8.24):

<div id="title"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>

<script type="text/babel">
ReactDOM.render(
  <h1>Hola Mundo</h1>, 
  document.querySelector("#title") 
);
</script>

Ahora mi pregunta es: ¿se puede usar React con Babel 6? ¿Cómo sería?

2 respuestas 2

1

Se puede a la perfección y usar la versión 6 no supone inconveniente alguno. Cuando se desarrolla con a menudo se necesita un bundler. Un bundler no es más que un programa que transpila código ES6+ con diferentes variantes como JSX a ES5.

El stack que necesitas para tener corriendo React y ES6+ a la perfección es:

  • Webpack u otros como Gulp.
  • React y React DOM.
  • Babel: core, loader y presets. Si usas ciertas características como async/await u object spread necesitarás transformadores y babel-polyfill.

1. Dependencias

Las dependencias básicas para desarrollo son las siguientes:

Nota: las dependencias de desarrollo deben instalarse con --save-dev o -D.

  • babel-core: núcleo de babel, utilitarios, etc.
  • babel-loader: loader usado para transpilar
  • babel-preset-es2015: preset para ES6
  • babel-preset-react: preset para react (JSX)
  • es6-promise: polyfill para ES6 Promise
  • whatwg-fetch: polyfill para la Fetch API
  • imports-loader: polyfill para import (webpack)
  • exports-loader: polyfill para export (webpack)

React y ReactDOM deben instalarse como dependencias runtime, es decir, con el parámetro --save o -S.

Nota: es importante que instales webpack tanto como dependencia de desarrollo (-D) como global (-g).

2. Archivo de configuración babel

Los bundles buscarán el archivo de configuración de babel y, de no encontrarlo, solicitará que se pase la configuración inline. El archivo de babel se llama .babelrc y dentro tiene los presets y plugins que uses:

{
  "presets": [
    "es2015", "react"
  ]
}

3. Configuración de Webpack

Webpack require un archivo llamado webpack.config.js para poder llevar a cabo su tarea. Este archivo contiene la configuración para el proceso de transpilación y operaciones posteriores como es el caso de minificar, concatenar archivos, agregar prefijos automáticamente a las hojas de estilo, etc.

La configuración básica de Webpack para React y ES6 se ve así:

const webpack = require('webpack')
const { join, resolve } = require('path')

module.exports = {
  entry: {
    // archivo principal, no es obligatoria esta ruta
    // debes poner la ruta de tu archivo principal
    bundle: './src/ui/Main.jsx',
  },
  output: {
    // directorio de salida
    path: join(__dirname, './public'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /.js(x)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  }, // end module
  resolve: {
    modules: [
      resolve('/'),
      'node_modules/',
    ],
    // extensiones que serán resueltas por webpack
    extensions: ['.js', '.jsx'],
    unsafeCache: true,
  },
  // aquí van los puglins de webpack.
  plugins: [
    // Estos plugins importan/exportan librerías
    // dentro del objeto global window
    new webpack.ProvidePlugin({
      Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
    }),
    // descomentar si se está en producción
    // new webpack.optimize.UglifyJsPlugin(),
  ],
  devtool: 'source-map',
  stats: { colors: true },
}

Los puntos más importantes en Webpack son:

  • entry: aquí se especifica el archivo principal del front. En este archivo se requerirán el resto de la aplicación.
  • output: aquí se especifica el directorio de salida y el nombre (opcional) del archivo generado.
  • rules: aquí van las reglas que interpretará Webpack; se le pasa una extensión en expresión regular y un loader. Cuando Webpack encuentre un archivo con esa extensión, aplicará el loader que queramos, en este caso, babel.
  • extensions: aquí van las extensiones que serán reconocidas por Webpack. Si pones .jsx ya no es necesario importar un archivo como import Module form 'Module.jsx', se puede omitir la extensión.

Finalmente solo debes ejecutar:

webpack --watch

O si configuraste el script build del package.json:

npm run build

Y webpack empezará a hacer su trabajo; en la consola aparecerá información del proceso y escuchará cualquier cambio en el código fuente para proceder a realizar una y otra vez el proceso. En el HTML solo debes anexar el bundle generado para tener tu aplicación funcional:

<script defer src="/js/bundle.js"></script>
1
  • Para no hacerla más larga xD, si quieres usar ES7 y 8 necesitarás instalar esos presets; además, ES8 incorpora funciones asíncronas (aka async/await), así que necesitarás el plugin babel-plugin-transform-async-to-generator y debes ponerlo en el .babelrc dentro de plugins: "plugins": ["transform-async-to-generator"].
    – gugadev
    Commented el 30 jun. 2017 a las 14:24
1

Finalmente lo solucioné utilizando la versión standalone de Babel 6. Ésta incluye el core (núcleo) de Babel y algunas dependencias que hacen que funcione con React para lo que estoy haciendo ahora mismo:

<div id="title"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

<script type="text/babel">
ReactDOM.render(
  <h1>Hola Mundo</h1>, 
  document.querySelector("#title") 
);
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.