magdo
38 lines
2.1 KiB
TeX
38 lines
2.1 KiB
TeX
\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}
|