Kategória: React

React keretrendszer

Selenium WebDriver – Interakció a webes elemekkel

Viktor

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

Selenium WebDriver – locators

Viktor

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

React – Ingatlan feladatsor

Viktor

backend 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 node index.js paranccsal indítható. A frontendhez írjuk be a szokásos npm create vite@latest parancsot! A routing-hoz ne felejtsd el telepíteni a szükséges modult: npm install react-router-dom main.jsx Az app.jsx, app.css fájlokat […]

Continue Reading

React: F1 adatok lekérése api-val

Viktor

A feladathoz az https://ergast.com/mrd/ weboldal publikus api-jait fogjuk használni. A weboldalon megtalálható az összes futam adata, 1950-2024-ig. Előzmény: megnéztük korábban, hogy js segítségével hogyan lehet lekérdezni és megjeleníteni adatokat api segítségével. Ebben a reactos példában ugyanezt fogjuk megoldani. Készítsünk egy új react alkalmazást! (create vite@latest … korábbi tutorialban benne volt! Plussz a routingot is telepíteni […]

Continue Reading

React routing

Viktor

A React-ben az oldalak közötti navigációhoz leggyakrabban a React Router csomagot használjuk, ezt is telepíteni, majd importálni kell. A React Router megkönnyíti az oldalak közötti hivatkozásokat és a modern, egylapos alkalmazások (SPA-k) fejlesztését. Ugyanakkor a Reactben nincsenek hagyományos értelemben vett oldalak, mint sima html-ben, itt komponensek vannak, és ezekre tudunk hivatkozni! telepítés: npm install react-router-dom […]

Continue Reading

React komponensek, gyakorlás

Viktor

Ebben a tutorialban megnézzük, hogyan lehet egy hagyományos weboldalt komponensekre szétszedni. Kiindulási alap: Kiadó nyaraló a Mátrában weboldal. Feladat: a weblap fejlécét, törzsét és láblécét helyettük el külön-külön komponensekbe! A fejlécbe helyezzünk el egy gombot, ami random választ 4 db idézet közül! Készítsünk egy új React projektet! Az src mappába hozzunk létre egy components mappát, […]

Continue Reading

React komponensek

Viktor

Az alap React alkalmazásunkban az App komponens így nézett ki. Van egy App() füvvényünk, ami egy egyes szintű címsort jelenít meg. Ha nem akarunk semmit megjeleníteni, használhatjuk a null elemet a return-ben. Alapvetően ha több elemet is használni szeretnénk, akkor tegyük bele őket egy fragment-be (üres tag-be)! Használhatjuk konkrétan a <Fragment> taget is, de akkor […]

Continue Reading

Első React weboldalunk

Viktor

Hozzuk létre első React alkalmazásunkat! Ha telepítettük a Node.js-t, és a Visual Studio Code-ot, akkor hozzá is kezdhetünk! Nyissuk meg a kívánt mappát a Visual Studioban, majd egy új terminált! Adjuk ki a következő parancsot: npm create vite@latest Utána meg fogja kérdezni, mi legyen az app neve, csomag neve, milyen keretrendszert szeretnénnk használni (nyilakkal lehet […]

Continue Reading

REACT alapok

Viktor

A React egy JavaScript alapú könyvtár, amelyet a Facebook fejlesztett ki. A React kifejezetten felhasználói felületek (UI) építésére szolgál, és különösen népszerű az egyoldalas alkalmazások (SPA Single Page App) készítése során. A REACT komponensalapú keretrendszer.A React virtuális DOM-ot (Virtual DOM) használ, amely gyorsabbá teszi az alkalmazást azáltal, hogy csak a szükséges változtatásokat végzi el a […]

Continue Reading