Windows+Volta＋Reactプロジェクトを作成する

2022年1月1日時点のWindows10での情報です。
あけましておめでとうございます。

昨年はWindows+VoltaでAngularプロジェクトを作成しました。
Windows+Volta＋Angularプロジェクトを作成する（まとめ）

今回はWindows+Volta＋Reactプロジェクトを作成していきます。

なぜVoltaなのかはコチラ
WindowsでNode.jsバージョン管理ツールをどれにするか

VSCodeのインストール、Voltaのインストールはコチラ
Visual Studio Code のインストール
Node.jsバージョン管理 VoltaをWindowsにインストールする

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

まずはプロジェクト用の作業フォルダを作成し、VsCodeで起動します。
ターミナルウィンドウから、installコマンドでnode.jsをインストールします。
2022/01/01時点での推奨版16.13.1をインスールしました。

volta install node@16.13.1

次にReactプロジェクトを作成します。

npx create-react-app myapp

cdコマンドで、作成したプロジェクトに移動します。

cd myapp

voltaでNode.jsのバージョンを固定します。

volta pin node

package.jsonに以下のような、voltaの設定が追加されます。

package.json

"volta": {
   "node": "16.13.0",
}

以上でReactプロジェクトの作成は終了です。

動作確認してみます。
開発用の簡易サーバーでReactプロジェクトを起動します。

npm start --open

以下の画面が表示されれば成功です。

volta で pin した node のバージョンを上げる

2022/04/26 追記
node のバージョンを 16.14.2 に上げたのでその方法追記しておきます。
まず最新の node をインストールします。
2022/04/26 時点での最新16.14.2がインストールされます。
この時点では前のバージョンが pin 留めされていてるので package.json は変更されません。

volta install node

volta pin で node のバージョンを指定します。

volta pin node@16.14.2

package.json が変更されます。

package.json

"volta": {
   "node": "16.14.2",
}