Babel adora React

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Uno de los aspectos que frecuentemente sorprende a la gente es que Babel soporta JSX de forma nativa.

Permíteme mostrarte lo fácil que es cambiar:

Nota: Existen montones de formas de usar Babel, solo enumeraré algunas de ellas aquí. Si deseas ver una lista más completa, visita nuestra página Usando Babel.

En el navegador (docs)

Antes:

<script type='text/jsx'></script>

Después:

<script type='text/babel'></script>

Con Browserify (docs)

Antes:

Shell

$ browserify -t reactify main.js

Después:

Shell

$ browserify -t babelify main.js

En Node (docs)

Antes:

JavaScript

require('node-jsx').install();

Después:

JavaScript

require('babel/register');

Con Webpack (docs)

Antes:

JavaScript

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'jsx-loader'}
]

Después:

JavaScript

loaders: [
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]

Con Gulp (docs)

Antes:

JavaScript

gulp.src('views/**/*.js')
    .pipe(jsx())
    .pipe(gulp.dest('dist'));

Después:

JavaScript

gulp.src('views/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));

---

La lista continúa, pero probablemente ya entiendes lo simple que es. Si no viste la herramienta que buscas, no te preocupes: tenemos un listado completo en nuestra página Usando Babel.

Si necesitas más ayuda para configurar, asegúrate de leer nuestra documentación sobre JSX o pregunta a otros usuarios de Babel en nuestro chat de soporte.

— The Babel team