Se puede a la perfección y usar la versión 6 no supone inconveniente alguno. Cuando se desarrolla con reactjs 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>