はじめに
React超初級者が学習しながら気になったことや発生した問題、思考を書くだけ。
ちなみに下記の書籍で学習中。
モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応版）
npm, npxの違い
Node.jsに触れるのも始めてゆえなんじゃいこれはとなった。
- npm: Node Package Manager
Node Packageを管理(manage)するコマンド
install, startなど - npx: Node Package Executer
Node Packageを実行(execute)するコマンド
create-react-appなど
package.jsonに定義されていればnpm、されていなければnpxで実行ってくらいの理解だけど、
調べるほど沼が深そうなので一旦これくらいにする。
Reactのプロジェクトを始めるために必要なこと
プロジェクトの作成
$ npx create-react-app [任意のプロジェクト名]
$ cd [任意のプロジェクト名]
$ npm start
注意事項
- src配下には【index.js】が必須
パッケージの最新版を信用してはいけないのか……？
- styled-componentsやEmotionを利用しようとしたが挙動がおかしい
- コンパイルは正常に実行されるが画面にレンダリングされない（＝画面が白飛びする）
- コンソールに大量にエラー
- The above error occurred in the < ～ > component
解決
バージョンが原因だった。
「npm install styled-components」で最新版をインストールしていたが、
一度削除し「styled-components@4.3.2」をインストールすることで無事に表示された。
Emotionも同様に、最新版を削除し安定版(11.8.2)をインストールした。
- バージョン確認に使ったコマンド
- npm info [パッケージ名] versions
EmotionとStorybookが競合する？
Storybookの記述があったためお試しでインストールしてみるとEmotionコンポーネント使用時に下記のエラーが発生した。
Module not found: Error: Can't resolve '@emotion/core' in '～'
解決
「@emotion/core」なるパッケージが削除されたのか？と思いインストールしてみたところ解消した。原因はStorybookインストール時にファイルが削除されたこと……？
「npm install @craco/craco」実行時にエラーが発生する
Tailwind CSSの項目で必要になったCRACOのインストールコマンドを実行すると下記のエラーが発生した。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: practice@0.1.0
npm ERR! Found: react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"^5.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.4.3
npm ERR! node_modules/@craco/craco
npm ERR! @craco/craco@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\[ユーザー名]\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\[ユーザー名]\AppData\Local\npm-cache\_logs\2022-05-29T12_19_13_400Z-debug-0.log
色々試したが動作する見通しが立たなかったため、Tailwind CSSの学習は保留とする。
（メインは「Reactを学習すること」としているため）
今後は・・・
- Next.jsに取り組みつつサイト構築
- Storybookの理解