Mokytis ir suprasti „React“ – praktinis vadovas

Čia bus pristatyti temos, kurios bus aptariamos toliau, ir bus kalbama apie šio kurso motyvaciją.

Šiuo metu yra begalė UI karkasų JavaScript – kodėl dabar būtent turėtų būti pasirinktas React? Be šios bibliotekos ginčytinos populiarumo, taip pat yra keletas gilesnių priežasčių, kodėl verta pasirinkti React.

Mūsų šioje pamokoje sukonfigūruosime kūrimo aplinką ir akimirksniu sukursime mūsų pirmąją React programėlę naudodami npm create vite.

Po to, kai paskutinioje pamokoje sukūrėme „naują“ React programą, čia bus nagrinėjama šios programos struktūra, taip pat bus paaiškinta, kaip React gali būti integruotas į svetainę.

Šiek tiek atnaujinto informacijos apie var ir let/const skirtumus.

Destruktūrizavimas leidžia ištraukti elementus iš objektų ir masyvų. Atidžiai pažvelgus, atsiranda daug taikymo galimybių, kurios padaro JS kodą elegantiškesnį ir kompaktiškesnį.

Funkcijos JavaScript'e yra esminės ir iki šiol buvo deklaruojamos ir apibrėžiamos tik naudojant funkcija raktažodį. ES6 įveda elegantišką ir trumpesnį rašymo būdą, kuris daro kodą skaitytinesnį ir siūlo sprendimą nuolatinei problemai su šiuo.

NodeJs moduli buvo naudojami nuo pat pradžių, tačiau pradžioje jis palaikė tik CommonJs modulų formatą su require. Nuo ES6 buvo įtrauktas modulio apibrėžimas į standartą, todėl atsirado nauji raktiniai žodžiai import/export. Šiuo metu šis formatas palaikomas beveik visose (naujosiose) JS bibliotekose, o NodeJs taip pat gali su tuo susidoroti naujausiose versijose.

Su JSX aprašote komponento UI ir integruojate JS išraiškas. Vaizdo projekto failas yra su pilnu kodo šio vadovo skyriaus pavyzdžiu.

Asmeniniai „React“ komponentai gali būti labai lengvai rašomi naudojant funkcijas, kurios grąžina JSX.

Šioje pamokoje bus naujų dalykų - kaip duomenys ir JavaScript reiškiniai gali būti integruoti į JSX.

Beveik neįmanoma įgyvendinti prasmingos programėlės be būsenos, kuri gali keistis. "React" šiai sričiai įprastai naudojamas "useState" kintamasis. Šioje pamokoje pristatomas šis "hook" ir paaiškinama, kaip jį naudoti.

Props yra duomenų perdavimas vaikų komponentams. Čia paaiškinama, kaip tai tiksliai atliekama ir į ką reikia atkreipti dėmesį.

Jei savybės keičiasi dinamiškai, komponento atitinkama render funkcija bus iškviečiama iš naujo.

Jei vaikinė komponentė nori pranešti tėvinės komponentės, tai galima padaryti naudojant grąžinamąjį kvietimą-prop.

Užduotys turi būti baigtos kažkada. Čia mes aptariame, kaip tai veikia kode.

Išvaizda vartotojo sąsajos yra neabejotinai svarbi. Todėl čia aš paaiškinsiu, kaip tai veikia naudojant Emotion biblioteką ir kaip galima naudoti prop className. Be to, bus aptartas style- atributas, kurį galima naudoti norint kiekvieną elementą individualiai stilizuoti.

Naudodamiesi užduočių sąrašo filtravimu, užduotys galima suskirstyti į dvi grupes.

Žinoma, taip pat reikia turėti galimybę ištrinti užduotis. Čia paaiškinama, kaip tai padaryti naudojant masyvo filtravimą.

Per iki šiol visada įvyniojome komponentus į DIV elementus. Tačiau tam atvejais galima taip pat to išvengti.

Dabar tai tampa įdomu: užduotys gali būti gana lengvai išsaugomos naršyklės atmintyje ir žinoma, taip pat galima jas įkelti vėl, todėl jos "išgyvens" puslapio perkrovimą.

Su useEffect galima integruoti puslapio efektus. Šią funkciją galima naudoti ir valdyti komponento montavimą.

Trumpas mūsų užduočių programėlės aprašymas ir paskutinės tobulinimo detalės.

Vaizdo grotuvą kuria su create vite ir paaiškina, kaip turėtų būti sudaryta programa. Prie vaizdo pridėtas projekto failas yra su pilnu kodu vaizdo grotuvui.

Naudodami atributą ref, galime nurodyti DOM elementus ir pasiekti juos naudodami useRef. Čia tai darome su vaizdo elementu.

Mes sukursime tikrąją vaizdo grotuvą, kuris jau turi mygtukus „Groti“, „Pauzė“ ir „Stabdyti“.

Kadangi grojimo ir pauzės vienu metu niekada nereikia, mes juos sujungiame į vieną mygtuką.

Vaizdo elemento pagalbinių valdiklių kontrolė taip pat valdo vaizdo įrašą, tačiau tai reiškia, kad mūsų būsena nepriimtinai nesikeičia, kai spustelėjamas paleisti/pauzė mygtukas. Tai ištaisome naudodamiesi įvykių tvarkytojais vaizdo elementui.

Garsą taip pat galime keisti naudodamiesi atskiru reguliatoriumi.

Į bet kurį vaizdo padėtį galima labai lengvai nukreipti nustatant savybę dabartinisLaikas.

Vidzio ilgis bus žinomas tik įkraunant vaizdo metaduomenis, todėl turime palaukti teisingo renginio.

Grotuvas yra sukuriamas naudojant sąrašą, kuris gali būti įgyvendintas naudojant HTML select elementą.

Dabar ateina vaizdo sąrašo redagavimas: mes pridedame vaizdo įrašų pridėjimą.

Kas pridėta, turi būti galima ištrinti. Mes tai darome panašiai kaip ir su To-do programėle filtruojant.

Grotuvas neturi būti tik „žymeklių sąrašu“, bet taip pat automatiškai turėtų paleisti vaizdo įrašus vienas po kito. Tai įgyvendinama šiame pamokoje.

Tiems, kas neturi kantrybės: mygtukai skirti kitam ir ankstesniam vaizdo įrašui.

Pirmajai ir paskutinei vaizdo įrašų vietovei numatyta speciali apdorojimo procedūra: atitinkamai "Kitas" ir "Ankstesnis" mygtukai turėtų būti išjungti.

Dabar išsaugome ir įkelėme mūsų grojaraštį. Tai atliekama analogiškai kaip ir užduočių programėlėje naršyklės local storage.

Vaizdo įrašai, naudojami kaip pavyzdys vaizdo grotuvo programėlėje, gali būti peržiūrimi čia originalo versijoje (visi su CC-Attribution licencija, žr. atitinkamas interneto svetaines):

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

Pavyzdžiui, čia paaiškinama, kaip galima kurti savo kodus su funkcijomis.

Būsenos keitimas naudojant useState nustatiklį gali būti apgavystė. Tačiau naudojant useImmer tai nebereikia.

Vartotojo sąsaja yra greičiau sukurta ir reaguoja greičiau į vartotojo įvestis, kai nevyksta nereikalingi atvaizdavimo funkcijų iškvietimai. Naudojant memo galima užkirsti kelią komponentams būti atvaizduoti, kai jų savybės nepasikeičia.

Su useCallback galima išvengti nereikalingo vaikų komponentų atvaizdavimo, kai naudojami Callback-Props.

Detalus skaičiavimas viduje metodų pateikimo funkcijose turėtų būti atliekamas tik tada, kai tai būtina. Naudojant useMemo, šių skaičiavimų rezultatai gali būti kesuoti atsižvelgiant į priklausomybes.

Aš čia apibendrinsiu kurso rezultatus ir pateiksiu rekomendacijas dalyviams, ką jie turėtų pažiūrėti po kurso.