Automating React components creation, say hi to`mkcomponent`

I am a fan of automating trivial tasks when possible, this allows me to focus on the things that really matter, the linter is a good example of not having to think about a semicolon or unused variables because the machine has a better understanding of the resources used in my program.

While at Typeform, a colleague created a simple CLI tool to create React components, and for me was a great idea, around 15 Frontend engineers didn't have to think about how we created components at the company, because the tool created the folder structure, and the component with the style we had at the company.

The time I decided to create one

Because it was a private project I couldn't port it when I changed to Badi, and I thought it was a great idea to create a CLI tool because it will help me and I will learn how to create a REPL using node.

Requirements

• Intuitive (options that are easy to remember)
• Can create Function and Class components
• Opt-in styled-components and test file
• Configurable, using a package.json namespace

The interface

As used when creating a folder using the terminal mkdir, I thought that mkcomponent could be a good option.

The following options are in the first iteration:

• Component type: --func, --class, --pure
• Help: --help

Allow with some default conventions:

• pascal-case for the component name
• slug-case for folder and file names

And project-based options:

{
  "mkcomponent": {
    "withTest": false,
    "withStyled": false,
    "testSuffix": "test",
  }
}

The result

I decided to have a simple version I can start using it at badi. If you feel curious to try it, you can find it as react-mkcomponent, and here you can find the repository.

1. To install yarn global add react-mkcomponent or npm install -g react-mkcomponent
2. Open the folder you want to create component in and type mkcomponent component-name --func|--class|--pure
3. Voilà, you have a component!