Generate React Components with Plop.js

Automating React Component Generation with Plop.js

As developers, we often find ourselves copying and pasting old components as templates for new ones. This can be frustrating, especially when working with frameworks like Angular that have built-in CLI tools for generating components. In this article, we’ll explore how to use Plop.js to create a custom React component generator.

What is Plop.js?

Plop.js is a library that allows you to define parameterized code templates and inject them into your source code to generate boilerplate code. It provides a high-level API and is highly customizable, making it perfect for generating React components.

Setting Up Plop.js

To get started with Plop.js, we need to create a new React app and install the Plop.js library. We’ll also create a plopfile.js file to configure our generator.

bash
npm init react-app my-app
cd my-app
npm install plop


Configuring Plop.js

In our plopfile.js file, we’ll define a generator for creating React components. We’ll prompt the user for a component name and use that to generate a new component directory with a test file, style file, and index file.

javascript
module.exports = function(plop) {
plop.setGenerator('component', {
description: 'Create a new React component',
prompts: [
{
type: 'input',
name: 'name',
message: 'What is the name of your component?',
},
],
actions: [
{
type: 'add',
path: 'src/components/{{pascalCase name}}/index.js',
templateFile: 'plop-templates/component/index.js.hbs',
},
{
type: 'add',
path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.js',
templateFile: 'plop-templates/component/component.js.hbs',
},
{
type: 'add',
path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
templateFile: 'plop-templates/component/test.js.hbs',
},
{
type: 'add',
path: 'src/components/{{pascalCase name}}/styles.css',
templateFile: 'plop-templates/component/styles.css.hbs',
},
],
});
};


Using Plop.js

With our generator configured, we can now use Plop.js to create a new React component. Simply run the following command in your terminal:

bash
npx plop component


You’ll be prompted to enter a component name, and Plop.js will generate a new component directory with all the necessary files.

Extending Plop.js

Plop.js is highly customizable, and you can extend it to generate other types of files or components. Some ideas for extending Plop.js include:

• Adding a prompt to specify whether a component should be a class or functional component
• Adding a prompt to dynamically input a directory where a component should be created
• Validating user input (e.g. minimum length requirement)
• Populating propTypes and/or defaultProps via prompts
• Adding generators for action types, actions, and reducers

By using Plop.js to automate React component generation, you can save time and improve your development workflow. Give it a try and see how it can benefit your project!