1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-10-17

数年前に挫折した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はちょっと調べててみたけどよくわからず。どなたか詳しい方教えてください。
image.png

(解決策)
画面の指示通り、以下コマンド実行し解決。
image.png

###React起動時のエラー
P94記載のReact起動のためのコマンド(npm start)実行時に、以下エラーが発生。
どうやら何かが足りず(web-vitals)にコンパイルに失敗した模様。
※web-vitalsもちょっと調べたけどよくわからず。こちらもどなたか詳しい方教えてください。
image.png

(解決策)
こちらを参考に、以下コマンド実行し解決。
image.png

#4-3 コンポーネントの使い方
###ファイル拡張子変更時のエラーjs->jsx 
P101の記載通り、App.jsの拡張子をjsからjsxに変更したところ、ブラウザ上で以下エラーが発生
image.png

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

#4-7 再レンダリングと副作用(useEffect)
###useEffect関数追加時のエラー
P121の通りuseEffect関数をAppコンポーネント内に記載すると以下のエラーが発生。
image.png

(解決策)
以下の様に先にnum, setNumを定義した後に、useEffectを記載することにより解決。
image.png

#5-2 CSS Modules
###CSS Modules使用時のコンパイルエラー
P132の通り、scssファイルを読み込むと、以下のようなエラーが発生。
image.png

(解決策)
コマンドプロンプトで以下を実行して解決。
image.png

#5-6 Tailwind CSS
###tailwindcssインストール時の注意点
P149の記載が少々分かりずにくい(私だけ?)ですが、compatとpostcss@^7の間に半角スペースがあります。
一行で記載するとこんな感じ。
最初、compatpostcss@^7と半角スペースを空けずに実行してエラーになりました。
image.png

###cracoインストール時の注意点
P149のnpm install @craco/cracoコマンドはプロジェクトルートで実行する必要がある。
プロジェクトルート外で実行した場合、npm start時に以下のエラーが発生する。
image.png

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

(解決策)
コンポーネントファイルに、import "tailwindcss/tailwind.css"を追加して適用される様になった。が、cssオブジェクトが適用されなくなった(フォントサイズ)。
こちらを参照。
image.png

#6-3 レンダリング最適化2(useCallback)
###useCallbackのnot definedエラー
P170の通り、useCallback部分を追加すると、not definedのエラーが発生。
image.png

(解決策)
App.jsxの上部で、以下をインポートして解決。
image.png

#8-1 TypeScriptの基本
###typescriptプロジェクト起動時エラー(その1)
P205の通りプロジェクト作成後に、npm startでサーバ起動すると、以下のエラーが発生。
image.png

(解決策)
TypeScriptのインストールが必要とのことで、以下コマンドを実行して解決。
image.png

###typescriptプロジェクト起動時エラー(その2)
上記実施後、さらに以下エラーが発生。
image.png

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

/以上

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?