React tartalomjegyzék

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

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

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

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

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

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

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

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