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' , templateFile : 'plop-templates/functional-component.hbs' , path : 'src/{{pascalCase name}}.js' } ) } 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.