React JSX - 我们是否有任何支持使用 .jsx 文件扩展名创建组件的 cli？ [关闭]答案

【问题标题】：React JSX - Do we have any cli that supports components creation with .jsx file extension? [closed]React JSX - 我们是否有任何支持使用 .jsx 文件扩展名创建组件的 cli？ [关闭]
【发布时间】：2020-11-09 10:28:22
【问题描述】：

我创建了一个新的 react 应用程序，它带有初始代码。我只想通过带有 jsx 扩展的 CLI 创建 jsx 组件。我尝试使用命令 npx generate-react-cli component MainContainer 但它只生成 .js 文件。有什么办法吗？

【问题讨论】：

标签： javascript reactjs code-generation

【解决方案1】：

看看Hygen，它是一个代码生成器，你可以用它构建你自己的反应组件模板

这里还有一个图书馆，一切都已经解决了https://www.npmjs.com/package/hygen-react

【讨论】：

【解决方案2】：

generate-react-cli v5.1.0 现在支持通过custom component templates 进行自定义扩展。您现在应该能够在您的 generate-react-cli.json 配置文件中声明具有 jsx 扩展名的自定义组件模板。

示例：

generate-react-cli.json

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

templates/component/component.jsx

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;

【讨论】：