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

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 stackblitz.com/edit/vitejs-vi...
#2 Slots design stackblitz.com/edit/vitejs-vi...
#3 Controlled & uncontrolled components in React stackblitz.com/edit/vitejs-vi...
#4 Controlled & uncontrolled components in Fluent stackblitz.com/edit/vitejs-vi...
#5 Triggers pattern stackblitz.com/edit/vitejs-vi...
#6 Collection components in Fluent stackblitz.com/edit/vitejs-vi...
💡 References:
#1 Fluent UI Insights: APIs in v9. Slots, JSX children & triggers • Fluent UI React Insigh...

[@stefansile6790]

FluentUI is an awesome framework.I love the implementation of atomic css. Coming from Angular, FluentUI is beautiful.

[@sillysoumare]

The background sound is disturbing

[@blo0m1985]

Do them for Blazor, not React :(

[@fboucheros]

@blo0m1985 Fluent UI and Fluent UI.Blazor are 2 distinct project