\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}