A Beginner’s Guide To Building Shareable React Components, Part 2: Planning

Let’s put some of the theory from Part 1 to work

Photo by Johannes Plenio on Unsplash

Welcome to Part 2 of A Beginner’s Guide To Building Shareable React Components Series. In Part 1 of this series, I wrote about the theory behind planning sharable react components.

A Beginner’s Guide To Building Shareable React Components, Part 1: Theory

Today, we’re going to put that theory to work and plan out a sharable react component!

Caveats

I’ll add the same caveats here as I did in Part 1. I’m not a designer. I like to think I have a good eye for design, but I can’t design my way out of a cardboard box. I’m an engineer.

This is something of a non-sensical component. We’re going to use it here to help illustrate how we might plan this out.

Since we’re living in a bit of a fantasy world with this exercise, let’s also assume the following:

• The scope of this component is two different areas of an app
• We don’t know if there are plans to use this elsewhere, but it’s possible
• The project we are building this for is small, but growing
• There are some shared components built already
• We assume there are many more components to come, but as of yet maybe only 20 or so are built

Brief

Here is what we’re going to be planning.

This super-awesome-totally-practical component can be found on Figma. This design includes enough information for us to start planning things out. There are some gaps here, though, and we will likely end this process with some assumptions and some questions.

It’s okay that we don’t/won’t have all the answers at this stage. Remember we are planning, we are not building (yet). There is…