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.
Top comments (12)
Looks really interesting, this is probably the only thing I liked in Angular and was missing in React. Will definitely try this out...
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!
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?
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.
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.
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.
Wow! That's pretty dope yo! Imma certainly give it a roll. Thanks for the info
Definitely my new favorite when it comes to react libraries.
Thank you!
@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 :)
Looks awesome! You should put a #showdev tag on this post.
I didn't know about that tag, thanks a lot!
Sounds like an amazing tool, Can't wait to use it!