DEV Community

Cover image for CLI for React?! Yes Please!
Stephen Belovarich
Stephen Belovarich

Posted on • Updated on

CLI for React?! Yes Please!

Lately I’ve been getting into React development, just because I felt the need to dive in and see what all the fuss is about. I wanted to learn patterns for developing Components, incorporating state, reducers, and implementing hooks. I wanted to figure out how to server-side render, lazyload components, include i18n and my favorite CSS tools.

That’s all well and good, except learning can sure be repetitive.

For every component I found myself making three files. I would go through the motions of extending React.Component, adding a style file and then importing it, followed up with coding boilerplate for unit tests. What if I could combine learning all these patterns and build a tool that makes it easy to scaffold files? I could spend more time actually learning more important React syntax.

rctr was born

So I wrote a little node script and published it on npm. All rctr v1.0.0 did was clone some starter code that allows you to build React with Parcel out of the box. Subsequent releases made the experience better.

rctr comes with the rx cli. You can use the cli to scaffold a new app.

rx new my-app
Enter fullscreen mode Exit fullscreen mode

The new command initializes your project with a package.json and fresh git repository. Right now you get the whole enchilada: SSR, lazyloading, i18n, TypeScript, SCSS, PostCSS, Prettier, Jest/Enzyme and more. In the future it could be possible to swap out SCSS for styled-components or move from Enzyme to react-testing-library. For now, the CLI just does one thing when scaffolding. In the future there could be options.

Parcel is going to make that exercise very simple compared to Webpack. Parcel is zero configuration, so in order to support different scaffolds all we would need to do is figure out how to swap out configuration files for the tool you wish to use and ensure the proper packages get installed.

With the scaffold out of the way, I set my eyes on code generation. While there are tools out there for generating code snippets, I find a CLI tool for scaffolding files to be an amazing experience.

Want a new file with a component called AboutHeader?

rx generate component AboutHeader
Enter fullscreen mode Exit fullscreen mode

How about a view called AboutPage that has styles imported, a test, is lazyloaded and mapped to a route? A “view” here is just a component, with imported styles. In this context, views can be server-side rendered, lazyloaded and/or mapped to routes.

rx g v AboutPage —routing —lazy
Enter fullscreen mode Exit fullscreen mode

If you come from an Angular background you may see a stark similarity between this CLI command and ng generate. That was intentional. My experience with the Angular CLI has only been fantastic. When moving to React I wanted a similar experience. This CLI in contrast isn’t tightly coupled to build tooling. Parcel is used by default but the CLI knows nothing about Parcel. I plan to keep it agnostic.

Today version 1.0.4 was released with support for generators.

Installing the cli is easy!

npm i -g rctr
Enter fullscreen mode Exit fullscreen mode

Then start generating code in any directory of your rctr project.

Have a different opinion of how React components should be generated? Maybe we could come up with a way for engineers to specify custom templates. Right now there are several patterns that can be generated. Just take a look at the project README.

The rctr cli was only released a couple weeks ago and already has about 100 weekly downloads on npm. I’m fairly encouraged by those numbers and plan on adding more features soon.

Check out the rctr project on Github.

Now back to actually solving some problems...

Top comments (2)

emrivero profile image
Emilio Martínez Rivero

Awesome! It was necessary. Good luck and thanks!

banjoanton profile image
Anton Ödman

Great idea and neat implementation, good luck with the development! 👏