Sign in to confirm you’re not a bot
This helps protect our community. Learn more

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

Microsoft Developer
589K subscribers
<__slot-el>
<__slot-el>
4.8K views 1 year ago
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-vi... #2 Slots design https://stackblitz.com/edit/vitejs-vi... #3 Controlled & uncontrolled components in React http …...more
...more
Fluent UI React Trainings: Core concepts, state management & Triggers API
95Likes
4,846Views
2024Feb 26
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-vi... #2 Slots design https://stackblitz.com/edit/vitejs-vi... #3 Controlled & uncontrolled components in React https://stackblitz.com/edit/vitejs-vi... #4 Controlled & uncontrolled components in Fluent https://stackblitz.com/edit/vitejs-vi... #5 Triggers pattern https://stackblitz.com/edit/vitejs-vi... #6 Collection components in Fluent https://stackblitz.com/edit/vitejs-vi... 💡 References: #1 Fluent UI Insights: APIs in v9. Slots, JSX children & triggers    • Fluent UI React Insights: APIs in v9....  

Follow along using the transcript.

Microsoft Developer

589K subscribers