環境
Windows 11
VSCode
Voltaインストール
まず、Node.jsのバージョン管理ツールVoltaをインストールします。
Voltaの公式サイトからWindowsのインストーラをダウンロードします。
https://volta.sh/
ダウンロードページに「Voltaの機能はシンボリックリンクの作成に依存しているため、開発者モードを有効にする(推奨)か、権限昇格してVoltaを実行してください(非推奨)」という旨の注記があったので、次の手順で開発者モードをオンにします。
Windowsのスタートメニューから「設定」-「プライバシーとセキュリティ」-「開発者向け」を開き、「開発者モード」をオンに変更。
先ほどダウンロードしたインストーラを実行します。
基本的に「次へ」で先に進めていくだけです。
これでVoltaのインストールは完了です。
試しにコマンドプロンプトからバージョン確認のコマンドを実行してみます。
> volta -v
1.0.8
ちゃんとバージョン番号が表示されました。
Node.jsをインストールする
VoltaでNode.jsをインストールします。
バージョンを指定しないと最新のLTSバージョンがインストールされます。
> volta install node
success: installed and set node@16.16.0 (with npm@8.11.0) as default
npmをインストールする
Voltaでnpmをインストールします。
> volta install npm
success: installed and set npm@8.14.0 as default
Voltaのインストール状況を確認する
volta list all
でインストール状況、現在のノードバージョンを確認できます。
> volta list all
⚡️ User toolchain:
Node runtimes:
v16.16.0 (default)
Package managers:
npm:
v8.14.0 (default)
Packages:
Reactプロジェクトを作成する。
Reactプロジェクトを作成するワークフォルダをVSCodeで開きます。
メニューの[ターミナル]-[新しいターミナル]で新しいターミナルを開きます。
ここではPowerShellでターミナルを開いてます。
下記コマンドを実行します。
npx create-react-app <Reactプロジェクト名>
ワークフォルダにReactプロジェクト名のフォルダが作成されます。
Reactプロジェクトを起動して動作確認をします。
cd <Reactプロジェクト名>
npm start --open
ブラウザで「http://localhost:3000 」が開かれて、Reactロゴが回転している画面が表示されていればOKです。