web-dev-qa-db-ja.com

Visual Studio 2017のReactプロジェクト

Visual Studio 2017で.NETアプリケーションと同じソリューションでReactアプリケーションを開発したい。

TypeScriptを使用しているので、ビルドをカスタマイズできるプロジェクトタイプが必要です（プロジェクトをWebパックするなど、標準のVisual Studio TypeScriptビルドでは不十分です）。

node.js開発者ツール をインストールしましたが、node.js固有のプロジェクト（開始時にnode.jsインスタンスを実行する）のみを作成でき、ビルドプロセスをカスタマイズできません。

どのプロジェクトタイプがこれに最適ですか？

javascriptvisual-studioreactjstypescriptvisual-studio-2017
42
James Monger

私は最近これをやったので、次のことをお勧めします。

  1. Visual Studio 2017で「空白」ソリューションプロジェクトを作成します。
  2. Visual Studioで通常行うように、.NETプロジェクトを追加/作成します。
  3. Reactプロジェクトを作成します。 Facebookの create-react-app を使用して、実際にReactプロジェクトを生成しました。これには、Webpack、Jest（テスト用）、yarn（パッケージ管理用）などの非常に優れた機能が組み込まれています。ただし、これらの詳細は「隠されている」ので、生成されたプロジェクトは非常に単純に見えます。ビルド/テストプロセスをさらに制御する必要がある場合docreate-react-app ejectコマンドを実行できます。ファイルをcreate-react-appに戻すことはできないため、これは「一方向」の操作であることに注意してください。明らかでない場合は、 node と yarn を個別にインストールする必要があります。

  4. TypeScriptも使用したいので、次のような react-scripts-ts スクリプトを使用する必要があります。

    create-react-app my-app --scripts-version=react-scripts-ts

    Microsoftは here を順を追って説明しています。

  5. トリッキーな部分は、生成されたReactプロジェクトをVisual Studioに取り込むことです。これを行うには、Visual Studioと共にインストールされる「Visual Studio Installer」から「Node.js development」モジュールをインストールします。残念ながら、Microsoftは空白または空のTypeScriptプロジェクトテンプレートを削除したようです（ here を参照）。

  6. Node.jsツールをインストールしたら、ソリューションにノードベースのプロジェクトを作成できます。 [ファイル]-> [新規]-> [プロジェクト...]-> [テンプレート]-> [他の言語]-> [TypeScript]左メニューナビゲーションから選択するものがいくつかあります。 「Blank Node.js Web Application」を選択しました。

  7. その後、create-react-appによって作成されたReactプロジェクトファイルをVisual Studioプロジェクトにコピーする必要があります。 Visual Studioでディレクトリを作成してプロジェクトファイルに追加し、生成されたフォルダーにファイルをコピーし、最後にVisual Studioのプロジェクトフォルダーに追加する方が簡単です。

  8. この時点で、package.jsonによって追加されたcreate-react-appファイル内のスクリプトを実行できます。これらはコマンドラインで実行することを好みますが、Mads Kristensenの「Task Runner Explorer」を使用してVisual Studioでも実行できます。

50
Henry Daehnke

もう1つの可能性は、 Visual Studio Code で react extension を使用することです。それはまさにあなたが求めていたものではありませんが、Visual StudioとReactの完全なサポートに似たルックアンドフィールが得られます。

2
user1934212