Web Components in React

on YouTube ↗21m

" summary

Demonstrates integrating a real vanilla colorful hex color picker into React: builds the component in CodeSandbox, wires attributes vs properties via useRef and useEffect, and binds the custom color-changed DOM event with addEventListener to read event.detail.value. Shows property reflection and state sync, then replaces the boilerplate with @lit-labs/react’s createComponent wrapper to get a working React component in seven lines. Everything runs in the demo.

AI-written summary · about

" chapters (6)

1. 0:00Intro
2. 1:40Color Picker
3. 6:35Event listeners
4. 9:40Attributes and properties
5. 13:08Lit Labs React
6. 16:05Discussion

" related talks

• 25mReact x Web Components : How It Is and How It Could BeDwane Hemmings · JSConf Korea 2022
• 44mWeb Components An Introduction to the FutureTobias Ljungstrom · NDC Oslo 2021
• 40mWeb Components: It’s about TimeErin Zimmer · iJS London 2019
• 20mI’m With Web Components and Web Components Are With MeGil Fink · ReactNext 2019
• 45mReact Web Components How It Is and How It Could BeDwane Hemmings · Connect.Tech 2022
• 01h 04mWhat makes React different?Jake Ginnivan · NDC Sydney 2016
• 38mWriting highly reusable React componentsJavi Velasco · React Alicante 2017
• 24mIndividual paint for your React componentsJohannes Stein · ReactJS Day 2016