Genponent - a React component generator written in Go


3 min read

After a while of working with React, you'll start to notice that creating new components always requires the same sort of boilerplate code.

A new folder, a file for your component, a style file... Props, if you're using TS.

And where repetitive actions that need doing on your computer can be found, so can an opportunity to automate it.

This is genponent. It generates components for React. Apparently this is quite like something Angular can do!

Originally I whipped up a quick program that only accepted one argument - the component name - and produced the component folder.

More recently, I dug into Go's flag library, and filled genponent out with optional features.

It turns out the flag library makes setting up flags very easy:

var javascriptFlag = flag.Bool("j", false, "Generate a JavaScript component instead of TypeScript")
var cssFlag = flag.Bool("c", false, "Generate a component with CSS instead of SCSS")
var noStyleFlag = flag.Bool("s", false, "Generate a component with no style")
var noPropsFlag = flag.Bool("p", false, "Generate a component without a Props declaration")

By filling out these variable declarations, and including a usage string, you're actually also setting up the --help flag. It also makes getting the rest of the args easy: remainingArgs := flag.Args() Even better, really, since system arguments like this are always parsed into an array, so that makes getting genponent to generate multiple components very easy!

Most recently, I refactored it to generate what I found out is called a 'barrel file'. Now, when you use genponent, with component name $name, you receive:

  • A folder called $name,
  • A file called $name, containing a React functional component called $name,
  • A sass file, $name.module.scss,
  • An index file, importing the component and exporting it as default.

The React component will look like this:

import React from "react";

import styles from "./$name.module.scss";

interface Props {}

function $name({}: Props) {
  return <div className={styles.$name}></div>;

export default $name;

...with the matching class name in the sass file.

And options available are: -c using css, -j using javascript, -s using no style, and -p using no props.

For the time being, if you want to use it, you'll have to clone it and build it yourself. I will be adding built versions soon!

You'll want to add genponent to your PATH global variable, and if you're using linux or mac, you'll want to run sudo chmod +x genponent so it's executable.

Hope it's useful for you!

Still here? Wondering why I used Go? It's a very good point. I really like Go, so I wanted to make this in Go to get more practice. It would definitely suit being an NPM package... Maybe another time!