Clever Geek Handbook

Nouveau moteur de transformation JSX dans React 17 Release Candidate

React 17 Release Candidate présente une nouvelle façon de transformer JSX. Avec lui, dans un bundle, React lui-même n'est pas nécessaire, bien qu'il soit toujours nécessaire d'utiliser des hooks. C'est le principal avantage du nouveau mécanisme. Voici une courte traduction d'un article sur le blog ReactJS .



Qu'est-ce que la transformation JSX



Étant donné que les navigateurs ne comprennent pas JSX par défaut, les développeurs s'appuient sur des compilateurs comme Babel ou Typescript pour transformer JSX en JS simple. React 17 Release Candidate introduit un nouveau mécanisme de transformation optionnel JSX vers JS.



Voici les avantages:



  • Utilisation de JSX sans React Import
  • Selon les paramètres, l'offre groupée peut légèrement diminuer
  • À l'avenir, des fonctionnalités seront disponibles pour simplifier le travail avec react


(Peut-être que je ne l'ai pas tout à fait traduit avec précision - voici l'original: cela permettra des améliorations futures qui réduiront le nombre de concepts dont vous avez besoin pour apprendre React ) La



mise à niveau ne change en rien le JSX lui-même et tous les compilateurs ont fonctionné et fonctionneront. Il n'est pas prévu de les abandonner. Il est prévu de prendre en charge le nouveau mécanisme JSX Transform pour les anciennes versions de React: 16.x, 15.x, 14.x, voici les instructions pour la mise à niveau.



Qu'est ce qui a changé



L'ancienne transformation JSX fonctionnait comme ceci:



Code 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Transformé en 



import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}


Mais ce n'est pas génial, et voici pourquoi:





Pour résoudre ce problème, React 17 introduit deux nouveaux points d'entrée destinés à être utilisés par d'autres outils tels que Babel et Typescript et maintenant au lieu de se transformer en React.createElement, de nouvelles fonctions du package React sont importées et appelées.



Disons que votre code ressemblait à ceci: 



function App() {
  return <h1>Hello World</h1>;
}


Après une nouvelle transformation, cela ressemblera à ceci: 



// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}


Le nouveau mécanisme n'importe pas React, bien qu'il soit toujours nécessaire pour que les hooks fonctionnent.



La nouvelle transformation est entièrement compatible avec tout le code JSX existant, vous n'avez rien à changer. Voici les détails techniques du fonctionnement de la nouvelle transformation JSX.



Comment mettre à jour



Si vous n'êtes pas prêt pour la mise à niveau ou si vous utilisez JSX pour d'autres bibliothèques, ne vous inquiétez pas, l'ancienne transformation ne sera pas supprimée et sera prise en charge.



Pour mettre à niveau, vous avez besoin de deux choses:



  • Version React avec un nouveau support de transformation. Jusqu'à présent, il n'y en a que 17, mais dans le futur 16.x, 15.x et 14.x
  • Compilateur compatible (voir ci-dessous)


Créer une application React La prise en charge de l'application



Create React sera dans la version v4.0 maintenant qu'elle est en test bêta (à compter du



22/09/2020 ) Next.js



Next.js v9.5.3 + utilise déjà la nouvelle transformation React pour les versions compatibles.



Gatsby



Gatsby v2.24.5 + utilise déjà la nouvelle transformation React pour les versions compatibles.



Remarque
Gatsby 17.0.0-rc.2, npm update







Prise en charge de la configuration manuelle Babel à partir de la version v7.9.0 et supérieure.



Si vous utilisezBabel/ plugin-transform-react-jsx:



# npm

npm update @babel/core @babel/plugin-transform-react-jsx

# yarn

yarn upgrade @babel/core @babel/plugin-transform-react-jsx



Si vous utilisezBabel/ preset-react:



# npm

npm update @babel/core @babel/preset-react

# yarn

yarn upgrade @babel/core @babel/preset-react



Maintenant pour transformer JSX, enBabel/ plugin-transform-react-jsx et dans Babel/ preset-react, la valeur par défaut est {"runtime": "classic"} c'est l'ancienne version de la transformation. Pour activer une nouvelle transformation, vous avez besoin de l'option {"runtime": "automatic"}



Si vous utilisezBabel/ preset-react: 



{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}


Si vous utilisez Babel/ plugin-transform-react-jsx: 



{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}


A partir de Babel 8, "automatique" sera la valeur par défaut pour les deux plugins. Il y a une documentation plus détaillée ici @ babel / plugin-transform-react-jsx et @ babel / preset-react .



Remarque
, importSource , . , .



ESLint



Si vous avez le plugin eslint-plugin-react , alors les règles react / jsx-uses-react et react / react-in-jsx-scope ne sont plus nécessaires et peuvent être supprimées. 



{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}






Prise en charge de TypeScript pour les transformations JSX depuis la version 4.1 beta . Prise en charge de



flux



pour les transformations JSX à partir de la version 0.126.0 et supérieure.



Comment supprimer les importations React inutilisées



Étant donné que la nouvelle transformation JSX importera automatiquement react / jsx-runtime, React n'est plus nécessaire dans la portée pour utiliser JSX. Les importations inutilisées ne sont pas critiques, mais si vous souhaitez les supprimer, il est recommandé d'utiliser le script codemod. 



cd your_project
npx react-codemod update-react-imports


Par conséquent:



  • Supprimez toutes les importations React inutilisées
  • Toutes les importations comme import React de "react" seront changées en import {useState} de "react". Il s'agit de la méthode d'importation préférée. Codemod n'affectera pas les importations comme l'importation * comme React de "react", c'est aussi une importation valide et dans la version 17 cela fonctionnera, mais à l'avenir nous vous demanderons de vous en débarrasser


Le code: 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Sera remplacé par: 



function App() {
  return <h1>Hello World</h1>;
}


Si vous utilisez autre chose dans la réaction (par exemple un hook), alors l'importation nommée apparaîtra dans le code:



Code 



import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}


Remplacé par le code: 



import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}


La suppression des importations inutilisées aidera à préparer les prochaines versions de React (et non 17) dans lesquelles il y aura un support pour les modules ES et il n'y aura pas d'exportation par défaut.



Remerciements



Nous remercions les équipes Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint et Flow pour leur aide dans l'intégration du nouveau moteur de transformation JSX. Nous remercions également la communauté React pour ses commentaires et discussions sur la RFC .


More articles:


All Articles