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
Készítsünk weboldalt, ami a https://ergast.com/api/f1/2000.json AP-t használja! Az api egy adott év futamainak adatait jeleníti meg. Egy konkrét futam eredményeit a https://ergast.com/api/f1/2000/1/results.json címen érhetjük el. Készítsünk egy futamok.html oldalt, ahol csúszka segítségével tudunk évszámot választani 1950-2024 között! A futamok dátumára készítünk egy hivatkozást, ami tartalmazni fogja az évszámot (season) és a kiválsztott futamot (round). Így […]
Continue Reading
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
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
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
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
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
A JavaScript export és import kulcsszavakat modulok közötti adat (például változók, függvények vagy osztályok) megosztására használjuk. Ez lehetővé teszi a kód felosztását kisebb, újra felhasználható részekre, amelyeket könnyebb karbantartani és kezelni. Export típusok: Named export Lehetővé teszi több elem exportálását ugyanabból a modulból. Az importálás során a névnek pontosan egyeznie kell az exportált névvel. Importnál […]
Continue Reading
A JavaScript Spread Operator (…) lehetővé teszi egy tömb vagy objektum elemeinek, illetve függvények paramétereinek egyszerűbb kezelését. Használható tömbök összefűzésére, tömbhöz új elemek hozzáadására, másolásra, objektumok egyesítésére, függvények paraméterének megadásához stb. Nézzünk néhány példát:
Continue Reading
A jQuery egy JavaScript könyvtár. Segítségével egyszerűbben tudunk dinamikus weboldalt készíteni! A jQuery számos előre elkészített függvényt és eszközöket biztosít, amelyekkel gyorsabban és hatékonyabban tudunk dolgozni. Mire lehet használni? DOM manipuláció: Egyszerűen kiválaszthatunk HTML elemeket, módosíthatjuk a tartalmukat, stílusukat és az eseménykezelőket.Animációk: Készíthetünk látványos animációkat a weboldal elemein.AJAX: Aszinkron kérések küldésével dinamikusan tölthetünk be új […]
Continue Reading