😣 👳 🥐 Hygenを使用したReactコンポーネントの作成 🍵 🖇️ 🙀

自動コードジェネレータであるHygenを使用したことがありますか？まだの場合は、おそらく私たちの翻訳はあなたのための便利な新しいツールを開くでしょう。

Reactを使用して開発する場合、コンポーネントを構成するファイルの数が増えると、コンポーネントを手動で作成することはかなり困難になります（たとえば、ストーリーブックファイル、テストを含むファイル、CSSモジュール）。

次のように構成された1つのコンポーネントを想像してみてください

。HygenはNode.jsベースのコードジェネレータであり、インタラクティブコマンドで一般的なコードルーチンを自動化します。

この記事では、Hygenを使用してReactコンポーネントを効率的に作成する方法を学習します。

GitHubの最終的なコードベースは、このリンクから入手できます。

概要概要

Hygenをテストするために、次の手順でReactアプリを設定します。

Reactアプリを作成する
Hygenを構成する
テンプレートファイルを作成する
構成ファイルを作成する
package.jsonにスクリプトを追加します。

1.Reactアプリケーションを作成します

処理を高速化するために、 create-react-appを使用してReactアプリを作成します。

npx create-react-app hygen-app --template typescript

インストールしたら、次のコマンドを実行して開発サーバーを起動できます。

yarn start

その後、ウェルカムページが表示されます。2。Hygenの構成次に、

Hygen

をインストールして構成します。

Hygenをインストールするには：

yarn add -D hygen

次のステップ：Reactコンポーネントを作成するためのテンプレートファイルを作成します。

デフォルトのHygenは、プロジェクトフォルダの任意のレベルでフォルダ_templatesを選択して、テンプレートファイルをダウンロードします。

この記事では、独自のフォルダーを追加します。これを行うには、プロジェクトルートに.hygen.jsを追加します。

module.exports = {
  templates: `${__dirname}/.hygen`,
}

これにより、デフォルトのパス（ _templates）が.hygenフォルダーに置き換えられます。

そして、新しい/コンポーネントを.hygenフォルダーに追加します。

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

3.テンプレートファイルを作成します

Hygenを構成したので、次のテンプレートファイルを作成します。

index.ts
Reactコンポーネント
テストファイル
ストーリーブックファイル
CSSモジュール

index.ts

まず、フォルダのすべての依存関係をエクスポートするindex.tsのテンプレートを作成します。 index.tsx.ejs.tを .hygen / new / componentに

追加します。

---
to: <%= absPath %>/index.tsx
---
export * from './<%= component_name %>';

Hygenは、フロントマターをメタデータテンプレートとして使用し、ボディのEJSエンジンを使用します。

ヘッダーには、ファイルの出力パスに使用されるtoプロパティを配置します。ドキュメントで

すべてのプロパティを確認できます。

<％=％AbsPath> -このタグ EJSは、テンプレートの値を表示します。

この場合、src /コンポーネント/アトム/ボタンをabsPath変数に割り当てると、パスは src /コンポーネント/アトム/ボタン/index.tsxになります。

変数を渡すには、カスタマイズ用のindex.jsを作成する必要があります。これを見ていきます。後で、構成ファイルにセクションを作成します。

コンポーネントを反応させる

次に、Reactコンポーネントのテンプレートを作成します。 component.tsx.ejs.tを .hygen / new / componentに

追加します。

---
to: <%= absPath %>/<%= component_name %>.tsx
---
import React from 'react';
import styles from './style.module.css';

type Props = {};

export const <%= component_name %>: React.FC<Props> = (props) => {
  return <div className={styles.container} data-testid="test" />;
};

テストファイル

次に、テストファイルのテンプレートを作成します。 test.tsx.ejs.tを .hygen / new / componentに

追加します。

---
to: <%= absPath %>/__tests__/<%= component_name %>.test.tsx
---
import React from 'react';
import { render, screen } from '@testing-library/react';
import { <%= component_name %> } from '../';

test('renders component successfully', () => {
  render(<<%= component_name %>  />);
  const element = screen.getByTestId(/test/i);
  expect(element).toBeInTheDocument();
});

ストーリーブックファイル

このステップでは、ストーリーブックファイルのテンプレートを作成します。 stories.tsx.ejs.tを .hygen / new / componentに

追加します：

---
to: <%= absPath %>/<%= component_name %>.stories.tsx
---
import React from 'react';
import { <%= component_name %> } from './';
import { Story, Meta } from '@storybook/react/types-6-0';

type Props = React.ComponentProps<typeof <%= component_name %>>

const csf: Meta = {
  title: '<%= category %>/<%= component_name %>',
}

const Template: Story<Props> = (args) => <<%= component_name %> {...args} />;

export const c1 = Template.bind({});
c1.storyName = 'default'

export default csf

CSSモジュール

CSSモジュールのテンプレートを作成しましょう。 style.module.css.ejs.tを .hygen / new / componentに

追加します。

---
to: <%= absPath %>/style.module.css
---
.container {}

4.構成ファイルを作成します

すべてのテンプレートファイルを構成したので、Hygenの構成ファイルを作成します。 index.jsを .hygen / new / componentに

追加しましょう：

module.exports = {
  prompt: ({ inquirer }) => {
    const questions = [
      {
        type: 'select',
        name: 'category',
        message: 'Which Atomic design level?',
        choices: ['atoms', 'molecules', 'organisms', 'templates', 'pages']
      },
      {
        type: 'input',
        name: 'component_name',
        message: 'What is the component name?'
      },
      {
        type: 'input',
        name: 'dir',
        message: 'Where is the directory(Optional)',
      },
    ]
    return inquirer
      .prompt(questions)
      .then(answers => {
        const { category, component_name, dir } = answers
        const path = `${category}/${ dir ? `${dir}/` : `` }${component_name}`
        const absPath = `src/components/${path}`
        return { ...answers, path, absPath, category }
      })
  }
}

これは、起動時にいくつかの質問をするインタラクティブプロンプトの構成ファイルです。このファイルで好きなようにカスタマイズできます。

プロンプトは応答データを受信して返します。上で書いたように、それらはEJSテンプレートファイルで使用されます。

この場合、answers、 path、 absPath、および categoryがEJSに渡されます。 GitHubの

詳細な説明。

5.追加のスクリプトpackage.json

Hygenを実行する準備ができたので、package.jsonにスクリプトを追加します。

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",

  "new:component": "hygen new component" // Add here
},

Hygenは自動的にフォルダ構造をチェックして表示します。この場合、フォルダ構造に従って新しいコンポーネントを渡す必要があります。すばらしい、試してみましょう。 Buttonコンポーネントを作成しましょう：

.hygen
      

        
        
        
      

     └── new
      

        
        
        
      

         └── component

yarn new:component

質問の解決に役立つインタラクティブなヒントが表示されます。

これらのファイルはsrc / componentsフォルダーに生成されています。

├── components
      

        
        
        
      

     │   └── atoms
      

        
        
        
      

     │       └── Button
      

        
        
        
      

     │           ├── Button.stories.tsx
      

        
        
        
      

     │           ├── Button.tsx
      

        
        
        
      

     │           ├── __tests__
      

        
        
        
      

     │           │   └── Button.test.tsx
      

        
        
        
      

     │           ├── index.tsx
      

        
        
        
      

     │           └── style.module.css

結論

それで全部です！Hygenを使用してReact開発タスクを自動化する方法を見てきました。もちろん、Vue.jsまたはAngularを使用して他のプロジェクトにも適用できます。

Hygenは非常に柔軟性があるため、ニーズに合わせてヒントやテンプレートをカスタマイズできます。

したがって、最終的なコードベースはここから入手できます。ストーリーブックの設定も含まれています。

この記事がインスピレーションを見つけるのに役立つことを願っています。幸運を！

Hygenを使用したReactコンポーネントの作成