Drawing the Invisible: React Explained in Five Visual Metaphors

A guide to the fundamentals of React explained through five visual metaphors. From component trees to state, Maggie explains the analogies and metaphorical comparisons that helped her "get" React for the first time.

React aside, this is primarily about how and why we should use visuals metaphors. Wrestling with invisible, abstract, complex concepts is part of what programming is all about. But we're often bad at succinctly and clearly communicating the overarching idea of them to other people.

Visual metaphors are a powerful solution to this problem - they're perfectly designed to elegantly explain the essence of technical tools in a way pages of jargon-filled docs can't.

You can find plenty more visual explanations of programming topics around egghead, and on Maggie's digital garden.

If you're interested in learning more about how to illustrate and create your own visual metaphors, check out Maggie's collection of recommended courses and books