0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Windows11にReact環境を構築する

Posted at

環境

Windows 11
VSCode

Voltaインストール

まず、Node.jsのバージョン管理ツールVoltaをインストールします。

Voltaの公式サイトからWindowsのインストーラをダウンロードします。
https://volta.sh/

ダウンロードページに「Voltaの機能はシンボリックリンクの作成に依存しているため、開発者モードを有効にする(推奨)か、権限昇格してVoltaを実行してください(非推奨)」という旨の注記があったので、次の手順で開発者モードをオンにします。

Windowsのスタートメニューから「設定」-「プライバシーとセキュリティ」-「開発者向け」を開き、「開発者モード」をオンに変更。

image.png

先ほどダウンロードしたインストーラを実行します。
基本的に「次へ」で先に進めていくだけです。

これで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です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?