How to generate react components from cli using plop

How to generate react components from cli using plop

In this tutorial, we are going to learn about generating new react components from the cli using plop.js.

In angular-cli we have a command to generate new components but in create-react-app, we didn’t have such a command to generate new components but plop.js offers us a way to generate components from the cli (command line interface).

Setting up the app

First, let’s create a new react app using create-react-app.

npx create-react-app my-app

Once the app is successfully created, now change your working directory by running below command.

cd my-app

Installing plop.js

Now install the plop.js by running below command.

npm i -D plop

Now open your my-app folder in your favorite code editor.

Creating plop configuration

create a plopfile.js in your root app folder and add the below code.

plopfile.js
module.exports = function (plop) {
    plop.setGenerator('component', {
        description: 'Creating new react components',
        prompts: [{
            type: 'list',
            name: "input",
            message: 'Choose your component',
            choices: ['class', 'functional'],
        },
        {
            type: "input",
            name: "name"
        }
        ],
        actions: function (data) {
            const actions = [];
      if (data.input === 'functional') {
            actions.push(
                {
                   type: 'add', //adding file to your propject
                   templateFile: 'plop-templates/functional-component.hbs',
                   path: 'src/{{pascalCase name}}.js' //component path
                }
            )
      } else {
          actions.push(
                 {
                   type: 'add',
                   templateFile: 'plop-templates/class-component.hbs',
                   path: 'src/{{pascalCase name}}.js'
                 }
             )
            }
            return actions;
        }
    });
};

In the above code, we have a prompts array with two objects which helps us to take an input from the cli and pass that data to actions function.

Inside the actions function, we have added a conditional to choose between functional or class component.

Creating plop-templates

Now we need to create a plop-templates so that plop.js generates the new components based on that template.

Inside your root app folder create a new folder called plop-templates and create two new files called class-component.hbs and functional-component.hbs then add the below code.

class-component.hbs
import React, { Component } from 'react';


class {{ pascalCase name }} extends Component{

    state = {

    }

render(){
    return (
        <div>
            {{ pascalCase name }}
        </div>
     );
 }
}

export default {{ pascalCase name }};
functional-component.hbs
import React from 'react';


function {{pascalCase name}}() {
  return (
    <div>
      {{pascalCase name}}
    </div>
  );
}

export default {{pascalCase name}};

Adding script to package.json

Now open your package.json file and add the below script to your scripts object.

"generate": "plop"

With this our plop setup is complete now open your terminal and run npm run generate.

It prompts a question with two options class or functional.

? Choose your component (Use arrow keys)
❯ class
  functional

On the next step, it will ask for a component name.

? Choose your component class
? name: Mycomponent

Type your component name and hit enter.

Now inside your src folder you will see a new component file called Mycomponent.js.

react-component-generated

Code repository