One weird trick to write the best React component you’ve ever written

Samir Talwar
Mar 20 · 3 min read

End clickbait.

At Prodo, we believe that software development isn’t about managing imports, configuring Webpack, or maintaining Kubernetes clusters.

We believe that allowing developers to focus on high-level tasks allows them to be more productive, more connected, and happier.

There are two kinds of high-level coding work:

  1. Composition: the science of creating a solution to a problem.
  2. Connection: the art of binding together and exposing your compositions in a way that provides value to your consumers.

And then there’s the low-level stuff: configuring our build tools, stepping through a broken component with the debugger, dealing with merge conflicts… you know, the stuff we spend way too much of our time doing.

We’ve been thinking for a long time about how to take away the gruntwork in front-end software development, and are delighted to introduce our new product, Prodo, online now at https://prodo.dev/.

Tom made a to-do list. Go fork it!

Focus

Prodo is designed to make it simple to create and share React components with your friends, colleagues, and everyone else. It lets you focus on making something wonderful.

It allows you to follow a simple workflow:

First of all, Compose. Author your component, specifying examples as you go to help you ensure you’re building the right thing.

I miss the ’90s. You can edit this component too!

Secondly, Verify. Continuously ensure that everything’s working. Right now this is one simple step: glance at the examples and make sure they’re still looking good. In the future, we’re going to help automate this.

That line break’s not supposed to be there!

Thirdly, Publish. When you’re happy with the component, ship it!

The component gets a version number, which will always refer to that version. You can rely on this to be completely stable.

Fourthly, Connect. Import the component into your application with:

$ prodo add username.ComponentName
Seriously, once you have our CLI, it’s that easy.

Finally, Deploy. Use the component in your app!

Import, just like any other React component.
Picture of Izzy shamelessly stolen from her Instagram page.

And now, the punchline.

In this process, we spent about 10 seconds managing infrastructure (using prodo add), and the rest of the time, we focused on doing things that matter to your users.

Right now, everything in Prodo is public and licensed under MIT, so you can easily fork, modify and share new components with very, very little effort.

Go on. Go make the next great one-button game, without the hassle.

And please, send us feedback.

Izzy says “Woof!”

prodo.dev

We write code for humans.

Thanks to Bruno Marnette

Samir Talwar

Written by

CTO at Prodo.AI. I make machines go beep boop.

prodo.dev

prodo.dev

We write code for humans.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade