React

1. メインメニューから ファイル | 新規 | プロジェクト を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。

2. 新規プロジェクト ダイアログで、左側のペインで Vite を選択します。

3. ウィザードの右側で、プロジェクト名と作成先のフォルダーを指定します。

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

   React CLI. リストから、使用するジェネレーターを選択します。

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

   • webpack、Babel、ESLint を使用するように開発環境が事前構成されるので、 npx create-react-app を選択します。

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

   

5. オプション:

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

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

空の IntelliJ IDEA プロジェクトを作成する.

1. メインメニューから ファイル | 新規 | プロジェクト を選択するか、 ようこそ 画面の 新規プロジェクト ボタンをクリックします。

2. 新規プロジェクト ダイアログで、左側のペインで 新規プロジェクト を選択します。

3. 右側のペインで、 言語 領域の JavaScript を選択します。

4. 新しいプロジェクトに名前を付け、必要に応じてその場所を変更してから、 作成 をクリックします。

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

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

2. 組み込み ターミナル (Alt+F12) で次のように入力します。

   npm install --save react react-dom

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

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

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

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

  

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

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

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

  構造ビューの項目からソースコードにジャンプするには、 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 構成 を選択します。 IntelliJ IDEA は、プロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、 .eslintrc.* ファイルまたは package.json の eslintConfig プロパティからのデフォルト構成を使用します。

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

   詳細は IntelliJ IDEA での 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 プラグイン構成の詳細を学びましょう。