Clever Geek Handbook

React17リリース候補の新しいJSX変換エンジン

React 17 Release Candidateは、JSXを変換する新しい方法を導入します。これを使用すると、フックを使用するために必要ですが、バンドルではReact自体は必要ありません。これが新しいメカニズムの主な利点です。以下は、ReactJSブログの記事の短い翻訳です。



JSXトランスフォーメーションとは



ブラウザはJSXをすぐに理解できないため、開発者はBabelやTypescriptなどのコンパイラを使用してJSXをプレーンなJSに変換します。React 17 Release Candidateは、新しいオプションのJSXからJSへの変換メカニズムを導入します。



利点は次のとおりです。



  • ReactインポートなしでJSXを使用する
  • 設定によっては、バンドルが少し小さくなる場合があります
  • 将来的には、reactを使用して作業を簡素化する機能が利用可能になる予定です。


（多分私はそれを正確に翻訳していませんでした-これがオリジナルです：Reactを学ぶために必要な概念の数を減らす将来の改善を可能にします）



アップグレードはJSX自体をまったく変更せず、すべてのコンパイラが機能し、機能します。それらを放棄する計画はありません。Reactの古いバージョン（16.x、15.x、14.x）の新しいJSX変換メカニズムをサポートする予定です。アップグレードの手順は次のとおりです。



何が変わったのか



古いJSX変換は次のように機能しました：



コード 



import React from 'react';

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


に変身 



import React from 'react';

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


しかし、これは素晴らしいことではなく、その理由は次のとおりです。





これに対処するために、React 17では、BabelやTypescriptなどの他のツールで使用する2つの新しいエントリポイントが導入され、React.createElementに変換する代わりに、Reactパッケージの新しい関数がインポートされて呼び出されます。



コードが次のようになっているとしましょう。 



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


新しい変換後は、次のようになります。 



// 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' });
}


新しいメカニズムはReactをインポートしませんが、フックが機能するためにはまだ必要です。



新しい変換は、既存のすべてのJSXコードと完全に互換性があり、何も変更する必要はありません。ここにある新しいJSX変換がどのように動作するかの技術的な詳細は。



アップグレードする方法



アップグレードする準備ができていない場合、または他のライブラリにJSXを使用している場合でも、心配しないでください。古い変換は削除されず、サポートされます。



アップグレードには2つのことが必要です。



  • 新しい変換サポートを備えたReactバージョン。これまでのところ17ですが、将来的には16.x、15.x、14.xになります。
  • 互換性のあるコンパイラ（以下を参照）


Create React App



Create React Appのサポートはv4.0リリースになり、ベータテスト中です（



09.22.20現在）Next.js



Next.js v9.5.3 +は、互換性のあるバージョンに対して新しいReactトランスフォーメーションをすでに使用しています。



Gatsby



Gatsby v2.24.5 +は、互換性のあるバージョンに新しいReactトランスフォーメーションをすでに使用しています。



注意
Gatsby 17.0.0-rc.2, npm update



v7.9.0以降



からの手動Babel構成サポート。 使用している場合



バベル/ plugin-transform-react-jsx：



＃npm

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

＃yarn

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



を使用している場合バベル/プリセット-反応：



＃npm

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

＃yarn

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



今JSXを変換するためにバベル/ plugin-transform-react-jsxおよび バベル/ reset-react、デフォルトは{"runtime"： "classic"}これは古いバージョンの変換です。新しい変換を有効にするには、オプション{"runtime"： "automatic"}



が必要です。バベル/プリセット-反応： 



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


使用している場合 バベル/ plugin-transform-react-jsx： 



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


Babel 8以降、両方のプラグインのデフォルトは「自動」になります。@ babel / plugin-transform-react-jsxおよび@babel / preset-reactに詳細なドキュメントがあります。



注意
, importSource , . , .



ESLint



お持ちの場合は、プラグインeslint-プラグインが反応し、その後、反応/ JSX-用途-反応し、反応/反応・イン・JSX-スコープ規則はもはや必要とされ、削除することができます。 



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






バージョン4.1ベータ以降のJSX変換のTypeScriptサポート。 バージョン0.126.0以降からのJSX変換の



フロー



サポート。



未使用のReactインポートを削除する方法



新しいJSXトランスフォームはreact / jsx-runtimeを自動的にインポートするため、JSXを使用するためにスコープ内でReactは不要になりました。未使用のインポートは重要ではありませんが、それらを削除する場合は、codemodスクリプトを使用することをお勧めします。 



cd your_project
npx react-codemod update-react-imports


結果として：



  • 未使用のReactインポートを削除します
  • 「react」からのimportReactのようなすべてのインポートは、「react」からの名前付きimport {useState}に変更されます。これは、推奨されるインポート方法です。Codemodは、import * as React from "react"のようなインポートには影響しません。これも有効なインポートであり、バージョン17では機能しますが、将来的には削除するように求められます。


コード： 



import React from 'react';

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


置き換えられます： 



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


反応で他の何か（フックなど）を使用すると、名前付きインポートがコードに表示されます：



コード 



import React from 'react';

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


コードに置き換えられました： 



import { useState } from 'react';

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


未使用のインポートを削除すると、ESモジュールがサポートされ、デフォルトのエクスポートがない次のバージョンのReact（17ではない）の準備に役立ちます。



謝辞



新しいJSX変換エンジンの統合に協力してくれた、Babel、TypeScript、Create React App、Next.js、Gatsby、ESLint、およびFlowの各チームに感謝します。また、RFCに関するフィードバックとディスカッションを行ってくれたReactコミュニティにも感謝します。


More articles:


All Articles