Log in
React Conferences
React Advanced Conference 2022React Advanced Conference 2022
EN

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

Richard Moss
Richard Moss
Deventures
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.


We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.


Prerequisites:

- Familiarity with and experience working on large react codebases

- A good understanding of common approaches to styling in React

This workshop has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.

FAQ

The RapidUI development in React workshop focuses on harnessing custom component libraries and design systems within React applications. It covers an overview of design systems, considerations for component libraries, CSS in JS, theming using styled components, and the concept of atomic design.

The workshop is led by Richard, a curious engineer who has been a lead developer on projects for organizations like agni magazine and a partner at Lyngess, a JavaScript startup. He is also a co-organizer of JavaScript London meetups and has experience running React JS academy.

Key topics include an overview of design systems, component library considerations, CSS and JS integration, theming with styled components, atomic design principles, style system utilization, and practical exercises on component libraries like Shaq4UI.

The workshop discusses the implementation of design systems in large organizations by using examples like Sainsbury's design system, Luna. It covers how design systems integrate various elements like colors, icons, and components to standardize design across different brands and platforms.

Design tokens are a set of design values used to maintain consistency across a product's UI/UX. They store design fundamentals like colors, spacing, and typography, ensuring cross-platform compatibility. For example, Sainsbury's uses SAS variables to manage design tokens across its brands.

design systemsreact
Richard Moss
Richard Moss
118 min
01 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop provides an overview of RapidUI development in React, covering topics such as design systems, component libraries, CSS in JS, theming, atomic design, and style systems. It emphasizes the importance of using pre-existing design systems and component libraries, as well as considering legacy code and balancing convention and configuration. The workshop also explores the use of style components and emotion for styling legacy codebases, implementing themes with style components, and utilizing advanced features like variants and the style system. It concludes with insights on planning and building a component library, extending existing libraries, and using tools like Storybook and Chromatic for collaboration and deployment.
Available in Español: Desarrollo Rápido de UI en React: Aprovechando Bibliotecas de Componentes Personalizadas y Sistemas de Diseño
Video transcription and chapters available for users with access.
Available in other languages: