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,80 @@
+\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}