React 17以降を使用していてeslintのreact-in-jsx-scopeでlintされる件の対応
React17以降から、JSXで記述しても毎回Reactをimportしなくても良くなりました。
詳しくはReact公式ブログ新しいJSXトランスフォームを読むとよさそうです。
React17以降のJSXトランスフォームはパフォーマンスが改善されていたりするそうです。わざわざファイルごとにimport React from 'react';
を書く必要がなくなるのも良い点ですね
ESLintでのLintエラーの対応方法を記しておきます。
対応方針1: ESLint設定ファイルのextendsを拡張する
.eslintrc.json
などの設定ファイルを適宜変更
{
// ...
"rules": {
// ...
// ↓を追記
"plugin:react/jsx-runtime"
}
}
対応方針2: ESLint設定ファイルのruleで無効にする
.eslintrc.json
などの設定ファイルを適宜変更
{
// ...
"rules": {
// ...
// ↓を追記
"react/react-in-jsx-scope": "off"
}
}