frontend elmélet

2026-03-17 23:53:10 +01:00
parent 8da3a1eb32
commit 28bd7661f5
69 changed files with 1072 additions and 9534 deletions
@@ -0,0 +1,37 @@
+\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}