\section{Könyvtárak}

\begin{frame}{UI komponens könyvtárak}
  \begin{block}{Mire valók?}
    Kész, előre megírt és stílusozott UI komponensek gyűjteményei --- gombok, táblázatok, modalok, értesítések stb. Nem kell nulláról megírni a vizuális elemeket.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item \textbf{MUI (Material UI):} Google Material Design stílus, nagyon széleskörű komponenskészlet.
    \item \textbf{Headless UI, Radix UI:} csak a viselkedési logikát adják, a megjelenést teljes egészében mi írjuk --- maximális szabadság, Tailwind-del kombinálható.
    \item \textbf{shadcn/ui:} Radix + Tailwind alapú, másolható komponensek --- egyre népszerűbb.
  \end{itemize}
\end{frame}

\begin{frame}{Állapot és adatkezelés ökoszisztéma}
  \begin{itemize}
    \item \textbf{Redux Toolkit:} a Redux modern, kevésbé terjengős változata. Komplex állapotlogikához és nagy csapatoknak ideális.
    \item \textbf{Zustand:} egyszerű, minimális API-jú globális store. Kis és közepes projekteknél kiváló alternatíva.
    \item \textbf{Jotai:} atomi állapotkezelés --- az állapot apró, egymásra épülő atomokból áll. Fine-grained reaktivitáshoz jó.
    \item \textbf{TanStack Query:} szerverállapot kezelésére specializált --- cache, háttérfrissítés, újrapróbálkozás.
    \item \textbf{Zod:} típusbiztos adatvalidáció sémákkal --- API válaszok, form adatok ellenőrzéséhez.
  \end{itemize}
\end{frame}

\begin{frame}{Összefoglalás --- a React ökoszisztéma}
  \begin{itemize}
    \item \textbf{Alap:} komponensek, props, state, hookok, JSX.
    \item \textbf{Interakció:} eseménykezelés, űrlapok, navigáció.
    \item \textbf{Adatok:} useEffect, Axios / TanStack Query, Context.
    \item \textbf{Minőség:} TypeScript, tesztelés, teljesítmény.
    \item \textbf{Kiadás:} build, deploy, biztonság, monitorozás.
  \end{itemize}
  \vspace{0.5em}
  \begin{alertblock}{Tanács kezdőknek}
    Ne akarjuk egyszerre megtanulni az összes eszközt. Kezdjük az alapokkal (komponens, state, effect), és szükség szerint bővítsük a tudást.
  \end{alertblock}
\end{frame}