CLI を使用して ReactJS でコンポーネントを生成する

1. generate-react-cli を使用して React プロジェクトのコンポーネントを生成する
2. Visual Studio Code 拡張機能を使用する

React Web アプリケーションは、多くの場合、複雑なコンポーネント ツリーで構成されています。 したがって、すべてのコンポーネントをプロジェクト フォルダーに格納するための整理された構造を持つことは有益です。

React アプリケーションを構築するための初期環境を生成するには、さまざまな方法があります。 最も簡単な方法は、Facebook の React チームによって開発された create-react-app を使用することです。

React 開発者は、コンポーネントを生成するために基本的なボイラープレート コードをコピー アンド ペーストする必要があることがよくあります。 ただし、必要なコードをすばやく生成するためのソリューションは多数あります。

generate-react-cli を使用して React プロジェクトのコンポーネントを生成する

このパッケージを使用すると、新しいコンポーネントを作成するときに定型コードをコピーして貼り付けるのに費やす時間を大幅に節約できます。

このパッケージをインストールし、コマンド ライン インターフェイスで次の基本コマンドを実行します。

npx generate-react-cli component SomeComponent

プロジェクトの種類に応じて、カスタム JavaScript、CSS、およびその他のファイルを含む SomeComponent という名前の新しいフォルダーが生成されます。

プロジェクトの構造は次のようになります。

|-- /src
    |-- /components
        |-- /SomeComponent
            |-- SomeComponent.js
            |-- SomeComponent.css
            |-- SomeComponent.test.js

初めてコンポーネントを生成するために generate-react-cli コマンドを使用すると、質問が表示されます。質問に答えると、プロジェクトの特定のタイプのファイルを取得できます。 たとえば、汎用 JavaScript の代わりに TypeScript ファイルが必要であることを指定できます。

すべての質問に回答すると、GRC は選択内容を保存する generate-react-cli.json ファイルを作成します。 コマンドはこのファイルをチェックして、デフォルトで生成するファイルのタイプを決定します。

このファイルに移動してオプションを変更し、generate-react-cli コマンドの機能を調整できます。

また、generate-react-cli コマンドを記述するときに 1 回限りの指示を追加することで、デフォルトの動作をオーバーライドできます。

1つのコンポーネントのストーリーブック ファイルも生成するとします。 これを行うには、次のコマンドを実行します。

npx generate-react-cli component Box --withStory=true

デフォルトでは、GRC はストーリーブックなしでコンポーネント ファイルを生成し続けます。 ただし、一度だけ、ストーリーブック ファイルも生成されます。

Visual Studio Code 拡張機能を使用する

より簡単な解決策は、Visual Studio Code で利用可能なコード拡張機能を使用することです。

コンポーネント用のフォルダーとファイルを手動で作成する必要がありますが、ショートカットを使用してボイラープレート コードを生成できます。

たとえば、この拡張機能 を使用すると、rcc と入力してタブを押すと、拡張機能が必要なコードを生成します。