generate-react-cli で react componentを生成する

generate-react-cli とは

reactコンポーネントを生成してくれるCLIツール。
rails g ~~ や ng g ~~ みたいなジェネレーター。

https://github.com/arminbro/generate-react-cli#readme

使い方

以下のコマンドを実行するといろいろ聞かれる。

npx generate-react-cli component Box

? Does this project use TypeScript? Yes
? Does this project use CSS modules? Yes
? Does this project use a CSS Preprocessor? scss
? What testing library does your project use? None
? Set the default path directory to where your components will be generated in? src/components
? Would you like to create a corresponding stylesheet file with each component you generate? Yes
? Would you like to create a corresponding test file with each component you generate? Yes
? Would you like to create a corresponding story with each component you generate? Yes
? Would you like to create a corresponding lazy file (a file that lazy-loads your component out o
f the box and enables code splitting: https://reactjs.org/docs/code-splitting.html#code-splitting
) with each component you generate? Yes

ここで聞かれた設定が　generate-react-cli.json に保存されている。

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "None",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": true,
      "withLazy": true
    }
  }
}

カスタムタイプの設定

上記の設定ファイルに以下を記述して実行する時に指定するとそれに合わせたコンポーネントを生成することが出来る。

{
  ...
  "component": {
    ...
    "page": {
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    },
    ...
  }
}

npx generate-react-cli component HomePage --type=page

他に渡せるオプションはこれら.

カスタムテンプレートの設定

テンプレートを設定することで自前のスタイルで生成することが可能になる。

// templates/component/TemplateName.js

import React from 'react';
import styles from './TemplateName.module.css';

const TemplateName = () => (
  <div className={styles.TemplateName} data-testid="TemplateName">
    <h1>TemplateName component</h1>
  </div>
);

export default TemplateName;

generate-react-cli.json 内で上記テンプレートを使用するよう指定する。

{
  ...
  "component": {
    "default": {
      "customTemplates": {
        "component": "templates/component/TemplateName.js"
      },
      ...
    },
    ...
  }
  ...
}