React

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

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

3. 右側のペインで:

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

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

   3. React CLI リストから、使用するジェネレーターを選択してください。

      • デフォルトの npx create-vite(英語) を受け入れると、開発環境が Vite を使用するように事前に構成されます。

      • npx create-react-app(英語) を選択すると、webpack、Babel、ESLint を使用するための開発環境が事前に設定されます。

      • 以前にダウンロードしたカスタムジェネレーターを使用するには、選択をクリックし、開いたダイアログでジェネレーターへのパスを指定します。

      

   4. オプション:

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

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

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

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

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

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

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

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

   npm install --save react react-dom

• 必要な省略形をエディターに入力し、Tab を押します。

• Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始してから、補完リストから選択します。

詳細は、ライブテンプレートを参照してください。

• 設定ダイアログ (Ctrl+Alt+S) で、エディターのライブテンプレートをクリックし、React ノードまたは React hooks ノードを展開します。

  

• 構造ツールウィンドウを開くには、Alt+7 を押すか、メインメニューの表示 | ツールウィンドウ | 構造に移動します。

• 構造ポップアップを開くには、Ctrl+F12 を押すか、メインメニューの移動 | ファイル構造に移動します。

• 構造ツールウィンドウと構造ポップアップは、アクティブなエディタータブ内のファイルと同期しています。構造ビュー内を移動すると、ファイル内の対応するコード要素がハイライト表示されます。また、ソースコード内の項目の名前を変更すると、対応するノードもそれに応じて更新されます。

  構造ビュー内の項目からソースコードに移動するには、F4 を押します。

ソースコードナビゲーション: ファイル構造の詳細を参照してください。

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

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

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

2. プロジェクトに ESLint 構成ファイルを追加します。

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, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }

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