Transformer du jsx en js avec Gulp

Ici, l'objectif est de compiler du code JSX lorque l'on intègre des composants React à un projet existant (et non géré en full React).
Pour les projets full react, on préferera plutot partir sur le builder Parsel ou la toolbox react-create-app qui contient un builder intégré.

Pour automatiser cela, j'utilise Gulpjs.

Installation

Installation de Gulp, de babel, et du plugin transform-react-jsx qui vont faire cela :

npm i -D gulp gulp-babel @babel/core babel-plugin-transform-react-jsx

Exemple de fichier gulpfile.js

Ici, les fichier .jsx présents dans le répertoire jsx/ seront converti en javascript pur, renommés en .js, et placés dans le répertoire js/ :

const gulp = require('gulp')
const babel = require('gulp-babel');

function transformJsx() {
    return gulp.src('jsx/*.jsx')
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(gulp.dest('./js'));
}

module.exports = {
    default: gulp.series(transformJsx)
}

Le fichier gulpfile.js est à compléter et adapter selon vos projets.