React Advanced

React Advanced Conference 2022

Today's Talk introduces React Snots, a new way of composition for design systems. The configuration way provides flexibility but can lead to uncontrolled use cases and wrong patterns. React Slots RFC was created to address the limitations of React's support for web components and slots. It introduces createHost and createSlot APIs to enable component composition and solve previous problems. React Slots RFC allows for flexible component styling and the creation of complex structures without rendering them to the browser.

In this talk we will learn what is Slots and what does it mean to the React ecosystem, what's the current state and the future.

React Slots: a New Way of Composition

Neo Nie

React Summit

React Summit 2022

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Thomas Findlay

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

#react composition