Oppia ja ymmärtää reagoida - käytännön opas

Tässä esitellään aiheet, joita käsitellään jatkossa, ja tutustutaan tämän kurssin taustalla olevaan motivaatioon.

On syytä, miksi juuri React on valittava.

Asetamme tässä oppitunnissa kehitysympäristön ja luomme npm create vite avulla ensimmäisen React-sovelluksemme hetkessä.

Viimeisessä oppitunnissa olemme luoneet "tuoreen" React-sovelluksen, joten tässä on tarkoituksena ymmärtää tämän sovelluksen rakenne ja selittää, miten React voidaan upottaa verkkosivulle.

Pieni kertaus aiheesta var vs. let/const.

Destructuring mahdollistaa elementtien tarkoituksellisen erottamisen objekteista ja taulukoista. Tarkemmin tarkasteltuna avautuu monia käyttömahdollisuuksia, jotka tekevät JS-koodista eleganssia ja tiiviimpää.

Toiminnot ovat JS: ssä olennaisia ​​ja niitä on tähän asti julistettu ja määritetty vain avainsanalla funktion. ES6 esittelee tyylikkään ja lyhyen kirjoitustyylin, joka tekee koodista helpommin luettavan ja tarjoaa ratkaisun ärsyttävään this-ongelmaan.

NodeJs:ssä moduuleja on käytetty alusta alkaen, mutta aluksi se käytti vain CommonJs-moduuliformaattia require. ES6:n myötä on standardoitu modulin määrittely ja siten uudet avainsanat import/export. tätä formaattia tuetaan nykyään lähes kaikissa (uusissa) JS-kirjastoissa ja myös NodeJs osaa käsitellä sitä uusimmissa versioissaan.

Käytät JSX:ää kuvaamaan komponentin käyttöliittymää ja integroimaan siihen JS-lausekkeita. Videon projektitiedosto sisältää valmiin koodin tähän opetusosiin.

Omat React-komponentit voidaan kirjoittaa hyvin helposti palauttamalla JSX:ää hyödyntäviä funktioita.

Tämä oppitunti selittää, miten dataa ja JavaScript-ilmaisuja voidaan integroida JSX:ään.

Ilman tilaa, joka voi muuttua, on vaikea toteuttaa järkevää sovellusta. Reactissa tähän käytetään yleensä useState-koukkua. Tässä oppitunnissa esitellään tämä koukku ja selitetään sen käyttö.

Props välittävät tietoja alikomponenteille. Tässä selitetään, miten tämä tapahtuu ja mitä on otettava huomioon.

Kun ominaisuudet muuttuvat dynaamisesti, komponentin vastaava render-funktio kutsutaan uudelleen.

Tässä kerrotaan, miten tehtäväluettelon sovellus rakennetaan. Videon mukana toimitetaan projektitiedosto, joka sisältää valmiin koodin tähän opetusjaksoon.

Kun lapsikomponentti haluaa kertoa jotain vanhemmalle komponentille, se tapahtuu callback-ominaisuuden avulla.

Tehtävien pitäisi lopulta myös olla suoritettu. Täällä keskustelemme siitä, miten tämä toimii koodissa.

UI:n ulkonäkö on epäilemättä tärkeää. Siksi selitän tässä, miten se toimii Emotion-kirjaston avulla ja miten voit käyttää siihen className -ominaisuutta. Lisäksi käsitellään vielä style-attribuuttia, jonka avulla voit muokata jokaista elementtiä erikseen yksityiskohtaisesti.

Tehtäväluettelon suodattamalla To-do-taulukkoa voidaan jakaa To-doihin kahteen ryhmään.

Tietysti tehtäviä täytyy myös voida poistaa. Tässä kerrotaan, miten tämä tapahtuu taulukon suodattamisen avulla.

Aiemmin olemme aina "kääritseet" komponentit DIV-elementteihin. Tietyissä tapauksissa tämä voi kuitenkin olla tarpeetonta.

Nyt se käy mielenkiintoiseksi: Tehtäviä (To-dos) voi melko helposti tallentaa pysyvästi selaimeen ja tietysti myös ladata uudelleen, jotta ne "selviävät" sivun uudelleenlatauksesta.

Käyttämällä useEffectia voit integroida sivuvaikutuksia. Tämän funktion avulla voit myös käsitellä komponentin asennusta.

Pieni yhteenveto tehtäväsovelluksestamme ja viimeisimmistä parannuksista.

Videosoitinsovellus luodaan create vite -toiminnolla ja siinä selitetään, miten sovelluksen pitäisi olla rakennettu. Videolle liitetty projektitiedosto sisältää valmiin koodin videosoittimelle.

Käyttämällä attribuuttia ref voimme viitata DOM-elementteihin ja käyttää useRefia niiden kautta. Tässä tapauksessa teemme sen videoelementille.

Luomme itse videosoittimen, jolla on jo painikkeet toistoon, pauselle ja pysäyttämiseen.

Koska Play- ja Pause-toimintoja ei koskaan tarvita samanaikaisesti, yhdistämme ne yhdeksi painikkeeksi.

Omat ohjausobjektit ohjaavat videoelementtiä samoin, mutta tämä johtaa siihen, että tilamme ei päivity toistoa/taukoa-painikkeessa. Korjaamme tämän tapahtumankäsittelijöillä videoelementissä.

Äänenvoimakkuutta voidaan säätää myös omalla säätimellä.

Hyppääminen mihin tahansa kohtaan videota (Seek) on hämmästyttävän helppoa asettamalla ominaisuuden currentTime.

Videon pituus varmistuu vasta video-metadatan lataamisen jälkeen, joten meidän täytyy odottaa oikeaa tapahtumaa.

Toistonluettelo on toteutettu listalla, joka voidaan toteuttaa HTML-elementillä select.

Käytämme useEffect-koukussa reagoimaan src-ominaisuuden muutoksiin ja nollata videosoittimen tilan.

Soittolista muunnetaan kiinteistä tiedoista taulukoksi.

Nyt tulee videoluettelon käsittely: Lisäämme videomerkintöjen lisäämisen.

Mitä lisäämme, sen pitää voida poistaa. Teemme tämän samalla tavalla kuin tehdään To-Do-sovelluksessa suodattamalla.

Soittolistan ei tule toimia pelkkänä "Kirjanmerkkilistana", vaan myös toistaa videot automaattisesti peräkkäin. Tämä toteutetaan tässä oppitunnissa.

Kärsimättömille: Painikkeet seuraavaa ja edellistä videota varten.

Erityiskäsittely toteutetaan ensimmäiselle ja viimeiselle videolle: Next- ja Previous-painikkeiden tulee olla vastaavasti poissa käytöstä.

Nyt tallennamme ja lataamme vielä soittoluettelomme. Tämä tapahtuu samalla tavalla kuin tehtäväsovelluksessa, joka tallennetaan selaimesi paikalliseen tallennustilaan.

Videot, jotka toimivat esimerkkeinä video-soittosovelluksessa, voit katsoa alkuperäisinä täältä (kaikki CC-lisenssillä, katso vastaavat verkkosivut):

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

Esimerkkinä useJsonFetch--koukun avulla tässä selitetään, miten voi kirjoittaa omia koukkutoimintoja.

Tilanmuutoksen tekeminen useState:n asettelijalla voi olla hankalaa. Käyttäen useImmer:ia se ei kuitenkaan enää ole ongelma.

UI rakentuu nopeammin ja reagoi nopeammin käyttäjän syötteisiin, jos renderöintifunktiota kutsutaan turhaan. Muistio estää komponenttien renderöinnin, jos niiden ominaisuudet eivät muutu.

Käyttämällä useCallback voi estää turhan renderöinnin lapsikomponenteille, kun käytetään Callback-propeja.

Monimutkaiset laskelmat renderointifunktioissa tulisi suorittaa vain tarvittaessa. useMemo-hookilla näiden laskelmien tulokset voidaan välimuistaa riippuvuuksia huomioiden.

Tässä lyhennän kurssin tulokset yhteen ja annan vinkkejä siitä, mitä osallistujien pitäisi katsoa kurssin jälkeen.