React

始める前に

既存の React アプリケーションから始める

既存の React アプリケーションの開発を続けるには、JetBrains Rider で開き、必要な依存関係をダウンロードしてください。

コード補完

JetBrains Rider は、JavaScript コードで React API や JSX のコード補完を提供します。 コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、 React イベント(英語) 、コンポーネントプロパティなどに対して機能します。 React オフィシャル Web サイト(英語)から詳細を参照してください。

React メソッドのコード補完と React 固有の属性を取得するには、プロジェクトのどこかに react.js ライブラリファイルが必要です。 通常、ライブラリはすでに node_modules フォルダーにあります。

完全な React メソッド、属性、イベント

デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。 例えば：

JSX タグ内では、JetBrains Rider は React 固有の属性 （className や classID など）や、 非 DOM 属性 （key や ref など）のコーディング支援を提供します。 さらに、自動補完は、プロジェクトの CSS ファイルで定義されているクラスの名前に対しても機能します。

onClick や onChange などのすべての React イベント(英語)は、波括弧 ={} または引用符 "" と一緒に自動的に補完することもできます。

デフォルトでは、波括弧が挿入されます。 JetBrains Rider で常に引用符を追加するか、 TypeScript 定義ファイル (d.ts) の型に基づいて引用符と中括弧を選択するかが可能です。 デフォルト設定を変更するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | コードスタイル | HTML に移動して、 JSX 属性の追加 リストから該当するオプションを選択します。

また、波括弧内の JavaScript 式の補完も可能です。 これは、定義したすべてのメソッドと関数に適用されます。

完全な HTML タグとコンポーネント名

JetBrains Rider は、JavaScript 内や他のコンポーネントのメソッドで定義した HTML タグやコンポーネント名に対するコード補完を提供します：

補完は、ES6 スタイル構文でインポートしたコンポーネントにも対応しています：

完全なコンポーネントプロパティ

JetBrains Rider は、 propTypes を使用して定義されたコンポーネントプロパティのコード補完を提供し、それらを解決して定義へのジャンプやプレビューを迅速に行えます：

コンポーネントの名前を自動補完すると、JetBrains Rider は必要なすべてのプロパティを自動的に追加します。 必要なプロパティの一部がコンポーネント使用時に不足している場合、JetBrains Rider はその旨を警告します。

機能コンポーネントに状態を追加する

JetBrains Rider は、特定の場所に未解決の参照を定義することで、関数型 React コンポーネントに useState フックを追加するクイックフィックスを提案します。 JetBrains Rider は、 useState フック用に import ステートメントを自動的に挿入します。 状態タイプは、参照が定義されている場所から推測されます。

props を追加

JetBrains Rider は、特定の場所で未解決の参照を定義することで、React コンポーネントに新しいプロパティを追加するクイックフィックスを提案します。

JetBrains Rider は、追加したプロパティを持つコンポーネントのコードを生成します。 プロパティの型は、対応する参照が定義されている場所から推論されます。

クイックフィックスはクラスベースのコンポーネントにも適用できます。 この場合、新しいプロパティが挿入された後、未解決の参照は this.props.${reference_name} に置き換えられます。

HTML 属性を JSX に転送する

クラス属性または on 系のイベントハンドラを含む HTML コードをコピーして JSX に貼り付けると、JetBrains Rider はこれらの属性を React 固有のものに自動的に置き換えます（className、 onClick、 onChange など）。

これは TSX でも機能します：

単一タグを含む HTML コードをコピーして JSX に貼り付けると、JetBrains Rider は各単一タグの末尾にスラッシュ / を自動で追加します。

HTML コードをそのまま JSX または TSX にコピーするには、 そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、 設定 ダイアログ (Ctrl+Alt+S) を開いて エディター | 一般 | 入力支援 | JavaScript の設定ページに移動し、 JSX ファイルにコードを貼り付ける際に HTML 単一タグを閉じる と JSX ファイルに貼り付ける際に HTML 属性の命名を変換する のチェックボックスをオフにします。

React コードスニペット

JetBrains Rider には、 React フック など React アプリでよく使われる様々なステートメントやコードブロックに展開できる 50 個以上のコードスニペットが用意されています。 以下の例は、 rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。

React ディレクティブ

JetBrains Rider は、ファイルの先頭および関数内で次の React ディレクティブ を認識してハイライトします：

• クライアントを使用する (英語)

• サーバーを使用 (英語)

• メモを使用する (英語)

• メモを使わない (英語)

JSX の Emmet

JetBrains Rider なら、HTML だけでなく特有の React の工夫を活用して JSX コードでも Emmet を使えます。 例: 略語 div.my-class は JSX では <div className=”my-class"></div> に展開されますが、HTML のように <div class=”my-class"></div> には展開されません。

React アプリケーションを移動する

基本ナビゲーションに加え、JetBrains Rider で React 固有のコード要素間も移動できます。

React アプリケーションをリントする

JavaScript および HTML 用のすべての JetBrains Rider 組み込み コードインスペクションは、JSX コードでも動作します。 JetBrains Rider は、未使用の変数や関数、終了タグやステートメントの欠落などがある場合に警告します。

一部のインスペクションでは JetBrains Rider がクイックフィックスを提供し、例えば不足しているメソッドの追加を提案します。 クイックフィックスのポップアップを表示するには、 Alt+Enter を押します。

インスペクションリストをカスタマイズするには、 設定 ダイアログ(Ctrl+Alt+S )を開き、エディター | インスペクション設定 に進み、不要なインスペクションを無効化または重要度レベルを変更します。

ESLint

組み込みのコードインスペクション提供に加え、JetBrains Rider は JSX コード用に ESLint などのリンターとも連携します。 ESLint は、プラグインで拡張できる幅広い lint ルールをもたらします。 JetBrains Rider は、入力中に ESLint が報告した警告やエラーをエディター内に表示します。 ESLint を使用すると、 JavaScript 標準スタイル(英語)を使用したり、 TypeScript コードをリントしたりすることもできます。

詳細については、 ESLint を参照してください。

ESLint に React JSX 構文を正しく認識させるには、 eslint-plugin-react プラグインが必要です。 このプラグインにより、たとえば React コンポーネントの表示名前が設定されていない場合や、危険な JSX プロパティが使用されている場合などに警告が表示されます。

React プロジェクトで ESLint をインストールして設定する

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

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

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

3. 設定 ダイアログ (Ctrl+Alt+S) で、 言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、 自動 ESLint 構成 を選択します。 JetBrains Rider はプロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、 .eslintrc.* ファイルまたは package.json の eslintConfig プロパティからデフォルト構成を使用します。

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

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

Webinar 録画: React + TypeScript + Rider の TDD

TypeScript を使用した React プロジェクトのために、ポールエブリットが Rider で生産性を高めるためのいくつかの重要なステップを示しているこの webinar の記録も見ることができます。

Webinar のアジェンダ:

• 2:00(英語) – プロジェクトの設定

• 10:10(英語) – ASP.NETCore プロジェクトの React

• 14:57(英語) – プロジェクトのクリーンアップ

• 22:42(英語) – テスト

• 37:26(英語) – テスト中のデバッグ

• 43:35(英語) – ブラウザーでのデバッグ

• 54:26(英語) – 残りのセクションの概要

リソース:

• この webinar のベースとなっている 12 部のチュートリアル

• ASP.NET Core SPA 開発経験(英語) – webinar 中に議論された ASP.NETCore テンプレートに関する情報

プロジェクト内で複数のフレームワークを使用する

場合によっては、React プロジェクト内で他のフレームワークを使用する必要があることもあります。

各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。 このファイルの設定は、デフォルトの構成を上書きします。

サンプル

さまざまなフォルダーで複数のフレームワークを利用しているプロジェクトがあると仮定します。

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }