Do this and stop wasting time creating React components

In this article, I will talk about Plop, which is a little tool that saves you time and helps your team build new files with consistency, as the documentation suggests.

The Common Challenge

Let's suppose that for the architecture I'm using, I'm going to create a component called Button. In this architecture, I will create a folder called Button/ and the following files:

• Button.tsx
• index.tsx
• styles.ts
• Button.test.tsx
• stories.tsx

And fill in a minimal amount of code in each of them to get started.

Doing all this takes a lot of time, right? 😭 Until now... Imagine doing this with one command.

The Ingenious Solution

With Plop, you'll automate all the entire file creation flow, you just need to create some configuration. Let's do this.

For this example, we'll focus on creating a React component, covering component and style files. However, you can adapt this workflow to other file patterns or extend it by including tests and stories for React components.

1. Installing Plop

Begin by installing Plop as a development dependency:

npm install --save-dev plop

2. Create a Plop Configuration

I recommend creating a folder called generators in the root directory and placing the plopfile.js inside it:

generators/
   plopfile.js
public/
src/
   components/

3. Initiating the Automation

With the plopfile created, we can start to create our generators:

module.exports = (plop) => {
    plop.setGenerator('component', {
        description: 'Create a component',
        prompts: [],
        actions: [] 
    });
};

In this configuration, you specify the generator name (in this case, 'component') and its associated configuration. The prompts will be the questions asked when you run the generator, and actions will define the steps to create the files.

Since we want to create a component, we need to get the component name, with this prompt:

module.exports = (plop) => {
  plop.setGenerator('component', {
    description: 'Create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'What is your component name?'
      }
    ],
    actions: []
  })
}

So you set the prompt type (input to collect data), the name (like a variable name to use in the future), and the message (the question).

4. Create the Templates

Templates serve as the initial code structure for your files.

For this, create a templates folder within the generators directory:

generators/
   templates/
      Component.tsx.hbs
      styles.ts.hbs
   plopfile.js
public/
src/
   components/

Next, I will create two files: Component.tsx.hbs and styles.ts.hbs.

Component.tsx.hbs:

import * as S from './styles'

const {{pascalCase name}} = () => (
  <S.Wrapper>
    <h1>{{pascalCase name}}</h1>
  </S.Wrapper>
)

export default {{pascalCase name}}

You can notice that we use the {{}} syntax to define what will be dynamic in the file. Here, the component name (collected through the prompt) is used for variable names, component titles, and exports.

styles.ts.hbs:

import styled from 'styled-components'

export const Wrapper = styled.main``

5. Completing the Automation

Now, we just need to create the actions, right? So let's do this!

module.exports = (plop) => {
  plop.setGenerator('component', {
    description: 'Create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'What is your component name?'
      }
    ],
    actions: [
      {
        type: 'add',
        path: '../src/components/{{pascalCase name}}/index.tsx',
        templateFile: 'templates/Component.tsx.hbs'
      },
      {
        type: 'add',
        path: '../src/components/{{pascalCase name}}/styles.ts',
        templateFile: 'templates/styles.ts.hbs'
      }
    ]
  })
}

And, finally, we create the actions: it's defined by type (add a file in this case), the path to the new file, and the template we created.

6. Create a Convenient Script (Optional, but Recommended)

Within your package.json file, you can create a script to generate a new component:

"scripts": {
    "generate": "npx plop --plopfile generators/plopfile.js",
  },

Now, whenever you need to create a new component, simply run:

npm run generate

Using This Mindblowing Tool

Running npm run generate in the terminal, I get this result:

In VSCode:

Conclusion

So why not give Plop a try? Start automating your file creation process today and experience the benefits of a more efficient and consistent development workflow.

Comments

[Kevin Beltrão]

Amazing tool! Good article.