Programovanie aplikácií v Jave a Angulari - 11. prednáška (z 30.11.2023)

Zhrnutie prednášky

Prednáška sa venuje vizuálnemu a funkčnému vylepšovaniu React aplikácie s cieľom priblížiť sa produkčnému vzhľadu. Predstavená je knižnica Material UI od Facebooku, inšpirovaná dizajnom Androidu, vrátane jej inštalácie, dokumentácie a komponentov ako ikonky či fonty. Praktická časť ukazuje prerobenie zoznamu používateľov z jednoduchého výpisu na prehľadnú tabuľku pomocou komponentov Table, TableHead a TableBody. Ďalej sa rieši interaktivita – po kliknutí na riadok sa zobrazí detail používateľa (zoznam jeho card readerov) pomocou komponentu Collapse a stavu selectedUser, pričom opätovné kliknutie na ten istý riadok detail schová. Riešia sa aj praktické problémy ako zobrazenie boolean hodnôt v tabuľke, optional chaining pri práci s undefined a nutnosť poľa komponentov v JSX.

• - Predstavenie knižnice Material UI a jej inštalácia do projektu (npm install, package.json)
• - Prerobenie zoznamu používateľov na tabuľku pomocou Table, TableHead, TableBody a TableRow
• - Použitie komponentu Paper pre vizuálne ohraničenie a tieň tabuľky
• - Konverzia boolean hodnôt (aktívny/neaktívny) na text pomocou ternárneho operátora
• - Implementácia rozbaľovania detailu používateľa po kliknutí na riadok cez stav selectedUser
• - Použitie optional chaining (?.) pri porovnávaní ID kvôli možnému undefined
• - Zobrazenie zoznamu card readerov v komponente Collapse s podmienkou in a unmountOnExit

Zhrnutie pripravené s pomocou AI z prepisu videa.