@2ui/create-react-component 中文文档教程

Question

Generate React CLI

Why?

帮助加快 React 项目的生产率，并在每次要创建新组件时停止复制、粘贴和重命名文件。

一些注意事项：

• Now supports custom component types (read more). ????
• Now supports custom component templates (read more). ????
• Supports React TypeScript projects.
• Supports two different component testing libraries - Testing Library and Enzyme - that work with Jest. We assume that you have these libraries already configured in your React project.
• It follows grouping by feature because we believe when you look at a component, you should see all of its corresponding files (i.e., stylesheet, test, and component) under one folder with the feature name. We feel this approach provides a better developer experience.

You can run it using npx like this:

  npx generate-react-cli component Box

(npx 是 npm 5.2+ 自带的 package runner 工具)

Config File

当你第一次在你的项目中运行 GRC 时，它会问你一系列问题来为你的项目定制 cli需要（这将创建一个“generate-react-cli.json”配置文件）。

Example of the generate-react-cli.json config file:

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

Generate Components

  npx generate-react-cli component Box

此命令将在您的默认目录（例如 src/components）及其相应文件中创建一个文件夹，其中包含您的组件名称。

Example of the component files structure:

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

Options

您还可以使用一次性命令覆盖一些 GRC 组件配置规则。 例如，假设您在 component.default 属性中将 withTest 设置为 true。 您可以像这样覆盖它：

  npx generate-react-cli component Box --withTest=false

反之亦然，如果您已将 withTest 设置为 false，您可以这样做：

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

否则，如果您不传递任何选项，它将只使用您在 component.default 下的 GRC 配置文件中设置的默认值。

Options	Description	Value Type	Default Value
--path	Value of the path where you want the component to be generated in (e.g. src/components).	String	component.default.path
--type	You can pass a custom component type that you have configured in the GRC config file that has its own set of component config rules. Read more about custom component types.	String	component.default
--withLazy	Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables code splitting) with this component.	Boolean	component.default.withLazy
--withStory	Creates a corresponding (storybook) story file with this component.	Boolean	component.default.withStory
--withStyle	Creates a corresponding stylesheet file with this component.	Boolean	component.default.withStyle
--withTest	Creates a corresponding test file with this component.	Boolean	component.default.withTest

Custom component types:

默认情况下，GRC 在开箱即用地运行组件命令时将使用 component.default 配置规则。

如果您想生成具有自己的一组配置规则（例如，页面 或布局）的其他类型的组件怎么办？

您可以像这样扩展 generate-react-cli.json 配置文件来做到这一点。

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/components",
      "withLazy": false,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    },
    "page": {
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    },
    "layout": {
      "path": "src/layout",
      "withLazy": false,
      "withStory": false,
      "withStyle": false,
      "withTest": true
    }
  }
}

现在您可以像这样使用您的自定义组件类型生成一个组件：

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

  npx generate-react-cli component BoxLayout --type=layout

您还可以将相同的选项传递给您的自定义组件类型，就像您对默认组件类型所做的那样。

Custom component templates

你也可以创建自己的自定义模板，GRC 可以使用它来代替它自带的内置模板。 我们希望这将为您要生成的组件提供更大的灵活性。

有一个可选的 customTemplates 对象，您可以将其传递给 component.default 或 generate-react-cli.json配置文件。

Example of the customTemplates object:

"customTemplates": {
  "component": "templates/component.js",
  "lazy":  "templates/lazy.js",
  "story":  "templates/story.js",
  "style": "templates/style.scss",
  "test":  "templates/test.js"
},

键代表模板的类型，值是指向自定义模板在项目/系统中所在位置的路径。

Example of using the customTemplates object within your generate-react-cli.json config file:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "component": "templates/component/component.js",
        "style": "templates/component/style.scss",
        "test": "templates/component/test.js"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    },
    "page": {
      "customTemplates": {
        "test": "templates/page/test.js"
      },
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    }
  }
}

请注意，在 page.customTemplates 中，我们只指定了 test 自定义模板类型。 那是因为所有自定义模板类型都是可选的。 如果你不设置其他类型，GRC会默认使用它自带的内置模板。

Example of a custom component template file:

// templates/component/component.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;

重要 - 确保在模板中使用 TemplateName 关键字。 GRC 将使用此关键字将其替换为您的组件名称。

Example of a custom test template file:

// templates/component/test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TemplateName from './TemplateName';

it('It should mount', () => {
  const div = document.createElement('div');
  ReactDOM.render(<TemplateName />, div);
  ReactDOM.unmountComponentAtNode(div);
});

License

Generate React CLI 是开源软件获得麻省理工学院许可。