npm包 generator-not-bad-react-component 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在React开发中，我们用到很多不同的React组件。为了更方便地创建和管理React组件，npm社区中出现了很多针对React组件的工具和库。其中一个很好的工具就是generator-not-bad-react-component。在这篇文章中，我们将深入探讨如何使用generator-not-bad-react-component创建React组件，并通过示例代码展示这个过程。

简介

generator-not-bad-react-component是一个通过Yeoman构建的生成器，可以让您快速创建可维护且易于扩展的React组件。它的主要特点包括：

快速创建React组件模板
命名规范性和组件文件结构的一致性
支持使用CSS模块化和SASS
快速测试React组件
自动化的代码生成和重构工具

使用这个生成器会让我们更加专注于编写业务逻辑，而不是手动编写组件样板文件。

安装

generator-not-bad-react-component需要全局安装Yeoman和generator-not-bad-react-component。如果您尚未安装这两个工具，请先按照以下步骤安装它们：

npm install -g yo
npm install -g generator-not-bad-react-component

使用

现在，我们可以开始创建React组件了。请按照以下步骤操作：

创建一个新的文件夹，并在其中打开命令行
运行yo not-bad-react-component命令，然后按照提示进行交互式设置
创建和编辑React组件源代码
运行测试和生成命令

让我们对每个步骤进行更详细的说明。

创建文件夹并打开命令行

首先，在任何位置创建一个新的文件夹，例如：

mkdir my-new-component
cd my-new-component

打开命令行，您的当前工作目录将是新的文件夹my-new-component。

运行生成器

现在，运行以下命令：

yo not-bad-react-component

这将启动生成器，并提示您提供有关新组件的信息。

首先，它要求您输入组件的名称。名称应该以大写字母开头，并且应该符合驼峰命名法。

接下来，它询问您是否要添加CSS模块化。您可以选择“是”或“否”。

如果您选择添加CSS模块化，则询问您是否要使用SASS。

最后，根据您提供的信息，生成器将为您生成一个基本的React组件模板。

编写React组件源代码

现在，您可以分别编辑组件的JavaScript和CSS文件。

在组件的JavaScript文件中，您会看到一个带有render() 方法的React组件的基本框架，您可以根据需要进行修改。

在组件的CSS文件中，如果您选择了要添加CSS模块化，则将看到类似于如下的内容：

.MyComponent__wrapper___1W4LS {
  background-color: #FFF;
  color: #000;
}

在这里，.MyComponent 是您组件的名称，wrapper 是您组件的子元素或容器的名称。这个名称将被自动添加到相关的HTML元素上。对于一些像React Native这样没有HTML元素的平台，CSS模块化仅仅是分类组件代码。

运行测试和生成命令

在编辑完组件的JavaScript和CSS文件后，可以使用以下命令运行测试：

npm test

如果您之前选择了添加CSS模块化，则还可以使用以下命令生成CSS模块化的类名：

npm run css-modules

这将更新src/components/MyComponent/MyComponent.css.d.ts 文件，这个文件声明了您的样式外部 API。

示例代码

下面是使用generator-not-bad-react-component创建React组件的完整步骤，并在组件中添加一些基本内容的示例代码：

使用以下命令在命令行界面中运行yo not-bad-react-component 配置组件

yo not-bad-react-component

cd src/components/
cd {你的组件名称}

编辑文件以添加所需的JSX代码

在src/components/MyComponent/MyComponent.js中添加以下内容：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ --------------------

----- ----------- ------- --------- -
  -------- -
    ----- - ---- - - -----------
    ------ -
      ---- -----------------------------------------
        ------ -------
      ------
    --
  -
-

--------------------- - -
  ----- -----------------
--

------------------------ - -
  ----- --------
--

------ ------- ------------

在src/components/MyComponent/MyComponent.css中添加以下内容：

.MyComponent__wrapper___1W4LS {
  background-color: #FFF;
  color: #000;
}

运行自动化测试和生成工具

在命令行界面中，运行以下两个命令：

npm test
npm run css-modules

如果测试和CSS模块化工具运行成功，则您的React组件已准备就绪，可以在您的应用程序中使用。

总结

在这篇文章中，我们学习了如何使用npm包generator-not-bad-react-component创建React组件。使用这个工具，您可以快速创建可维护和易于扩展的React组件。我们还使用了示例代码展示了generator-not-bad-react-component的用法示例。如果您在使用这个工具时遇到了任何问题，可以查看官方文档或在npm社区中寻求帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ae881e8991b448d88cd