以下サイトを参考に作業

非常にわかりやすかったです。基本、こちらに沿っていけば問題なく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使ってポートフォリオ的なやつ模写します。