ESLintが出力する「React' must be in scope when using JSX」に対応する
あーる解決方法
Reactの公式ブログ、新しい JSX トランスフォーム内に解決方法が含まれていた。
ざっくりとまとめると2020年末にリリースされたReact v17にて変更が入ったためとのこと。
以下引用:
eslint-plugin-react を使用している場合、react/jsx-uses-react と react/react-in-jsx-scope のルールは不要になりますので、無効にするか削除することができます。
ルールの無効、削除で解決できそうなので、eslintrcファイルのルールを上書きする形で対応する。
（以下はJSON形式で作成した.eslintrcの例）
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
jsx-uses-react・react-in-jsx-scopeの2つを明示的にoffとすることでエラーが消え、問題なく使えるようになった。
あーるViteで作成したプロジェクトでESLintエラー
ViteでReact（JS）のアプリをテンプレートから作成し、
以下の手順でリンター（ESLint）を導入した。
デフォルトだと約50件ほど検出されたエラーでかなり悩まされたため、遭遇したエラーについてまとめる。
あーるJSXでエラーが多発
ESLint公式ドキュメントを参考に導入後したルールで構文解析をしたところ以下のエラーが多発した。
React' must be in scope when using JSX
日本語訳すると次のようになる。
JSXを使用する場合は、「React」をスコープに入れる必要があります。
どうやらJSXでReactの構文エラーが起きている模様。
あーる原因:import React from 'react'の欠落
React v17にてJSXトランスフォームに対応、JSXの記法が大きく改良されたとのこと。
公式記事はこちら。
JSXトランスフォームに伴い、import React from 'react'はインポートは必須ではなくなった。（省略してもエラーがでない）
それに伴いESLintが、Reactのインポートを含める必要があると警告を表示しているということらしい。