Fluent UI React Trainings: Core concepts, state management & Triggers API

From the creator

This tutorial provides an overview of Fluent UI React v9, focusing on efficient component customization and state management techniques. Learn to control states effectively, utilize JSX collections for enhanced flexibility, and optimize your UI development workflow. 📚 Chapters: 00:00 – Intro to the course 00:15 – Intro to the lesson 00:54 – React props to HTML markup 02:49 – Component slots in Fluent UI React v9 03:35 – Slots customizations 05:14 – Controlled & uncontrolled components in React 08:22 – Controlled & uncontrolled patterns in Fluent v9 09:53 – Callbacks for state updates & databags 10:59 – Triggers pattern 12:38 – Controlling state for triggers 14:23 – Using custom components as triggers 17:58 – Using collection components 21:08 – Outro 📝 Examples: #1 React props to HTML markup https://stackblitz.com/edit/vitejs-vite-1xwiwp #2 Slots design https://stackblitz.com/edit/vitejs-vite-ly7des #3 Controlled & uncontrolled components in React https://stackblitz.com/edit/vitejs-vite-uzdfej #4 Controlled & uncontrolled components in Fluent https://stackblitz.com/edit/vitejs-vite-dh69ya #5 Triggers pattern https://stackblitz.com/edit/vitejs-vite-rjih2p #6 Collection components in Fluent https://stackblitz.com/edit/vitejs-vite-nvb7ma 💡 References: #1 Fluent UI Insights: APIs in v9. Slots, JSX children & triggers https://www.youtube.com/watch?v=uxuIJlYmKGk

Published 2024-02-26 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.