Babel ❤️ React

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

L'une des choses qui surprend souvent les développeurs est que Babel prend en charge JSX nativement.

Je vais vous montrer à quel point la transition est simple :

Remarque : Il existe énormément de façons d'utiliser Babel. Je n'en présenterai que quelques-unes ici. Pour une liste complète, consultez notre page Utiliser Babel.

Dans le navigateur (docs)

Avant :

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

Après :

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

Avec Browserify (docs)

Avant :

Shell

$ browserify -t reactify main.js

Après :

Shell

$ browserify -t babelify main.js

Dans Node (docs)

Avant :

JavaScript

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

Après :

JavaScript

require('babel/register');

Avec Webpack (docs)

Avant :

JavaScript

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

Après :

JavaScript

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

Avec Gulp (docs)

Avant :

JavaScript

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

Après :

JavaScript

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

---

La liste est longue, mais vous avez maintenant compris la simplicité du processus. Si votre outil ne figure pas ici, consultez notre liste complète sur la page Utiliser Babel.

Pour plus d'aide sur la configuration, lisez notre documentation JSX ou rejoignez notre chat d'assistance pour échanger avec d'autres utilisateurs de Babel.

— The Babel team