ReactでjQuery使うと「ESLint:'$' is not defined. (no-undef)」とエラー出たので直し方を調べてみた

Reactで構築していたシステムに、ふとjQueryを入れないと実現できないような要件が発生しました。

そもそもReactとjQueryを共用してもいいのか・・？

ざっっっくり調べた個人的解釈では、

「使い方ちゃんとすれば別に大丈夫じゃない？」

という感じ。

とりあえずやってみたら、ESLintさんに

‘$‘ is not defined. (no-undef)

と言われてしましました。

どうすりゃいいのか調べたら、解決策見つけたので書いておきます。

そもそもReact と jQuery 共存は？

結論のまえに、まずReactとjQueryの共存について少しだけ。
相性は良くないだろうとは思ってざっくり調べましたが、必要最低限に使用箇所を考慮して使う文にはまぁ大丈夫そうです。
詳しくは以下のサイトがわかりやすかったのでご参照を。。

参考にしたサイト　(ありがとございますー！)

React と jQuery を共存させる | GMOインターネット 次世代システム研究室
React と jQuery は共存可能なのか？ - Qiita

注意するポイント

「 jQuery は DOM が現れたり削除されたりするライフサイクルメソッド（ componentDidMount, componentWillUnmount, componentDidUpdate ）の中でだけ実行しなさい。」

(React と jQuery を共存させる | GMOインターネット 次世代システム研究室から抜粋 )

かなと思ってます。

かなり端的ですけど、理論上は納得ので可能な限りは準拠しようかと。

‘$‘ is not defined. (no-undef)の解決策

本題の解決策です。

ドンピシャで教えてくれてるブログを見つけました。

hsuzuki.hatenablog.com

結論から言うと解決策は単純で、.eslintrcのenvにjqueryを追加すればOKです。
こんな感じ。

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
  }
 }

※上記は例ですので、"jquery": true,の記述さえあれば問題ありません。

いやー無知って怖い。
[ブログ]メンチカツさん、ありがとうございます。