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,98 @@
+\section{Navigáció}
+
+\begin{frame}{Mit jelent a kliensoldali navigáció?}
+  \begin{block}{Hagyományos vs.\ SPA navigáció}
+    Hagyományos weboldalon minden oldalváltáskor a böngésző \textbf{új HTTP kérést} küld, és teljesen újratölti az oldalt.
+    SPA (Single Page Application) esetén az oldal egyszer töltődik be, a navigáció pedig JavaScript-tel történik,
+    ezért gyorsabb és folyamatosabb élményt ad.
+  \end{block}
+  \vspace{0.5em}
+  A React Router a legelterjedtebb könyvtár erre a feladatra React alkalmazásokban.
+\end{frame}
+
+\begin{frame}{React Router --- hogyan működik?}
+  \begin{itemize}
+    \item A \texttt{BrowserRouter} figyeli a böngésző URL-jét.
+    \item A \texttt{Routes} és \texttt{Route} elemek URL mintákhoz komponenseket rendelnek.
+    \item A \texttt{Link} URL-t vált teljes oldalfrissítés nélkül.
+    \item A React újrarendereli a megfelelő oldalkomponenst az aktuális útvonal alapján.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{React Router példa kód 1/2}
+\begin{verbatim}
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+
+    function App() {
+    return (
+        <BrowserRouter>
+        <nav>
+            <Link to="/">Fooldal</Link>
+            <Link to="/termekek">Termekek</Link>
+        </nav>
+\end{verbatim}
+\end{frame}
+
+\begin{frame}[fragile]{React Router példa kód 2/2}
+\begin{verbatim}
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/termekek" element={<Products />} />
+        <Route path="/termekek/:id" element={<ProductDetails />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}{Dinamikus útvonalak (React Router)}
+  \begin{itemize}
+    \item Paraméteres route példa: \texttt{/termekek/:id}
+    \item Ha az URL \texttt{/termekek/42}, akkor a \texttt{useParams()} eredménye: \texttt{\{ id: "42" \}}
+    \item Tipikusan ilyen paraméterrel kérünk le részletes adatot API-ból.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Mappa routing (file-system routing) --- mi ez?}
+  \begin{block}{Alapelv}
+    Mappaalapú routingnál az útvonalakat nem külön \texttt{Routes} konfigurációban írjuk,
+    hanem a mappastruktúra \textbf{automatikusan} meghatározza őket.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item Ez főleg Next.js-ben elterjedt (App Router).
+    \item Az \texttt{app/} mappában minden \texttt{page.tsx} egy útvonalat jelent.
+    \item Dinamikus route mappanévben: \texttt{[id]}.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{Mappa routing példa (Next.js App Router)}
+\begin{verbatim}
+app/
+  page.tsx                -> /
+  kapcsolat/
+    page.tsx              -> /kapcsolat
+  termekek/
+    page.tsx              -> /termekek
+    [id]/
+      page.tsx            -> /termekek/:id
+\end{verbatim}
+\end{frame}
+
+\begin{frame}[fragile]{Dinamikus mappa route komponens példa}
+\begin{verbatim}
+// app/termekek/[id]/page.tsx
+export default function ProductPage({ params }) {
+  return <h2>Termek azonosito: {params.id}</h2>;
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}{React Router vs. mappa routing}
+  \begin{itemize}
+    \item \textbf{React Router:} explicit útvonal definíció a kódban (rugalmas, kontrollált).
+    \item \textbf{Mappa routing:} mappaszerkezetből automatikus route (gyors indulás, kevesebb konfiguráció).
+    \item Kezdőknek mindkettőt érdemes ismerni: React Router SPA-hoz, mappa routing Next.js projektekhez.
+  \end{itemize}
+\end{frame}