Ajouter les decorator dans votre projet React créé par create-react-app

Contexte : Vous souhaitez profiter des decorators pour utiliser MobX dans votre projet ReactJs. Or, votre projet ReactJs a été créé avec npx create-react-app.
Comment faire ?

Etape 1 – Eject

Vous devez rendre visible tous les modules et la configuration de tests, de webpack.
Pour y arriver, lancer un npm run eject.

Etape 2 – Ajouter un plugin à Babel : babel-plugin-transform-decorators-legacy

Une fois le eject fait, vous avez accès au webpack config et vous découvrez que Babel est utilisé dans votre projet.

Il vous faut ajouter un plugin a Babel pour reconnaître les decorator, qui sont par exemple utilisés dans Mobx.

Installer le package : babel-plugin-transform-decorators-legacy

Puis aller dans le dossier node_modules\babel-plugin-transform-decorators-legacy et lisez le fichier README.md.

Etape 3 – Ajouter le plugin à la configuration webpack

Dans le README.md, il est noté la procédure d’installation. 🙂

Et il nous suffit donc de l’ajouter comme il est dit, dans notre fichier wbepack.config.js :