Naučite se in razumite React - praksa vadnica

Tukaj bodo predstavljene teme, ki jih bomo nadalje obravnavali, in osredotočili se bomo na motivacijo za ta tečaj.

Obstaja že neskončno število ogrodij UI za JavaScript - zakaj naj bi bil izbran ravno React? Poleg nedvomne priljubljenosti te knjižnice obstajajo tudi nekateri globlji razlogi, ki govorijo v prid Reactu.

V tej lekciji bomo nastavili razvojno okolje in hitro ustvarili našo prvo React aplikacijo z npm create vite.

Po tem, ko smo v prejšnjem poglavju ustvarili "svež" React-ov program, se bo tukaj osredotočilo na razumevanje strukture tega programa in na pojasnitev, kako lahko vstavimo React v spletno stran.

Majhno osveževanje na temo var proti let/const.

Razčlenjevanje omogoča ciljno izvlečenje elementov iz objektov in nizov. Pri natančnem pregledu se pokažejo številne možnosti uporabe, ki naredijo JS kodo bolj elegantno in kompaktno.

Funkcije so v JS bistvene in doslej so bile deklarirane in določene samo prek ključne besede funkcija. ES6 uvaja eleganten in kratek zapis, ki naredi kodo bolj berljivo in ponuja rešitev za težave z this.

V NodeJs so bili moduli uporabljeni že od samega začetka, vendar je sprva uporabljal izključno format modula CommonJs s require. Od ES6 dalje obstaja standard za opredelitev modula in s tem novi ključni besedi import/export. Danes podpira ta format skoraj vse (nove) JS knjižnice in tudi NodeJs se lahko spopade z njim v najnovejših različicah.

Z JSX opisujete UI komponente in vključujete JS izraze vanj. Datoteka projekta v videoposnetku vsebuje končno kodo tega navodilnega odseka.

Lastne komponente React je mogoče zelo enostavno napisati z uporabo funkcij, ki vračajo JSX.

Ta lekcija pojasnjuje, kako je mogoče v JSX vključiti podatke in JavaScript izraze.

Brez stanja, ki se lahko spremeni, je težko implementirati smiselno aplikacijo. V React-u se za to običajno uporablja useState. Ta lekcija predstavi ta kavelj in pojasni njegovo uporabo.

Props služijo za posredovanje podatkov otroškim komponentam. Tukaj je pojasnjeno, kako točno se to zgodi in na kaj je treba biti pozoren.

Ko se sestavine spremenijo dinamično, se ustrezna funkcija za renderiranje komponente ponovno kliče.

Ko želi otroška komponenta sporočiti nekaj starševski komponenti, to stori preko Callback-Propsa.

Naloge naj bi bile nekega dne tudi dokončane. Tukaj bomo razpravljali, kako to deluje v kodi.

Videz uporabniškega vmesnika je nedvomno pomemben. Zato tukaj pojasnjujem, kako to deluje s pomočjo knjižnice Emotion in kako lahko uporabite prop className. Poleg tega se osredotočamo tudi na atribut style-, s katerim lahko določeno element style-amo posebej.

Z filtriranjem seznama opravil jih lahko razdelimo v dve skupini.

Seveda je treba biti sposoben tudi izbrisati opravila. Tukaj je pojasnjeno, kako to deluje z filtriranjem polja.

Doslej smo komponente vedno "zavili" v DIV-e. V nekaterih primerih pa si jih lahko tudi prihranimo.

Zdaj postane zanimivo: Seznami opravil se lahko preprosto trajno shranijo v brskalniškem pomnilniku in seveda tudi ponovno naložijo, da preživijo ponovno nalaganje strani.

Z uporabo useEffect lahko vključimo stranske učinke. Namestitev komponente lahko obravnavamo tudi s to funkcijo.

Kratek povzetek naše aplikacije za opravila in zadnje izboljšave.

Aplikacija predvajalnika videoposnetkov je ustvarjena s create vite in pojasnjeno je, kako naj bi bila aplikacija zgrajena. Projektna datoteka, ki je priložena videoposnetku, vsebuje končno kodo za predvajalnik videoposnetkov.

Z atributom ref lahko navedemo elemente DOM in z useRef nanje dostopamo. Tukaj to počnemo z elementom videa.

Izdelali bomo dejanski video predvajalnik, ki že vsebuje gumbe za predvajanje, premor in ustavitev.

Ker Play in Pause ne potrebujemo istočasno, ju združimo v en gumb.

Lastne kontrolnike elementa videa upravljajo tudi video, kar pa povzroči, da se naš status pri gumbu »Predvajaj/Zaustavi« ne prilagodi ustrezno. To popravimo z uporabo dogodkovnih ročic pri elementu videa.

Glasnost lahko prilagodimo tudi prek lastnega regulatorja.

Prelikanje na katerokoli mesto v videoposnetku (iskanje) je presenetljivo enostavno doseči z nastavitvijo lastnosti currentTime.

Dolžina videoposnetka se določi šele po nalaganju metapodatkov videoposnetka, zato moramo počakati na pravi dogodek.

Seznam predvajanja se uresniči z uporabo seznama, ki se lahko implementira z HTML elementom select.

Zdaj pa je na vrsti urejanje seznama videoposnetkov: Dodajamo dodajanje vnosov videoposnetkov.

To, kar dodamo, moramo tudi lahko izbrisati. To storimo podobno kot pri aplikaciji za opravila s filtriranjem.

Seznam predvajanja naj ne služi le kot "seznam zaznamkov", ampak tudi samodejno predvaja videoposnetke zaporedoma. To se bo realiziralo v tem učnem gradivu.

Za nestrpne: Gumbi za naslednji in prejšnji video.

Obdelava posebej za prvi in zadnji video je uresničena: gumba Next in Previous naj bosta ustrezno onemogočena.

Zdaj shranimo in naložimo naš predvajalnik. Točno tako kot aplikacija za opravila v lokalnem pomnilniku brskalnika.

Video posnetke, ki se uporabljajo kot primer v aplikaciji za predvajanje videoposnetkov, si lahko ogledate tukaj v originalu (vsi pod licenco CC-Attribution, glejte ustrezne spletne strani):

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

Na primeru funkcije useJsonFetch bo tukaj pojasnjeno, kako napisati lastne funkcije hvatanja.

Sprememba stanja s setterjem funkcije useState lahko postane zapletena. Z uporabo funkcije useImmer pa tega ni več težava.

Uporabniški vmesnik se bo hitreje zgradil in odzival na uporabnikove vnose, če ne pride do nepotrebnih klicev funkcij za prikazovanje. Z memo lahko preprečimo, da se komponente prikažejo, če se njihovi propi ne spremenijo.

Z uporabo useCallback lahko preprečimo nepotrebno ponovno upodabljanje otroških komponent, kadar se uporabljajo Callback-Props.

Zaljudne izračune znotraj funkcij za izris je treba izvajati samo po potrebi. Z uporabo useMemo se lahko rezultati teh izračunov predpomnijo ob upoštevanju odvisnosti.

Tukaj povzemam rezultate tečaja in podajam napotke, kaj bi se morali udeleženci nato ogledati po končanem tečaju.