React17におけるJSXの新しい変換を理解する

今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換

[shingo-sasaki-0529]

はるか昔の話しだけどこれ知らなかった。 import 要らない気がするけどなんかめっちゃ付けてるプロジェクトもあるんだよなぁぐらいの認識だったけどそういうことなのね。

[carolina04]

“Reactチームは、丁寧にも必要なくなったインポートを自分で消すツールを提供してくれています。コマンドで実行することができます。 npx react-codemod update-react-imports”

[maecchi]

バンドルサイズが減るのは嬉しい

[mizdra]

良くまとまっていて良い

[akymrk]

“Babelは7.9.0から、TypeScriptは4.1.0から新方式に対応します”

[oukayuka]

日本語最速記事！ ありがたく拝読した。

[akulog]

"利用者的にはこれは嬉しい変更ですが、React側の思惑としてはこれは副作用でしょう。というのも、古い記法でもReactを自動的にインポートするのはできないわけでもないという点…"

[uehaj]

React 17でjsx の展開の仕方が変わっている