React アプリケーションのリファクタリング
一般的な JetBrains Rider リファクタリングに加えて、React アプリケーションでは React コンポーネントに対して Renameを実行したり、 Extract Componentを利用して新しいコンポーネントを作成することもできます。
コンポーネントの名前を変更する
以下は、1 つのファイルで定義および使用されているコンポーネントの名前を変更する例です：
同じ方法で、1 つのファイルで定義され、その後名前付きエクスポートを使って別のファイルへインポートされたコンポーネントの名前も変更できます：
コンポーネント名内にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューから を選択します。
React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更する際、JetBrains Rider は（React useState フックでこの状態値を更新する）対応する setter 関数も名前変更するよう提案します。
状態値の名前の中にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューからのメインメニューから を選択します。
新しい値の名前を指定して、 Enter を押します。 フォーカスは setter に移動し、そこで値の新しい名前が提案されます。 Enter を押して、提案を受け入れます。
コンポーネントを抽出する
既存コンポーネントの render メソッドから JSX コードを抽出して、新しい React コンポーネントを生成できます。 新しいコンポーネントは関数またはクラスとして定義でき、詳細は React 公式サイトの Function and Class Components を参照してください。 JetBrains Rider を使って、新しいコンポーネントと必要なインポートをすべて別のファイルに移動することもできます。
抽出するコードを選択し、コンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押してポップアップから コンポーネントの抽出 を選択するか、メインメニューから を選択してください。
開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。 デフォルトでは、機能コンポーネントが作成されます。 新しいコンポーネントをクラスとして定義する場合は、 Class を選択します。
新しいコンポーネントと必要なインポートをすべて別のファイルに移動するには、 別のファイルに作成する チェックボックスを選択します。 デフォルトでは、新しいコンポーネントの名前を持つ新しいファイルが、現在のファイルと同じフォルダーに作成されます。 必要に応じて、 ターゲットファイル フィールドに別の名前を指定してください。
OK をクリックします。 JetBrains Rider は新しいコンポーネントを作成し、以前に選択したコード箇所の代わりにそのコンポーネントへの参照を配置します。
任意: JetBrains Rider が新規コンポーネントで使うコードテンプレートを変更できます。 設定 ダイアログ (Ctrl+Alt+S) で、 に移動し、 コード タブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
Convert a function to a class component
Convert to Class Componentリファクタリングを利用すると、JetBrains Rider は変換したい関数の名前で ES6 クラスを生成します。 このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。 React オフィシャル Web サイト(英語)の詳細を参照してください。
変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから クラスコンポーネントに変換 を選択します。
Convert a class to a functional component
Convert to Functional Componentリファクタリングを使用すると、JetBrains Rider は変換したいクラスの名前で関数を生成し、 render() メソッドの内容を関数本体に移動します。
変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから 関数コンポーネントに変換 を選択します。
React アプリケーションでの分割代入
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。 この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。
React クラスコンポーネントを使用する場合は、 オブジェクト / 配列の分割代入を導入するインテンションアクションの使用を検討してください。 JavaScript での構造化の詳細を参照してください。
