React

1. ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

2. 左側のペインで、React アプリを選択します。

3. 右側のペインで：

   1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

   2. Node インタープリターフィールドに、使用するNode.jsインタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

   3. create-react-appリストから、npx create-react-appを選択します。

      あるいは、npmバージョン5.1以前の場合は、ターミナル（Alt+F12）で npm install --g create-react-app を実行して create-react-app パッケージを自分でインストールします。アプリケーションを作成するときは、create-react-app パッケージが保存されているフォルダーを選択してください。

4. オプション :
   JSXの代わりにTSXを使用するには、TypeScriptプロジェクトを作成するチェックボックスを選択します。WebStormは、アプリケーションの.tsxファイルとtsconfig.json 構成ファイルを生成します。

5. オプション :
   プロジェクトの生成中に、react-scripts(英語)の代わりに使用するカスタムパッケージを指定します。これは、react-scriptsからフォークされたパッケージの1つである可能性があります（たとえば、react-awesome-scripts(英語)、custom-react-scripts(英語)、react-scripts-ts(英語)など）。

6. 作成をクリックすると、WebStormは、必要なすべての構成ファイルを含むReact -specificプロジェクトを生成し、必要な依存関係をダウンロードします。WebStormは、アプリケーションを実行またはデバッグするためのデフォルト設定で、npmスタートおよびJavaScript デバッグ構成も作成します。

プロジェクトの依存関係をダウンロードするには、次のいずれかの操作を行います。

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install

• プロジェクトルートの実行 'npm install'ファイルのコンテキストメニューからpackage.jsonを選択します。

空のWebStormプロジェクトを作成するには

1. ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

2. 左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

空のプロジェクトにReactをインストールするには

1. Reactを使用する空のプロジェクトを開きます。

2. 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

   npm install --save react react-dom

   npm、pnpm、およびYarnの説明に従って、パッケージをNode.jsとNPMページにインストールすることもできます。

ReactプロジェクトにESLintをインストールして構成する

1. 組み込みターミナル（表示 | ツール・ウィンドウ | ターミナル）で、次のように入力します。

   npm install --save-dev eslint
npm install --save-dev eslint-plugin-react

2. ESLint構成ファイル.eslintrc.*をプロジェクトに追加します。これは、.eslintrc、.eslintrc.json、または.eslintrc.yamlファイル、またはサポートされている別の形式のファイルです。詳細については、ESLint公式Webサイト(英語)を参照してください。

3. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | コード品質ツール | ESLintに移動し、自動 ESLint 構成を選択します。WebStormは、プロジェクトのnode_modulesフォルダーでESLintを自動的に検索し、.eslintrc.*ファイルまたはpackage.jsonの eslintConfig プロパティのデフォルト構成を使用します。

   または、手動 ESLint 構成を選択して、カスタムESLintパッケージと構成を使用します。

   詳細はWebStormでのESLintのアクティブ化と構成を参照してください。

.eslintrc構造体の例 (react プラグイン付き ESLint 1.x)

1. ecmaFeatures オブジェクトに "jsx" = trueを追加します。ここでは、ES6クラス、モジュールなど、使用したい追加の言語機能を指定することもできます。

2. plugins オブジェクトに、reactを追加します。

3. rules オブジェクトには、有効にするESLintビルトインルール(英語)と、reactプラグインを介して利用可能なルール(英語)をリストできます。

   { "parser" : "babel-eslint", "env" : { "browser" : true } , "ecmaFeatures" : { "jsx" : true } , "plugins" : [ "react" ], "rules" : { "semi" : 2 } }

ESLint公式Webサイト(英語)からESLintおよび react プラグイン構成の詳細を学びましょう。

1. コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、またはコンテキストメニューからリファクタリング | 名前の変更を選択します。

2. Reactの命名規則(英語)に準拠した新しいコンポーネント名を指定します。

1. 抽出するコードを選択し、コンテキストメニューからリファクタリング | コンポーネントの抽出を選択します。

   または、メインメニューのリファクタリング | 抽出/紹介 | コンポーネントの抽出に移動するか、Ctrl+Alt+Shift+T を押してポップアップからコンポーネントの抽出を選択します。

2. 開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。

3. OKをクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。

4. オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。

5. オプション : WebStormが新しいコンポーネントに使用するコードテンプレートを変更します。設定/環境設定ダイアログ Ctrl+Alt+Sでエディター | ファイルおよびコード・テンプレートに移動し、コード タブを開き、必要に応じてApache Velocityテンプレート言語(英語)を使用してテンプレートを更新します。

• 変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューからリファクタリング | クラス・コンポーネントに変換を選択します。

• または、Ctrl+Alt+Shift+T を押して、ポップアップからクラス・コンポーネントに変換を選択します。

• 変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューからリファクタリング | 関数コンポーネントに変換を選択します。

• または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。

1. ツールバーのリストからnpm start run構成を選択し、リストの横にある をクリックします。

   または、ターミナル Alt+F12 で npm start を実行するか、npmツールウィンドウ （表示 | ツール・ウィンドウ | npm）で start タスクをダブルクリックします。

2. アプリケーションがコンパイルされ、Webpack開発サーバーの準備ができるまで待ちます。

   実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。デフォルトではhttp://localhost:3000/です。このリンクをクリックして、アプリケーションを表示します。

   

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

3. リストから自動生成されたアプリケーションのデバッグ構成を選択し、リストの横にある をクリックします。

   

localhostで実行されているアプリケーションをデバッグする

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされてWebpack開発サーバーの準備ができるまで待ちます。

3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。デフォルトではhttp://localhost:3000/です。 Ctrl+Shift を押したまま、このURLリンクをクリックします。WebStormは、タイプJavaScript デバッグの自動生成されたアプリケーションのデバッグ構成でデバッグセッションを開始します。

   

カスタムURLで実行されているアプリケーションをデバッグする

1. コードにブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされてWebpack開発サーバーの準備ができるまで待ちます。

3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されているURLが表示されます。このURLアドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。

4. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 構成の編集に移動し、をクリックして、リストからJavaScript デバッグ を選択します。実行/デバッグ構成: JavaScript デバッグダイアログで、保存したURLをURLフィールドに貼り付け、構成を保存します。

5. 新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある をクリックします。