Member-only story
A Beginner’s Guide To Building Shareable React Components, Part 1: Theory
A solid plan leads to a solid foundation
Over the years, I have been lucky enough to be part of several projects where we built component libraries. Or built components that were shared across multiple projects. Most of these projects used React, some used Angular. The strategies behind planning shareable components is similar no matter the library or framework.
Planning components is possibly the most important part of building components. Making decisions up front about how to build something is extremely important. Frequently we make these decisions on the fly, it gets overlooked, and we dive right into building.
This is a mistake. It may be fast now, and it may feel like you’re saving time now.
You’re not.
It will cost you much more time in the future. Not planning is expensive.
Today we are going to talk about some of the things I like to do when planning components. These aren’t hard and fast rules, just things I’ve found success with.
It’s important to note, the output of this first phase is not code. The output of this work is a blueprint someone could use to build a component. In real life, this is the sort of work I would do when planning work for my team. I don’t always go this deep. I do when there are a lot of decisions to be made. Making some, not all, of those decisions up front helps development move efficiently.
Design
I’m not a designer. I like to think I have a good eye for things, but I couldn’t design my way out of a cardboard box. I’m an engineer. For the sake of this series, and with all that in mind, it may be helpful to reference the following design while you read.
This is a silly design, I know. This component isn’t necessarily supposed to be useful in real life. Instead, its purpose is to provide something for us to design, build and test.
In a to-be-written-article we’ll go over how to break this down using the techniques I…
