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