frontend elmélet

Frontend_ppt/react_js/axios.tex

@@ -0,0 +1,37 @@
+\section{Adatlekérés}
+
+\begin{frame}{Hogyan kap adatot egy React alkalmazás?}
+  \begin{block}{Az alaphelyzet}
+    A React alkalmazás a böngészőben fut --- az adatok (felhasználók, termékek, stb.) általában egy \textbf{háttérszerveren} élnek. Az adatcserét HTTP kérésekkel végezzük: a frontend elküldi a kérést, a szerver JSON formátumban válaszol.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item A böngésző beépített \texttt{fetch} API-ját vagy az \textbf{Axios} könyvtárat használhatjuk.
+    \item Az adatlekérést általában egy \texttt{useEffect}-ben indítjuk el --- amikor a komponens megjelenik.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Fetch vs.\ Axios}
+  \begin{itemize}
+    \item \textbf{Fetch:} beépített, nem kell telepíteni. Hátránya: a hibás HTTP kódokat (pl. 404) \emph{nem} dobja el automatikusan, JSON-t kézzel kell kezelni.
+    \item \textbf{Axios:} telepíthető könyvtár. Automatikusan kezeli a JSON-t, a HTTP hibákra kivételt dob, és \textbf{interceptorokkal} (pl. token hozzáadása minden kéréshez) könnyű kiegészíteni.
+    \item Nagyobb projekteknél az Axios általában kényelmesebb és biztonságosabb.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Állapotok az adatlekérés során}
+  \begin{itemize}
+    \item \textbf{Betöltés (loading):} amíg a kérés folyamatban van, mutassunk spinner-t vagy skeleton-t --- ne maradjon üres az oldal.
+    \item \textbf{Siker:} megérkeztek az adatok, megjelenítjük.
+    \item \textbf{Hiba (error):} a hálózat megszakadt, a szerver hibát adott --- barátságos hibaüzenetet mutassunk, ne csak üres felületet.
+    \item \textbf{Üres állapot (empty):} a válasz sikeres, de nincs adat --- pl. "Nincsenek még termékek".
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Szerverállapot-kezelés: TanStack Query}
+  \begin{itemize}
+    \item Manuálisan kezelni a loading/error/data állapotokat minden komponensben ismétlődő és hibalehetőséges.
+    \item A \textbf{TanStack Query} (korábbi nevén React Query) ezt automatizálja: cache-eli az adatokat, háttérben frissíti, kezeli az újrapróbálkozást.
+    \item \textbf{Optimista frissítés:} azonnal frissítjük a UI-t a szerver válasza előtt --- ha a szerver hibát ad, visszaállítjuk. Így az alkalmazás gyorsabbnak tűnik.
+  \end{itemize}
+\end{frame}