数年前に挫折したReactを、じゃけぇ本(モダンJavaScriptの基本から始める React実践の教科書)を参考にリベンジ(再学習)しているときに色々とハマったことがあったので、参考までに共有させていただきます。
まだ途中までしか読んでいないので、今後ハマり次第順次追記をしていきます。
#環境
・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はちょっと調べててみたけどよくわからず。どなたか詳しい方教えてください。
###React起動時のエラー
P94記載のReact起動のためのコマンド(npm start)実行時に、以下エラーが発生。
どうやら何かが足りず(web-vitals)にコンパイルに失敗した模様。
※web-vitalsもちょっと調べたけどよくわからず。こちらもどなたか詳しい方教えてください。
(解決策)
こちらを参考に、以下コマンド実行し解決。
#4-3 コンポーネントの使い方
###ファイル拡張子変更時のエラーjs->jsx
P101の記載通り、App.jsの拡張子をjsからjsxに変更したところ、ブラウザ上で以下エラーが発生
(解決策)
npm startで起動したサーバプロセスを終了して、もう一度npm startを実行したら正しく表示できた。
※理由は不明。こちらもどなたか詳しい方教えてください。
※ファイル追加するときも再起動必要そう。CodeSandboxの方が学習する分には楽かも。
※再起動しなくても良い方法があると良いのですが。。。
#4-7 再レンダリングと副作用(useEffect)
###useEffect関数追加時のエラー
P121の通りuseEffect関数をAppコンポーネント内に記載すると以下のエラーが発生。
、
(解決策)
以下の様に先にnum, setNumを定義した後に、useEffectを記載することにより解決。
#5-2 CSS Modules
###CSS Modules使用時のコンパイルエラー
P132の通り、scssファイルを読み込むと、以下のようなエラーが発生。
#5-6 Tailwind CSS
###tailwindcssインストール時の注意点
P149の記載が少々分かりずにくい(私だけ?)ですが、compatとpostcss@^7の間に半角スペースがあります。
一行で記載するとこんな感じ。
最初、compatpostcss@^7と半角スペースを空けずに実行してエラーになりました。
###cracoインストール時の注意点
P149のnpm install @craco/cracoコマンドはプロジェクトルートで実行する必要がある。
プロジェクトルート外で実行した場合、npm start時に以下のエラーが発生する。
###Tailwind cssが正しく適用されない件
P151のindex.cssの格納場所が不明(見落としている?)
srcの下に置いても動作せず。
(解決策)
コンポーネントファイルに、import "tailwindcss/tailwind.css"を追加して適用される様になった。が、cssオブジェクトが適用されなくなった(フォントサイズ)。
こちらを参照。
#6-3 レンダリング最適化2(useCallback)
###useCallbackのnot definedエラー
P170の通り、useCallback部分を追加すると、not definedのエラーが発生。
(解決策)
App.jsxの上部で、以下をインポートして解決。
#8-1 TypeScriptの基本
###typescriptプロジェクト起動時エラー(その1)
P205の通りプロジェクト作成後に、npm startでサーバ起動すると、以下のエラーが発生。
(解決策)
TypeScriptのインストールが必要とのことで、以下コマンドを実行して解決。
###typescriptプロジェクト起動時エラー(その2)
上記実施後、さらに以下エラーが発生。
(解決策)
プロジェクトフォルダ下のtsconfig.jsonファイル上のstrictオプションをfalseに変更して解決。
/以上