DEV Community

Cover image for Meet Agrippa, the React CLI for component generation
Nitzan Hen
Nitzan Hen

Posted on • Updated on

Meet Agrippa, the React CLI for component generation

Finally, after over two years of writing the boilerplate of React components by hand, I'd decided to make snippets for them. However, I find myself working in quite a number of different environments (Typescript or JavaScript, different styling solutions, etc.), and it quickly became apparent that to accommodate for each and every reasonable combination, I'd be writing at least as much boilerplate as I'd sought to avoid.

To this end (as well as the desire to do something cool), I wrote a small CLI - Agrippa.

As the documentation reads,

"[Agrippa's] purpose is to assist React developers in creating components without the boilerplate. It can easily generate templates for React components of different compositions (styling solutions, prop validations, etc.) and in different environments."

Agrippa's leading features are:
🚀 Ease of use in both new and existing projects.
🐙 Flexibility - agrippa strives to be useful in many different circumstances.
🧠 Smart defaults - agrippa can detect and set defaults based on your environment's configuration, with no extra steps.
⚙️ Configurability - by using a plain old JSON file.

Usage

To get started with Agrippa, install it using npm i -g agrippa (or yarn global add agrippa).
Once installed, components can be generated using agrippa gen <name> [options]!

Some of the options supported by agrippa gen are:

  • --styling: which styling solution to use (e.g. CSS, SCSS, JSS, Material-UI).
  • --props: which prop validation/definition solution to use (e.g. Typescript interfaces, prop-types, JSDoc comments).
  • --children: whether the components is meant to have children or not.

Also, Agrippa automatically detects and sets other, important defaults for you, such as whether to use Typescript or Javascript, and whether to import React or not.

An exhaustive list of options and defaults, as well as more information, can be found in the GitHub repo or the npm page.

Community

My ambition is that Agrippa would become a tool that makes the lives of React developers easier, but perhaps more importantly one that they enjoy using. The tool's ease-of-use at the practical level is one aspect of that, but just as important is the cultivation of an active, positive community around it that developers feel welcome in.

Therefore, I invite you - yes, you - to become part of Agrippa's community. Your thoughts, suggestions and collaboration are most welcome.

Links: GitHub, npm.

Discussion (12)

Collapse
hannanel100 profile image
hannanel100

Looks really interesting, this is probably the only thing I liked in Angular and was missing in React. Will definitely try this out...

Collapse
nitzanhen profile image
Nitzan Hen Author

Thanks! I'm totally with you on that one - I found Angular's CLI really convenient, and thought React could use something something similar.
If you have any feedback or suggestions, I'd love to hear it!

Collapse
aramay profile image
Abid Ramay • Edited on

nice tool. QQ: How do I run this project on my local machine for development? I've forked and cloned, but how do I start the project?

Collapse
nitzanhen profile image
Nitzan Hen Author

Hi!
You don't even need to fork and clone the project to get started.
Simply open any terminal and type in npm install -g agrippa (You'll need Node.js installed, of course).
Once it finished downloading, you can start typing commands - See the GitHub section for usage instructions and options.

Collapse
aramay profile image
Abid Ramay

Hey. I understand that part of usage. What if I wanted to contribute? How do I do that? I didn't find any contribution.md file.

Thanks for following up.

Thread Thread
nitzanhen profile image
Nitzan Hen Author

Oh! sorry.
The project is still quite new, and I've yet to set all of these things up. I promise to get to them soon.

In the meantime, if you have anything specific in mind, feel free to open an issue on GitHub.

Collapse
henrikvtcodes profile image
Henrik VT

Looks awesome! You should put a #showdev tag on this post.

Collapse
nitzanhen profile image
Nitzan Hen Author

I didn't know about that tag, thanks a lot!

Collapse
swagwik profile image
Sattwik Sahu

Wow! That's pretty dope yo! Imma certainly give it a roll. Thanks for the info

Collapse
itaylisaey profile image
ItayLisaey

Definitely my new favorite when it comes to react libraries.
Thank you!

Collapse
fedeagripa profile image
fedeagripa

@nitzanhen Thank you so much for making this tribute!!!!!
You got my follow and definitely will use my own react cli now :)
Bests
Federico Agripa :)

Collapse
alon5451 profile image
alon5451

Sounds like an amazing tool, Can't wait to use it!