1 React alapok React alapok, telepítés, projekt létrehozása, NPM 2 Első react weboldalunk React alapok, komponensek 3 Komponensek React alapok, komponensek 4 Komponensek, gyakorlása React alapok, komponensek, Mátra weblap 5 React routing React router dom, linkek, menü 6 F1 adatok api-val React – api-k 7 Ingatlanos vizsgafeladat Komponensek, routing, api kezelés 8 React fűnyírók webshop […]
Continue Reading
Mi az a for ciklus? Mikor, mire használjuk? For ciklus példák
Continue Reading
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