Understanding web "components"

This is a pre-amble to some other posts I’m about to write about components and Tailwind CSS. I tried re-writing this in the past tense but it didn’t make sense. So just know that this is me writing at the very start of the year a week or so back.

I think one of my tech goals for 2020 needs to be getting a proper understanding of building using web “components”. I feel like I understand what components are and how to use them individually, but not how to compose them together onto bigger things.

Example: I get how a table could be a component. Or a row of a table could be a component. But I don’t think I understand which of those things should be components, or if the rows should be child components of the table component.

I tried the table-component-with-child-row-components thing once and it was HORRIBLE. Either it’s not “the way”, or I was doing it totally wrong.

This is the kind of thing I want to understand.

I’m happy to do it in React or Vue or whatever. It’s the principles I want to learn.

I also think that once I’ve done this, the Tailwind CSS framework (that everyone else raves about but that I don’t yet “get”) will make more sense. I THINK Tailwind and “components” go hand in hand and it will make much more sense to me as creator.

I still fear that any Tailwind stuff I create will be incomprehensible to others though. ??‍♂️

In all of this I note this piece of wisdom from Adam Wathan – the creator of Tailwind: