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 専用プロジェクトを生成し、必要な依存関係をダウンロードします。 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 フック ノードを展開します。

  

• 構造 ツールウィンドウを開くには、 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 プラグイン構成の詳細を学びましょう。