如何从终端生成React组件

react 循环生成组件

本月您还有2个免费故事。

注册并免费获得额外的一个。

(You have 2 free stories left this month.

Sign up and get an extra one for free.

)

如何从终端生成React组件 (How to Generate React Components from your Terminal)

And speed up your workflow

并加快您的工作流程

Photo by Bernard Hermant on Unsplash

照片由 Bernard Hermant在 Unsplash上 拍摄

Adding a new component can be a cumbersome task, especially if you’re writing tests and using something like storybook. A file structure for a single component could potentially look like this:

添加新组件可能是一项繁琐的任务，尤其是在编写测​​试并使用故事书之类的东西时。 单个组件的文件结构可能看起来像这样：

You can save a lot of time by writing a node script that will take whatever component templates you need and generate these files, rather than writing them all by hand every time.

您可以编写节点脚本来节省大量时间，该脚本将采用所需的任何组件模板并生成这些文件，而不是每次都手动编写它们。

There are currently npm packages available that you can download and try out, but the added benefit of this approach is that you can tweak the component templates to fit you and your teams needs on a project by project basis.

当前可以下载并试用npm软件包，但是这种方法的另一个好处是，您可以根据项目的不同来调整组件模板以适合您和团队的需求。

你需要什么 (What You’ll Need)

1. File template functions
   文件模板功能
2. A node script to create the files and populates the files
   用于创建文件并填充文件的节点脚本

3. Logic in the script to update the components/index.ts file (optional)

   脚本中的逻辑更新 components/index.ts 文件(可选)

4. An npm script to run the node script (optional)
   一个npm脚本来运行节点脚本(可选)

Let’s start by creating a directory in the root folder of our project to house the template functions and the logic.

让我们从在项目的根文件夹中创建一个目录开始，以容纳模板函数和逻辑。

take .generate_component
touch component_templates.js
touch index.js

组件模板 (Component Templates)

An example of the structure of a basic component that my team uses looks like this:

我的团队使用的基本组件的结构示例如下所示：

components/Navbar/Navbar.tsx

组件/Navbar/Navbar.tsx

In our component_templates.js file, we can add a function to generate the component template like so.

在我们的component_templates.js文件中，我们可以像这样添加一个函数来生成组件模板。

.generate_component/component_templates.js

.generate_component / component_templates.js

The function will receive the name argument when running the node script.

该函数将收到name 运行节点脚本时的参数。

Depending on what files you want to include your folder structure, you can add additional component templates. In my case, I want to add the following template functions:

根据要包括文件夹结构的文件，可以添加其他组件模板。 就我而言，我想添加以下模板函数：

• component

  零件

• story

  故事

• test

  测试

• barrel

  桶

The complete file for that folder structure would look like this:

该文件夹结构的完整文件如下所示：

.generate_component/component_templates.js

.generate_component / component_templates.js

节点脚本 (Node Script)

The tasks completed by the node script will be:

节点脚本完成的任务将是：

1. Accept an argument (for the component name) from the terminal when running the script
   运行脚本时从终端接受一个参数(用于组件名称)
2. Create a Folder for the new component
   为新组件创建一个文件夹
3. Add desired files to the folder
   将所需文件添加到文件夹

4. Read from the components/index.ts file and insert new component into it (optional)*

   从components/index.ts 文件并将新组件插入其中(可选)*

* This is assuming that you use a barrel file to export all the components in your components folder . Here is an example of the barrel file that we use for reference:

*这是假设您使用桶文件导出Components文件夹中的所有组件。 这是我们用于参考的桶文件的示例：

components/index.js

组件/ index.js

If you don’t follow the pattern of including the newly generated component in components/index.ts, then I would suggest removing that block of code in the below example following the comment that says “Optional”.

如果您不遵循在components/index.ts中包括新生成的组件的模式，那么我建议在下面的示例中，在标有“ Optional”的注释之后删除该代码块。

.generate_component/index.js

.generate_component / index.js

Now that the script and template functions in place, you can run the script by entering the following command in your terminal:

现在脚本和模板功能已经到位，您可以通过在终端中输入以下命令来运行脚本：

node ./generate_component ComponentName

Alternatively, if you don’t want to run the node script directly, you can write an npm script to run the command for you in your package.json file.

另外，如果您不想直接运行节点脚本，则可以在package.json编写一个npm脚本来为您运行命令 文件。

Here’s an example of what that could look like:

这是一个看起来像的例子：

"scripts": {
  "generate-component": "node .generate_component $1"
}

The $1 in the above script will be whatever component name you pass into the npm script when running it.

$1 在上面的脚本中，它将是您在运行npm脚本时传递给它的任何组件名称。

Now that you’ve written your npm script, you can run the following command in your terminal:

现在，您已经编写了npm脚本，您可以在终端中运行以下命令：

npm run generate-component ComponentName

If you executed everything correctly, a new folder should appear in the components folder and added to your components/index.ts file.

如果正确执行了所有操作，则新文件夹应该出现在components文件夹中，并将其添加到components/index.ts文件中。

I hope that you can incorporate this pattern into your workflow and save yourself a ton of time!

希望您可以将此模式整合到您的工作流程中，并节省大量时间！

翻译自: https://levelup.gitconnected.com/how-to-generate-react-components-from-your-terminal-a27741a5b862

react 循环生成组件