\section{React alapok}

\begin{frame}{Mi a React?}
  \begin{block}{Rövid definíció}
    A React egy nyílt forráskódú JavaScript \textbf{könyvtár}, amelyet a Meta (Facebook) fejlesztett ki.
    Fő célja: webalkalmazások felhasználói felületének (UI) hatékony és karbantartható megírása.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item Nem egy teljes keretrendszer --- csak a megjelenítési réteggel foglalkozik.
    \item Kiegészítő könyvtárakkal (routing, adatkezelés) teljes alkalmazás is építhető.
    \item 2013 óta aktívan fejlesztik; ma az egyik legelterjedtebb frontend technológia.
  \end{itemize}
\end{frame}

\begin{frame}{Deklaratív vs.\ imperatív szemlélet}
  \begin{columns}
    \column{0.48\textwidth}
    \textbf{Régi, imperatív szemlélet}\\
    \textit{„Keresd meg a gombot, módosítsd a szövegét, frissítsd a listát\ldots"}\\
    \vspace{0.5em}
    $\Rightarrow$ Megadjuk, \emph{hogyan} csinálja a böngésző lépésről lépésre.

    \column{0.48\textwidth}
    \textbf{React: deklaratív szemlélet}\\
    \textit{„Ha a kosár üres, ezt jelenítsd meg; ha van termék, amazt."}\\
    \vspace{0.5em}
    $\Rightarrow$ Megadjuk, \emph{mit} akarunk látni --- a React intézi a DOM-frissítést.
  \end{columns}
\end{frame}

\begin{frame}{Mi az a virtuális DOM?}
  \begin{block}{DOM = Document Object Model}
    A böngésző az oldalt egy faszerkezetben (DOM) tárolja. Sok elem esetén a közvetlen DOM-módosítás lassú lehet.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item A React egy \textbf{virtuális DOM}-ot tart fenn a memóriában --- ez egy gyors, könnyű másolata a valódi DOM-nak.
    \item Állapotváltozáskor összehasonlítja az új és a régi virtuális DOM-ot (\emph{diffing}).
    \item Csak a ténylegesen megváltozott részeket frissíti a böngészőben --- ezért gyors és hatékony.
  \end{itemize}
\end{frame}

\begin{frame}{Miért érdemes React-et tanulni?}
  \begin{itemize}
    \item \textbf{Újrafelhasználhatóság:} egyszer megírt komponens bárhová beilleszthető.
    \item \textbf{Nagy közösség:} rengeteg oktatóanyag, könyvtár és álláshirdetés.
    \item \textbf{Skálázhatóság:} kis projekttől nagy vállalati alkalmazásig alkalmazható.
    \item \textbf{Átváltható tudás:} React Native-szal mobilalkalmazás is írható ugyanezzel a szemlélettel.
  \end{itemize}
\end{frame}

\begin{frame}[fragile]{Projektindítás Vite-tal}
  \begin{block}{Miért Vite?}
    A Vite egy modern build eszköz: gyorsan indítja el a fejlesztői szervert, és azonnal tükrözi a módosításokat a böngészőben. Ezt hívják HMR-nek (Hot Module Replacement --- „élő újratöltés").
  \end{block}
\begin{verbatim}
npm create vite@latest sajat-app -- --template react
cd sajat-app
npm install
npm run dev
\end{verbatim}
  \begin{itemize}
    \item Az \texttt{npm run dev} elindítja a fejlesztői szervert (alapból \texttt{localhost:5173}).
    \item \texttt{npm run build} paranccsal production-kész, tömörített kódot kapunk.
  \end{itemize}
\end{frame}

\begin{frame}{JSX --- HTML és JavaScript egyben}
  \begin{block}{Mi az a JSX?}
    A JSX (JavaScript XML) egy szintaktikai kiterjesztés: HTML-szerű kódot írhatunk JavaScript-ben.
    A böngésző közvetlenül nem érti --- a build eszköz fordítja sima JavaScript-té.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item JavaScript kifejezéseket \texttt{\{\}} zárójelbe írjuk: változó, függvényhívás, feltétel.
    \item Minden JSX elemnek pontosan egy gyökéreleme lehet (vagy \texttt{<>\ldots</>} fragment).
    \item A \texttt{class} HTML attribútum neve JSX-ben \texttt{className} --- a \texttt{class} JS-ben foglalt szó.
  \end{itemize}
\end{frame}