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