昔挫折したReactの勉強を、じゃけぇ本を見ながらリベンジしているときにハマったこと

数年前に挫折したReactを、じゃけぇ本（[モダンJavaScriptの基本から始める　React実践の教科書](https://www.sbcr.jp/product/4815610722/)）を参考にリベンジ（再学習）しているときに色々とハマったことがあったので、参考までに共有させていただきます。
まだ途中までしか読んでいないので、今後ハマり次第順次追記をしていきます。

#環境
・Windows 10
・Node.js v12.16.3

#4-1 React開発の始め方
###Create React App時のエラー
P93記載のReactプロジェクト開始のためのコマンド（npx create-react-app my-app）実行時に、以下エラーが発生。「global installationは対応してないから、以下のコマンド実行して」という内容。
※global installationはちょっと調べててみたけどよくわからず。どなたか詳しい方教えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/6a578ade-4855-24d8-b68a-7cc890633d8d.png)

（解決策）
画面の指示通り、以下コマンド実行し解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/918b3534-60a9-35b3-be5a-8ccf9b5c8521.png)

###React起動時のエラー
P94記載のReact起動のためのコマンド(npm start)実行時に、以下エラーが発生。
どうやら何かが足りず(web-vitals)にコンパイルに失敗した模様。
※web-vitalsもちょっと調べたけどよくわからず。こちらもどなたか詳しい方教えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/7d18ef5d-e1f4-ee03-7191-8e1f6224f47d.png)

（解決策）
[こちら](https://stackoverflow.com/questions/65396568/react-js-npm-start-shows-failed-to-compile-web-vitals)を参考に、以下コマンド実行し解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/f5fec729-655f-e7fb-33f9-cdeec8607fef.png)

#4-3 コンポーネントの使い方
###ファイル拡張子変更時のエラーjs->jsx　
P101の記載通り、App.jsの拡張子をjsからjsxに変更したところ、ブラウザ上で以下エラーが発生
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/683af35b-de7f-e6c5-7df1-7cc8a88a3c6f.png)

（解決策）
npm startで起動したサーバプロセスを終了して、もう一度npm startを実行したら正しく表示できた。
※理由は不明。こちらもどなたか詳しい方教えてください。
※ファイル追加するときも再起動必要そう。CodeSandboxの方が学習する分には楽かも。
※再起動しなくても良い方法があると良いのですが。。。

#4-7 再レンダリングと副作用(useEffect)
###useEffect関数追加時のエラー
P121の通りuseEffect関数をAppコンポーネント内に記載すると以下のエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/32e1f5d6-d0b0-e38d-c975-78665cde7ceb.png)
、
（解決策）
以下の様に先にnum, setNumを定義した後に、useEffectを記載することにより解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/cacde0fb-77e9-4710-3ee1-ef4c4a96364a.png)

#5-2 CSS Modules
###CSS Modules使用時のコンパイルエラー
P132の通り、scssファイルを読み込むと、以下のようなエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/c6951140-2d43-8def-b554-4112c3b16c97.png)

（解決策）
コマンドプロンプトで以下を実行して解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/a89cefa3-f5db-9aa3-88f0-24a048c3a002.png)

#5-6 Tailwind CSS
###tailwindcssインストール時の注意点
P149の記載が少々分かりずにくい（私だけ？）ですが、compatとpostcss@^7の間に半角スペースがあります。
一行で記載するとこんな感じ。
最初、compatpostcss@^7と半角スペースを空けずに実行してエラーになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/b76c3378-ea28-c106-7753-d97debb1e4dc.png)

###cracoインストール時の注意点
P149のnpm install @craco/cracoコマンドはプロジェクトルートで実行する必要がある。
プロジェクトルート外で実行した場合、npm start時に以下のエラーが発生する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/9371389e-c718-d794-0924-302e6d8b5019.png)

###Tailwind cssが正しく適用されない件
P151のindex.cssの格納場所が不明（見落としている？）
srcの下に置いても動作せず。

（解決策）
コンポーネントファイルに、import "tailwindcss/tailwind.css"を追加して適用される様になった。が、cssオブジェクトが適用されなくなった（フォントサイズ）。
[こちら](https://tailwindcss.com/docs/installation)を参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/afdf3596-41f9-a676-cdae-7f33ffe05c59.png)

#6-3 レンダリング最適化2(useCallback)
###useCallbackのnot definedエラー
P170の通り、useCallback部分を追加すると、not definedのエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/080aa673-0a1e-e710-c21f-ffc03ed77db5.png)

（解決策）
App.jsxの上部で、以下をインポートして解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/73393420-4bc5-fdc2-70fe-1c6c2cca1728.png)

#8-1 TypeScriptの基本
###typescriptプロジェクト起動時エラー(その１）
P205の通りプロジェクト作成後に、npm startでサーバ起動すると、以下のエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/cda2390b-e296-8e38-28ca-1dd3ad3eb9bc.png)

（解決策）
TypeScriptのインストールが必要とのことで、以下コマンドを実行して解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/247ff7aa-f7f2-94a8-b552-dc3f03a57e7d.png)

###typescriptプロジェクト起動時エラー(その２）
上記実施後、さらに以下エラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694198/70453a1a-8267-ea6f-1be4-72cf7be6932a.png)

（解決策）
プロジェクトフォルダ下のtsconfig.jsonファイル上のstrictオプションをfalseに変更して解決。

/以上