タイトルの通り、新PC(Windows)で新しい開発環境を作ってみました。
やっていることは参考(https://high-career.jp/2022/01/04/vscode-react-dev/ )とほぼ同じです。

全体の流れ

VSCodeのインストール
Node.jsのインストール
VSCodeを起動しReactプロジェクトの作成
プロジェクトの実行

ざっくり注意

プロジェクト作成時、npmで必要なファイルが見つからなかったらしくエラーが出ました。
もし同じようにエラーが出た場合は提案されたバージョンのnpmにアプデしてみましょう。

VSCodeのインストール

公式サイトからダウンロードしてインストールする。
必要があれば途中の設定は適宜変更してください。

Node.jsのインストール

なんとなくインストールされていないことを確認

コマンドプロンプトを起動し、「node --version」を実行する。

まだ入っていません。

インストール

公式サイトからダウンロードしてインストールする。
VSCodeと同様に、必要があれば設定は適宜変更してください。

nodeとnpmがインストールされたことを確認する

コマンドプロンプトを起動し、「node --version」を実行する。
先程の「なんとなく確認」に使ったコマンドプロンプトでは確認できないため、新しくコマンドプロンプトを起動してください。

v20.18.0がインストールされました。
先にオプションの文字をタイプミスしているのは気にしない。

続けて同じコマンドプロンプトで「npm --version」を実行する。

10.8.2がインストールされました。

VSCodeを起動しReactプロジェクトの作成

VSCodeを起動し、ターミナルを開く

画像ではまたnodeの確認をしています。心配性ですね。

Reactプロジェクトを作成する

必要があればターミナルでcdコマンドを使用し、プロジェクトの作成をするフォルダに移動する。

ターミナルで「npx create-react-app hoge」を実行する。
アプリ名は任意です。

なんかエラーが出たが？

npmの実行に必要そうなファイルが見つからないようです。
npmのバージョンを上げればという提案がされていますが、先にPCの再起動を試してみます。

再起動したためコマンドをもう一度実行します。

ダメだったため素直に最初に提示されたnpmのアプデをしました。
(再起動後は何故かnoticeが表示されなかったためアプデコマンドは手打ちでした)

npmのアップデート後、もう一度プロジェクトを作成

提案された「npm install -g npm@10.9.0」を実行後、再び「npx create-react-app hoge」を実行します。
(npmのアプデのバージョンは表示された通知をもとに適宜変更してください)

確認が始まったのでプロジェクトの作成に成功したようです。
「y」を入力後、Enterを押して少し待ちます。

プロジェクトの作成が完了しました。

プロジェクトの実行

VSCodeのターミナルで「cd hoge」を実行し、プロジェクトフォルダに移動します。
アプリ名の部分は適宜変更してください。
移動後、「npm start」を実行します。

無事アプリが立ち上がるとブラウザが起動し、ページが表示されます。
ページの画像は省略します。

あとはいつものようにアプリを構築していきましょう。

余談

インストール時の設定は何も変えてないのにエラーが出たのは何故なのか。
でもアプデして動いたからヨシ！

参考