React keretrendszer
A Playwright segítségével futtathat egyetlen tesztet, egy tesztcsomagot vagy az összes tesztet. A tesztek futtathatók egy böngészőben vagy a –project kapcsolóval több böngészőben is. Telepítés A teszteléshez fel kell telepíteni a Playwright-ot: npm init playwright@latest Csak a csomag telepítése meglévő projekthez: npm install -D @playwright/test majd npx playwright install Az npx letölti a legfrissebb telepítőt, […]
Continue ReadingEbben a példában egy tokent fogunk menteni, beolvasni. Hozzunk létre egy Home, Oldal1, Oldal2 komponenst! Készítsünk navigációt, és egy beviteli mezőt a tokennek! Ha van token, a beviteli mező és gomb tünjön el, helyettük egy kilépés menüpont jelenjen meg! Megoldás A tokent a local storage-ban tároljuk el. Minden oldalon ellenőrizzük a token meglétét, de nincs […]
Continue Reading
A React Router Outlet egy speciális komponens, ami helyőrzőként működik a szülő útvonalban, és oda rendereli a gyermek útvonalak tartalmát. Miért van rá szükség? Ha van egy layout (pl. fejléc, lábléc, main), és ezekben dinamikusan változó tartalom (pl. Home, About, Contact), akkor az Outlet jelzi, hová kerüljenek a gyerek route-ok, pl. a main-en belül. Hogyan […]
Continue Reading
NavLink A React Router-ben a Link és a NavLink ugyanarra szolgál: kliensoldali navigációra, azaz új oldal betöltése nélkül váltanak útvonalat. A lényegi különbség az, hogy a NavLink tud „aktív” állapotot kezelni (amikor az aktuális URL megfelel a link céljának), és ehhez stílust/klasszt ad automatikusan — menükhöz, navigációhoz ideális. Link tulajdonságai: NavLink tulajsdonságai: Link tulajdonságai + […]
Continue Reading
Első példánkban a klasszikus testtömeg index számítás alapadatait fogjuk űrlap segítségével elküldeni a szervernek, majd a választ megjeleníteni. API végpont példa adatokkal:https://informatikaora.hu/webprog/tti.php/?kg=90&cm=200 Minta az API hívás eredményére JSON formában:{„kg”:”70″,”cm”:”178″,”tti”:22.09,”minosites”:”normál testalkat”,”testkep”:”body_correct.gif”,”tobblet”:0} 2. példa Ez a példa egy interaktív űrlapot jelenít meg, és a felhasználó által megadott értékeket állapotban (state) tárolja. Az űrlap többféle input elemet tartalmaz: […]
Continue Reading
A GitHub fiókomban elérhetőek az idei feladatok.
Continue Reading
Feladatsor pdf A sablont kell tulajdonképpen szétbontani komponensekre, és React kompatibilissé alakítani! Szerencsére ebben a React hibaüzenetei is segítenek. Forrás: https://drive.google.com/file/d/1fW-GVNrZw9Apn3cJjiSRIBmZyVP53pjv/view?usp=drive_link Amire figyelni kell: class – className csere mindenholinline css esetén is módosítani kell a szintaktikán dupla kapcsos zárójel szükséges style={{ height: ‘150px’ }}React-ben minden eseménynév, attribútum camelCase, az eseménykezelőkhöz függvény szükséges! Összefoglaló az oldal […]
Continue Reading
A Selenium WebDriver lehetővé teszi az automatizált böngészőtesztelést, beleértve az interakciókat különböző webes elemekkel. Az alábbi műveletek használhatók a tesztelés során: Click (kattintás) – Egy adott gomb vagy interaktív elem aktiválása, gyakorlatilag bármire lehet alkalmazni.Select (opció kiválasztása) – Egy legördülő listából történő kiválasztás. Lehet multi select is.Send Keys (szövegbevitel) – Szöveg beírása beviteli mezőkbe vagy […]
Continue Reading
A Selenium WebDriver egy nyílt forráskódú eszköz, amelyet webalkalmazások tesztelésének automatizálására használnak. Lehetővé teszi a fejlesztők és tesztelők számára, hogy szimulálják a felhasználói interakciókat a webböngészőkkel. Képes szimulálni például kattintásokat, szövegbevitelt, navigációt és űrlapok kitöltését. A Selenium WebDriver lokátorokat (locators) használ arra, hogy azonosítsa és kezelje az elemeket egy weboldalon. Támogatja a legnépszerűbb böngészőket, mint […]
Continue Reading
backend A feladat leírása, megoldása elérhető a GitHub oldalamon is. A feladat sima javascript megoldása, fetch api használatával. Feladat: egy ingatlankereskedés meglévő ingatlanjainak listázása, új ingatlan mentése, api-val. Van még a feladatban routing és formázás is. A backend-et elég kitömöríteni, majd npm i, és a node index.js paranccsal indítható. A frontendhez írjuk be a szokásosnpm […]
Continue Reading