React component generator

July 4, 2017 | Javascript, Web Development

Someone recently asked me if there was a way to generate React components. While there are plenty of generators to create full React projects (such as using Yeoman or create-react-app), there aren’t any tools (that I’m aware of) for quickly building out a new, blank component.

This inspired my curiosity, so I spent the better part of an afternoon building out a Node CLI app to quickly generate components. The tool, react-gc, accepts one argument, the component name, but also has flags for additional options, including specifying the directory path ( if you don’t want to create the component in the current directory ), specifying whether the component is basic or stateful, and including the Redux function mapStateToProps and mapDispatchToProps.

I originally built the CLI using more of the Node fs-extra  API for reading, writing, and copying files using Promises instead of callbacks, but it seemed to be throwing a lot of errors. Aside from that, building the templates as strings in a JS file and exporting them to the CLI made it much easier to manipulate how the templates are built.

Check out the repository on Github here.

If you’re interested in building CLIs for Node, check out the tutorial I followed, written by Tim Pettersen.

Questions or comments? Leave ’em below or raise an issue on the repository!