以下サイトを参考に作業
非常にわかりやすかったです。基本、こちらに沿っていけば問題なくHelloWorldできると思います。
参考：【VSCode】Reactを環境構築してHello Worldする方法 | いなかdeMac
個人的に引っかかったところだけ、参考までに残しておきます。
npx create-react-appでエラー
PS D:\_work\svr\react_test> npx create-react-app react-test
npm error code ENOENT
npm error syscall lstat
npm error path C:\Users\ユーザー名\AppData\Roaming\npm
npm error errno -4058
npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\ユーザー名\AppData\Roaming\npm'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm notice
npm notice New patch version of npm available! 10.8.1 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice To update run: npm install -g npm@10.8.2
npm notice
npm error A complete log of this run can be found in: C:\Users\ユーザー名\AppData\Local\npm-cache\_logs\2024-08-15T20_52_01_113Z-debug-0.log
npm updateでググって「プラグインでupdateするといいよ、今のver確認して」など出てきたのでとりあえず確認
PS D:\_work\svr\react_test> npm list --depth=0 -g
npm error code ENOENT
npm error syscall lstat
npm error path C:\Users\ユーザー名\AppData\Roaming\npm
npm error errno -4058
npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\ユーザー名\AppData\Roaming\npm'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\ユーザー名\AppData\Local\npm-cache\_logs\2024-08-15T20_56_16_332Z-debug-0.log
PS D:\_work\svr\react_test> npm list --depth=0 -g
C:\Users\ユーザー名\AppData\Roaming\npm
└── (empty)
'C:\Users\ユーザー名\AppData\Roaming\npm'ディレクトリが無いよとのことで、エクスプローラから作成
※これすみません、ターミナルからmkdirできるんですね…。
PS D:\_work\svr\react_test> npx create-react-app react-test
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
yしてとりあえず成功
- src/App.js開いて編集後、localhostでf5押したらアクセスできず
- ググったけどようわからん
- wslの再起動やってみたけど反応あったのかわからん
- 結局ターミナルから再度npm start叩いたらいけた
所感とか
- ターミナル全然慣れてないのでそこら辺で躓く
- とはいえCUI慣れればめちゃくちゃ便利な予感はしてる
- 最近のHelloWorldはデフォルトがリッチでかっこいい
次回予告
tailwindCSS使ってポートフォリオ的なやつ模写します。