BABEL

Babel es un compilador que convierte un estándar nuevo en una

versión totalmente compatible de JavaScript. Así, tenemos la
ventaja de poder programar en un estándar nuevo sin renunciar a
la compatibilidad entre navegadores.
Babel funciona mediante plugins para que le indiquemos que cosas
queremos que transforme, por ejemplo con el plugin babel-plugin-
transform-es2015-arrow-functions podemos decirle que
transforme las arrow functions de ECMAScript 2015 a funciones
normales, con babel-plugin-transform-react-jsx podemos hacer que
entienda código de JSX y lo convierta a código JS normal.

La forma más básica de uso sería inicializar el package.json

npm init -y

Luego instalar los paquetes necesarios:

npm install --save-dev babel-core babel-cli

Ahora necesitamos configurar una transformación. Para ello,

creamos el fichero .babelrc en el mismo directorio que el
package.json y añadimos:

{
"presets": ["es2015"]
}

Ahora instalamos el preset:

npm -install -D babel-preset-es2015

Ya podríamos compilar ficheros JavaScript:

babel es5-script.js --out-file script.js

Al crear nuestros componentes, sin embargo los navegadores y

Node.js no entienden JSX, así que para que funcionen nuestro
components necesitamos transformar nuestro código, para eso
usamos Babel.
Babel tiene plugins para soportar JSX y FlowType, sí deciden usarlo,
y posee un preset con estos plugins llamado react así que vamos a
cargarlo, para esto lo bajamos con npm.
npm i -D babel-preset-react
Y lo agregamos a nuestra configuración.
{
"presets": ["es2015", "react"]
}
Con esto ya podemos usar JSX y FlowType en nuestro código y
Babel se va a encargar de que funcione en todos los navegadores
realizando las transformaciones necesarias.

¿Como se usan todos estos presets? Simplemente los bajamos

con npm y lo agregamos a la configuración de Babel.
npm i -D babel-preset-stage-0 babel-preset-latest
Luego en nuestra configuración.
{
"presets": ["latest", "react", "stage-0"]
}
Con esto ya tenemos todo ECMAScript 2015/2016/2017, React (JSX
y FlowType) y las funciones experimentales del Stage 0.

Cuando usamos Babel hay muchos plugins que podemos usar que
no son parte de ningún preset y que nos dan ciertas mejoras de
rendimiento, minificación u otras funciones que nos pueden ser
útiles.
Para poder usar todos estos plugins vamos a primero descargarlos
con npm.
npm i -D babel-plugin-transform-react-constant-elements babel-
plugin-transform-runtime
Luego podemos agregar estos plugins desde la configuración de
Babel.
{
"presets": ["latest", "react", "stage-0"],
"plugins": [
"transform-runtime"
],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements"
]
}
}
}
Como vemos un plugin se agrega usando la propiedad plugins y
agregándolos dentro de un array.