Post Content
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 Read More Microsoft Developer
