Reageeri õppima ja mõistma - praktiline õpetus

Siin tutvustatakse teemasid, mis edaspidi käsitlemisele tulevad, ning räägitakse selle kursuse taga olevast motivatsioonist.

On olemas lugematul hulgal UI-raamistikke JavaScripti jaoks - miks peaks siis just React olema valik? Peale selle raamistiku vaieldamatu populaarsuse on ka mõned sügavamad põhjused, mis räägivad Reacti kasuks.

Me seadistame selles õppetükis arenduskeskkonna ja loome npm create vite abil silmapilkselt oma esimese Reacti rakenduse.

Pärast seda, kui me viimases loengus lõime "värske" Reacti rakenduse, keskendume siin selle rakenduse struktuuri mõistmisele ja selgitame, kuidas React saab veebisaidile lisatud olla.

Väike värskendus teemal var vs. let/const.

Destruktiveerimine võimaldab objektidest ja massiividest elementide sihipärast eraldamist. Põhjalikumal vaatlusel ilmnevad paljud rakendusvõimalused, mis muudavad JS-koodi elegantsiks ja kompaktsemaks.

Funktsioonid on JS-is olulised ja neid on seni deklareeritud ja määratletud ainult märksõnaga funktsioon. ES6 tutvustab elegantset ja lühikest kirjutamisviisi, mis muudab koodi loetavamaks ning pakub lahendust tüütu probleemi korral this.

NodeJs kasutas mooduleid juba algusest peale, kuid algselt kasutati ainult CommonJs moodulvormingut, kasutades require. Alates ES6-st on olemas mooduli defineerimine standardis ja uued võtmesõnad import/export. Praeguseks toetavad seda vormingut peaaegu kõik (uued) JS raamatukogud ja ka NodeJs saab sellesse uuemates versioonides hakkama.

JSX-ga kirjeldate komponendi kasutajaliidest ja integreerite sellesse JS-väljendeid. Videofaili projekt sisaldab selle õpetuse jaotise lõpptoote koodi.

Oma Reacti komponente saab väga lihtsalt kirjutada, tagastades JSX-i abil funktsioone.

See tund annab juhiseid, kuidas andmeid ja JavaScripti avaldisi saab JSX-is integreerida.

Ilma olekuta, mis saab muutuda, on peaaegu võimatu rakendada mõistlikku rakendust. Reactis kasutatakse selleks tavaliselt useState'i. See õppetund tutvustab seda haaki ja selgitab selle kasutamist.

Props on andmete edastamine alamkomponentidele. Siin selgitatakse, kuidas see täpselt toimub ja mida tuleb silmas pidada.

Kui propse muudetakse dünaamiliselt, siis kutsutakse komponendi vastav render-funktsioon uuesti välja.

Kui lapsekomponent soovib midagi vanemkomponendile edastada, toimub see tagasikutsumise properti kaudu.

Tegevused peaksid lõpuks ka olema tehtud. Siin arutame, kuidas see koodis toimib.

Välimus UI-s on kahtlemata oluline. Seetõttu selgitan siin, kuidas see toimib raamatu abil Emotion ja kuidas seda saab kasutada omaduse className kaudu. Lisaks käsitletakse veel ka atribuuti style-, millega saab eraldi stiilida iga elementi detailides.

ToDo-massiivi filtreerimise abil saab To-dod jagada kaheks grupiks.

Muidugi peab saama ka ülesandeid kustutada. Siin selgitatakse, kuidas see toimub massiivi filtreerimise abil.

Seni oleme alati komponendid DIV-elementidesse "pakkunud". Teatud juhtudel võib selle aga ka vahele jätta.

Nüüd muutub asi huvitavaks: Ülesandeid saab üsna lihtsalt brauseri mälus püsivalt salvestada ja loomulikult ka uuesti laadida, nii et need "üle-elavad" lehe uuesti laadimise.

Kasutades useEffecti on võimalik integreerida kõrvaltoimeid. Seda funktsiooni saab kasutada ka komponendi paigaldamiseks.

Lühike ülevaade meie tegevuste rakendusest ja viimased täiustused.

Video-mängija rakendus luuakse create vite abil ning selgitatakse, kuidas rakendus peaks olema üles ehitatud. Videole lisatud projektfail sisaldab valmis koodi video-mängijale.

Atribuudiga ref saab viidata DOM-elementidele ja selle kaudu kasutada useRefi. Siin me teeme seda videoelemendi puhul.

Me loome tegeliku videopleieri, millel on juba nupud esitamiseks, pausiks ja peatamiseks.

Kuna me ei vaja kunagi mängimise ja pausi nuppu korraga, kombineerime need kaks ühte nuppu.

Videoelemendi enda kontrollid juhivad videot samamoodi, mis aga tähendab, et meie olekut ei kohandata vastavalt esitamise/pausi nupule. Selle parandame videoelemendi sündmuste käsitlejate abil.

Heli valjustust saame muuta ka oma regulaatori abil.

Hüppamine suvalisse kohta videos (otsimine) on üllatavalt lihtne, kasutades currentTime omadiku määramist.

Video pikkus selgub alles pärast video metaandmete laadimist, seetõttu peame ootama õiget sündmust.

Esitusloend rakendatakse loendina, mida saab ellu viia HTML-elemendiga select.

Nüüd tuleb videoloendi töötlemine mängu: lisame videote sissekannete lisamise.

Mida lisatakse, peab saama ka kustutada. Seda teeme sarnaselt ülesannete rakendusega filtrite abil.

Esitusloend peaks toimima mitte ainult „järjehoidjana“, vaid ka esitama videod automaatselt järjestikku. See on selles õppetükis teostatud.

Kannatamatutele: Nupud järgmise ja eelmise video jaoks.

Esimese ja viimase video jaoks on rakendatud erikohtlemine: järgmine ja eelmine nupud peaksid vastavalt olema keelatud.

Nüüd salvestame ja laeme oma esitusloendi. Seda tehakse sarnaselt tegevusloendurirakendusega brauseri kohalikus salvestusruumis.

Videod, mida kasutatakse näitena Video Playeri rakenduses, saate siin algversioonis vaadata (kõik CC-litsentsid; vt vastavaid veebisaite):

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

Näiteks selgitatakse siin, kuidas luua omaenda konksufunktsioone useJsonFetch-konksu näitel.

Olekumuutus useState setteriga võib olla trikine. Kuid useImmer abil pole see enam probleem.

Kasutajaliides ehitatakse kiiremini üles ja reageerib kiiremini kasutaja sisenditele, kui rendifunktsioone ei kutsuta tarbetult. Memo abil saab vältida komponentide renderdamist, kui nende prop'id ei muutu.

Kasutades useCallback, saab vältida laste komponentide tarbetut renderdamist, kui kasutatakse tagasihelistamis-Props.

Rasked arvutused render-funktsioonis peaksid olema tehtud ainult vajadusel. Kasutades useMemo saab neid arvutusi tulemusi arvestades vahemällu salvestada.

Siin ma kokkuvõtan kursuse tulemused ning annan juhiseid selle kohta, mida osalejad peaksid kursuse järel vaatama.