Reaģēšanas apgūšana un saprašana - prakses pamācība

Šeit tiks iepazīstināti ar tēmām, kas tiks apspriestas tālāk, un tiks skaidrots, kāda motīvācija ir aiz šī kursa.

Pastāv neierobežots skaits UI ietvaru JavaScript valodā - kāpēc tad izvēlēties tieši React? Papildus šīs bibliotēkas neapstrīdamai popularitātei pastāv daži pamata iemesli, kas runā par React.

Mēs šajā nodarbībā iestatām attīstības vidi un ātri izveidojam mūsu pirmo React lietotni ar npm create vite.

Pēc tam, kad šajā pēdējā nodarbībā esam izveidojuši "svežu" React lietotni, šeit būs jāsaprot šīs lietotnes struktūra un jāpaskaidro, kā React var tikt ievietots tīmekļa lapā.

Mazs atsvaidzinājums par var vs. let/const tēmu.

Destruktūrēšana ļauj īpaši izvilkt elementus no objektiem un masīviem. Rūpīgi pārdomājot, rodas daudz pielietojumu, kas padara JS kodu eleganti un kompakti.

Funkcijas ir būtiskas JS un tika deklarētas un definētas tikai ar atslēgas vārdu funkcija. ES6 ievieš eleganto un īsu pierakstu, kas padara kodu lasāmāku un piedāvā risinājumu nepatīkamam problēmai ar šo.

NodeJs tika izmantoti moduļi no paša sākuma, taču sākumā tas izmantoja tikai CommonJs moduļu formātu ar require. Kopš ES6 standarta ir moduļu definēšana un ar to jaunie atslēgvārdi import/export. Šo formātu pašlaik atbalsta gandrīz visi (jaunie) JS bibliotēkas un arī NodeJs ar jaunākajām versijām to apstrādā.

Ar JSX jūs apraksta komponentes lietotāja saskarni un iekļaujat JS izteikumus tajā. Video projekta failā ir iekļauts gatavais kods šī pamācības sadaļai.

Savas React komponentes var ļoti viegli rakstīt, izmantojot funkcijas, kas atgriež JSX.

Šajā nodarbībā tiks izskaidrots, kā datus un JavaScript izteiksmes var integrēt JSX.

Bez stāvokļa, kas var mainīties, ir grūti izveidot jēgpilnu lietotni. React parasti izmanto `useState` šim nolūkam. Šī nodarbība iepazīstina ar šo `Hook` un izskaidro tā lietojumu.

Props tiek izmantoti, lai dati tiktu nodoti bērnu komponentēm. Šeit tiek skaidrots, kā tieši tas notiek un uz ko jāņem vērā.

Ja mainoties dinamiskajām īpašībām, attiecīgā komponentes render funkcija tiks izsaukta vēlreiz.

Kad bērna komponente vēlas paziņot vecāku komponentei kaut ko, tas notiek, izmantojot atzvana īpašību (callback prop).

Uzdevumiem pēc kāda laika ir jābūt pabeigtiem. Šeit mēs apspriežam, kā tas darbojas kodā.

Izskats UI ir noliedzami svarīgs. Tāpēc es šeit izskaidroju, kā tas strādā, izmantojot bibliotēku Emotion, un kā izmantot īpašību className. Turklāt tiks apskatīts atribūts style-, kas ļauj stilēt katru elementu detalizēti atsevišķi.

Izfiltrējot uzdevumu masīvu, to-dos var sadalīt divās grupās.

Protams, ir jābūt iespējai dzēst arī uzdevumus. Šeit ir skaidrots, kā tas darbojas, filtrējot masīvu.

Līdz šim mēs vienmēr esam iepakojusi komponentes DIV elementos. Tomēr dažos gadījumos to var atstāt nepietiekoši.

Tagad tas kļūst interesanti: Darāmās lietas var diezgan vienkārši saglabāt pārlūka atmiņā un, protams, arī atkārtoti ielādēt, tādējādi tās "izdzīvo" lapas pārlādēšanu.

Ar useEffect ir iespējams integrēt blakusefektus. Šī funkcija arī ļauj apstrādāt komponentes montēšanu.

Īss kopsavilkums par mūsu darbību-App un pēdējās uzlabojumi.

Video atskaņotāja lietotne tiek izveidota ar create vite, un tiek skaidrots, kā lietotnei vajadzētu būt uzceltai. Video projektam pievienotajā failā ir iekļauts gatavs kods video atskaņotājam.

Izmantojot atribūtu ref, varat norādīt DOM elementus un piekļūt tiem ar useRef. Šeit mēs to darām ar video elementu.

Mēs izveidojam patieso video atskaņotāju, kuram jau ir pogas "Play", "Pauze" un "Pārtraukt".

Tā kā atskaņošanas un pauzes vienlaicīga izmantošana nav nepieciešama, mēs apvienojam abus šos elementus vienā pogā.

Paškontroles elementi vadīs video tāpat, kas novedīs pie tā, ka mūsu statuss neatbilst atskaņošanas/pauzes pogai. To labosim, izmantojot notikumu apstrādātājus video elementā.

Skaļumu varam mainīt arī ar īpašu regulētāju.

Jebkuras vietas video atskaņošanu var pārsteidzoši viegli veikt, iestatot currentTime rekvizītu.

Video garums tiek noteikts tikai pēc video metadatu ielādes, tāpēc mums jāgaida pareizais notikums.

Atskaņu saraksts tiek realizēts ar sarakstu, ko var implementēt, izmantojot HTML elements select.

Tagad nāk video saraksta rediģēšana: pievienosim video ierakstu pievienošanu.

Tas, ko pievieno, ir jāspēj noņemt. Mēs to darām līdzīgi kā To-do lietotnē, izmantojot filtrēšanu.

Atskaņošanas saraksts ne tikai kalpos kā "grāmatzīmju saraksts", bet arī automātiski atskaņos video secīgi vienu pēc otra. Tas tiks realizēts šajā nodarbībā.

Netiecīgiem: Pogas nākamajam un iepriekšējam video.

Pirmajai un pēdējai video tiek īstenota īpaša apstrāde: "Nākamais" un "Iepriekšējais" pogas ir jādeaktivizē attiecīgi.

Tagad saglabāsim un ielādēsim savu atkušņošanas sarakstu. Tas tiks paveikts analogi To-do-uzdevumu lietotnē pārlūka lokālajā krātuve.

Video, kas tiek izmantots kā piemērs Video atskaņotāja lietotnē, varat skatīties šeit oriģinālajā veidā (visi CC-Attribūcijas licences, skatiet attiecīgās tīmekļa vietnes):

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

Piemēram, šeit tiek izskaidrots, kā rakstīt savus āķa funkcijas, izmantojot useJsonFetch-āķi.

Stāvokļa maiņa, izmantojot useState iestatītāju, var būt sarežģīta. Taču ar useImmer tas vairs nav problēma.

LIetotāja saskarne tiek ātri izveidota un reaģē ātri uz lietotāja ievadiem, ja netiek veikti lieki renderēšanas funkciju izsaukumi. Memo palīdz novērst komponentu renderēšanu, ja to props nes maina.

Izmantojot useCallback, var novērst lieku bērnu komponentu renderēšanu, ja tiek izmantotas atzvana (Callback-) propertijas.

Izsmalkas aprēķināšanas iekš render funkcijām vajadzētu veikt tikai tad, ja tas ir nepieciešams. UseMemo palīdz saglabāt šo aprēķināšanas rezultātus, ņemot vērā atkarības.

Es šeit apkopoju kursa rezultātus un sniegšu norādes par to, ko dalībniekiem vajadzētu aplūkot pēc kursa.