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,53 @@
+\section{Komponensek}
+
+\begin{frame}{Mi az a komponens?}
+  \begin{block}{Analógia: LEGO kockák}
+    Képzeljük el, hogy a weboldalunk LEGO-ból épül. Minden egyes „kocka" egy önálló, újrafelhasználható egység --- ezt nevezzük \textbf{komponensnek}.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item Egy komponens egy JavaScript \textbf{függvény}, amely JSX-et ad vissza --- leírja, mit jelenítsen meg.
+    \item A teljes oldal komponensek fájából áll: van egy gyökér (\texttt{App}), abból nőnek ki az alkomponensek.
+    \item Például: \texttt{<Header />}, \texttt{<ProductList />}, \texttt{<Footer />} --- mindegyik egy-egy felelősségi kör.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Funkcionális és osztály alapú komponensek}
+  \begin{itemize}
+    \item \textbf{Funkcionális komponens (modern):} egyszerű JavaScript függvény, hookok segítségével kezeli az állapotot. Ez az ajánlott forma.
+    \item \textbf{Osztály alapú komponens (régebbi):} ES6 osztályból örököl, életciklus-metódusokat használ. Ma már nem szükséges új kódban alkalmazni.
+    \item A React csapat 2019 óta a funkcionális megközelítést javasolja --- rövidebb, könnyebben tesztelhető.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Mi az a prop?}
+  \begin{block}{Analógia: paraméterek}
+    Ahogy egy függvénynek paramétereket adhatunk, a komponenseknek is adhatunk adatokat kívülről. Ezeket \textbf{props}-nak (properties --- tulajdonságok) hívjuk.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item A props \textbf{csak olvasható}: a komponens nem módosíthatja a kapott értéket.
+    \item Props segítségével ugyanaz a komponens különböző tartalommal jeleníthető meg --- ez teszi újrafelhasználhatóvá.
+    \item Szinte bármilyen érték átadható: szöveg, szám, tömb, függvény, sőt más komponens is.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{A \texttt{children} prop és a kompozíció}
+  \begin{itemize}
+    \item A \texttt{children} egy speciális prop: a komponens nyitó- és zárócímkéje \emph{közé} írt tartalmat jelenti.
+    \item Például egy \texttt{<Modal>} komponens bármilyen tartalmat fogadhat belülről --- nem kell előre tudni, mi lesz benne.
+    \item Ez a \textbf{kompozíció} alapelve: összetett UI-t kisebb, általános darabokból rakunk össze öröklés helyett.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Kulcsok (\texttt{key}) listáknál}
+  \begin{block}{Miért kell a \texttt{key}?}
+    Ha React egy listát renderel, azonosítania kell, melyik elemet kell frissíteni, törölni vagy hozzáadni. A \texttt{key} prop ebben segít --- egyedi azonosítóként szolgál.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item A \texttt{key} értéke legyen \textbf{stabil és egyedi} --- tipikusan az adatbázisból érkező ID.
+    \item A tömb indexét csak akkor használjuk, ha a lista soha nem változik sorrendben.
+    \item Hiányzó vagy nem egyedi \texttt{key} esetén React figyelmeztetést dob, és hibás frissítések léphetnek fel.
+  \end{itemize}
+\end{frame}