React tanulása és megértése - a gyakorlati útmutató

Itt bemutatásra kerülnek azok a témák, amelyeket később tárgyalunk, és beszélünk ennek a kurzusnak a motivációjáról is.

Jelenleg számtalan UI keretrendszer létezik JavaScripthez - miért éppen a React? Ezen a könyvtár népszerűsége mellett néhány mélyreható ok is szól.

Ebben a leckében beállítjuk a fejlesztői környezetet és pillanatok alatt létrehozzuk az első React-alkalmazásunkat npm create vite segítségével.

Az utolsó leckében egy "friss" React-alkalmazást hoztunk létre, most pedig arról lesz szó, hogy megértsük ennek az alkalmazásnak a szerkezetét, és elmagyarázzuk, hogyan lehet beágyazni a Reactet egy weboldalba.

Egy kis frissítő a var vs. let/const témában.

Destruktúrálás lehetővé teszi az elemek célzott kinyerését objektumokból és tömbökből. Pontosabb vizsgálattal sok alkalmazás lehetősége adódik, amelyek a JS-kódot elegánsabbá és tömörebbé teszik.

Funkciók JavaScriptben nélkülözhetetlenek voltak, és eddig csak a funkció kulcsszóval lettek deklarálva és definiálva. Az ES6 egy elegáns és rövid írásmódot vezet be, amely olvashatóbbá teszi a kódot, és megoldást nyújt a this potenciális problémájára.

NodeJs-ben a modulok már az elejétől kezdve használatban vannak, de eleinte kizárólag a CommonJs modulformátumra támaszkodtak require kulcsszóval. Az ES6-tól kezdve van egy moduldefiníció a szabványban, amely megjeleníti az új import/export kulcsszavakat. Mára ezt a formátumot már majdnem az összes (új) JS könyvtár támogatja, és a NodeJs is képes kezelni ezeket a legújabb verziókban.

Hogyan írjátok le a komponens UI-ját JSX segítségével, és integráljátok benne a JS-kifejezéseket. A videó projektfájlja tartalmazza ezen útmutató-szakasz kész kódját.

Saját React komponensek könnyen írhatók funkciók segítségével, amelyek JSX-et adnak vissza.

Ez a lecke elmagyarázza, hogyan lehet adatokat és JavaScript kifejezéseket integrálni a JSX-be.

Anélkül, hogy egy módosítható állapottal rendelkeznénk, alig lehet értelmes alkalmazást implementálni. A Reactben ehhez általában a useState-t használják. Ez a tananyag bemutatja ezt a Hook-ot, és elmagyarázza annak használatát.

A Props arra szolgál, hogy adatokat adjon a gyermekkomponenseknek. Itt magyarázzuk, hogy ez pontosan hogyan történik, és mire kell figyelni.

Ha a props dinamikusan változnak, akkor a komponens megfelelő render függvénye újra meghívódik.

Ha egy gyermek komponens valamit közölni akar a szülő komponenssel, akkor egy visszahívás-prop segítségével történik.

A teendőknek egyszer el kell végezve lenniük. Itt megbeszéljük, hogyan működik ez a kódban.

A felhasználói felület megjelenése kétségkívül fontos. Ezért itt magyarázom el, hogyan működik a Emotion könyvtár segítségével, és hogyan lehet használni a className Prop-ot vele. Emellett fogok beszélni még a style- attribútumról is, amellyel az egyes elemeket részletesen stílizálni lehet.

A teendők szűrésével két csoportra oszthatók a teendők.

Persze, a teendők törlésére is szükség van. Itt van elmagyarázva, hogyan működik ez az Array szűrése által.

Eddig mindig div elemekkel csomagoltunk össze komponenseket. Bizonyos esetekben azonban ezt megspórolhatjuk.

Ez most érdekes lesz: A teendőket viszonylag könnyen el lehet tárolni a böngésző memóriájában, és természetesen vissza is lehet tölteni őket, így "túlélhetik" az oldal újratöltését.

Az useEffect segítségével lehet oldal hatásokat integrálni. Ezzel a függvénnyel a komponens felszerelése is kezelhető.

Rövid összefoglaló a teendők alkalmazásunkról és utolsó javítások.

A videólejátszó alkalmazás létre lesz hozva a create vite segítségével, és el lesz magyarázva, hogy hogyan kell felépíteni az alkalmazást. A videóhoz csatolt projektfájl tartalmazza a videólejátszóhoz készült kódot.

Az ref attribútum segítségével hivatkozhatunk DOM elemekre, és hozzáférhetünk hozzájuk a useRef segítségével. Itt például a video elemre mutatunk.

Létrehozzuk a tényleges videólejátszót, amely már rendelkezik Lejátszás, Szünet és Megállítás gombokkal.

Mivel a lejátszás és a megállítás sosem szükséges egyidejűleg, ezért ezeket a két funkciót egyetlen gombban kombináljuk.

A videoelem saját vezérlői is irányítják a videót, ami azt eredményezi, hogy a lejátszás/szünet gombnál a státuszunk nem megfelelően frissül. Megoldjuk ezt a videóelem eseménykezelőivel.

A hangerőt saját csúszkával is módosíthatjuk.

Az ugrás bármelyik pozícióba a videóban (Seek) meglepően könnyen megvalósítható az currentTime tulajdonság beállításával.

A videó hossza csak a videometaadatok betöltése után derül ki, ezért várni kell a megfelelő eseményre.

A lejátszási lista egy listával van megvalósítva, amelyet az select HTML elemmel lehet implementálni.

Most a videólista szerkesztése következik: Hozzáadjuk a videóbejegyzések hozzáadását.

Amit hozzáadunk, azt el is kell tudni távolítani. Ezt hasonlóan végezzük el a megjegyzés kezelésekor szűrés segítségével.

A lejátszási lista nemcsak "könyvjelzőként" szolgál, hanem automatikusan lejátssza a videókat egymás után. Ez a lecke valósítja meg.

Az türelmetleneknek: Gombok a következő és az előző videóhoz.

Az első és az utolsó videó esetében különleges kezelés valósul meg: a Következő- és Előző gomboknak megfelelően le kell legyenek tiltva.

Most pedig elmentjük és betöltjük a lejátszási listánkat. Ez azonos módon történik, mint a teendők alkalmazásánál a böngésző helyi tárolójában.

Azokat a videókat, amelyek példaként szolgálnak a Videó-lejátszó alkalmazásban, eredeti formában megtekinthetitek itt (mindegyik CC tanúsítvány-licenc alatt áll, lásd a megfelelő webhelyeket):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

A useJsonFetch-Hooks példáján keresztül itt magyarázzuk el, hogyan lehet saját Hook függvényeket írni.

Az állapotváltoztatás trükkös lehet a useState beállítójával. Azonban useImmer használatával már nincs ilyen probléma.

Az UI gyorsabban felépül és gyorsabban reagál a felhasználói bemenetekre, ha nincsenek szükségtelen render hívások. A memo használatával megakadályozható, hogy az összetevők újrarajzolódjanak, ha a props-eik nem változnak.

A useCallback segítségével megakadályozhatjuk a gyermekkomponensek felesleges újra renderelését, amikor visszahívás (callback)-tulajdonságokat használunk.

A bonyolult számítások csak akkor legyenek végrehajtva a render függvényekben, ha szükséges. A useMemo segítségével ezeknek a számításoknak az eredményeit figyelembe véve eltárolhatjuk a függőségeket.

Itt foglalom össze a kurzus eredményeit, és javaslatokat adok arra vonatkozóan, hogy a résztvevők mit kellene megnézniük a kurzus után.