React アプリを作成する
ここでは 5 分から 10 分で Visual Studio 統合開発環境 (IDE) の概要を示し、簡単な React のフロントエンド Web アプリケーションを作成して実行します。
前提条件
次のものがインストールされていることを確認します。
- Visual Studio 2022 以降。 Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。
- Node.js に付属の npm (https://www.npmjs.com/)
- npx (https://www.npmjs.com/package/npx)
アプリを作成する
[スタート] ウィンドウ ([ファイル]>[スタート ウィンドウ]) で、[新しいプロジェクトの作成] を選びます。
上部の検索バーで React を検索し、お好みで [スタンドアロン JavaScript React プロジェクト] または [Standalone TypeScript React Project] (スタンドアロン TypeScript React プロジェクト) を選びます。
プロジェクトとソリューションに名前を付けます。
前に [スタンドアロン JavaScript React テンプレート] を選択した場合、[追加情報] ウィンドウが表示された場合は、 [Add integration for Empty ASP.NET Web API Project](空の ASP.NET Web API プロジェクトの統合を追加する) オプションを必ずオフにしてください。 このオプションでは、ASP.NET Core プロジェクトが追加された場合、ASP.NET Core プロジェクトでフックできるように、ファイルがお使いの React テンプレートに追加されます。
[作成] を選び、Visual Studio でプロジェクトが作成されるのを待ちます。
この時点で実行される create-react-app コマンドでは、npm install コマンドも実行されるので、React プロジェクトの作成には少し時間がかかることに注意してください。
プロジェクトのプロパティを表示する
既定のプロジェクト設定では、プロジェクトをビルドしてデバッグできます。 ただし、設定を変更する必要がある場合は、ソリューション エクスプローラーでプロジェクトを右クリックし、[プロパティ] を選択してから、[ビルド] または [デバッグ] セクションに移動してください。
Note
launch.json には、[デバッグ] ツール バーの [スタート] ボタンに関連付けられたスタートアップ設定が格納されます。 現時点で、launch.json は .vscode フォルダーの下に配置する必要があります。
プロジェクトをビルドする
[ビルド]>[ソリューションのビルド] の順に選択し、プロジェクトをビルドします。
プロジェクトを開始する
F5 キーを押すか、ウィンドウの上部にある [開始] ボタンを選択すると、次のようなコマンド プロンプトが表示されます:
- VITE v4.4.9 ready in 780 ms
Note
コンソールの出力でメッセージを確認します (Node.js のバージョンを更新するよう指示するメッセージなど)。
次に、基本の React アプリが表示されます。
次のステップ
ASP.NET Core 統合の場合: