React and the Live Style Guide

Posted by walwoodr on June 23, 2017

As a Lean UX nerd, beginning to use React was the fulfilment of a fantasy. React, as you probably know, is a library developed by the Facebook engineering team to allow agile dynamic UI updates based on rapidly changing data. It offers web developers a slew of tools and performance optimizations such as an integration with JSX, ES6 and the virtual DOM. In addition to those exciting (and very cool) features, it also offers UI and UX designers the ability to create and maintain an extremely valuable business resource: a live style guide.

Front End and UX/UI Developers are often asked to create a “pixel perfect” match between a wireframe and the end website. This was once a laudable goal and allowed designers to make sure that the end result looked the way they intended. In the modern, responsive, mobile web landscape, it often makes substantially less sense. Designing for all possible devices, and testing on all possible devices, is definitely tedious and perhaps impossible. One (business-friendly) way to avoid this is proposed in Lean UX by Jeff Gothelf: a live style guide.

There are many different ways to create a live style guide: Atomic Design and Pattern Lab being a few of the more name-recognition-heavy among them. But React is so modular, so concise, so team-friendly. I’m excited to see it in action in a live style guide in the future.