Lære og forstå React - den praktiske opplæringen

Her vil emnene som blir behandlet videre, bli presentert, samt motivasjonen bak denne kurset vil bli diskutert.

Det finnes nå utallige UI-rammeverk for JavaScript - hvorfor skal det nå være akkurat React? Ved siden av populariteten til dette biblioteket, er det også noen mer dyptgående grunner som taler for React.

Vi setter opp utviklingsmiljøet i denne leksjonen og lager raskt vår første React-App med npm create vite.

Etter at vi har opprettet en "fersk" React-app i forrige leksjon, skal vi her prøve å forstå strukturen til denne appen og forklare hvordan React kan innlemmes i en nettside.

En liten oppfrisker om emnet var vs. let/const.

Dekonstruksjon tillater målrettet ekstrahering av elementer fra objekter og matriser. Ved nærmere undersøkelse oppstår det mange bruksområder som gjør JS-koden mer elegant og mer kompakt.

Funksjoner er essensielle i JS og har hittil kun blitt deklarert og definert ved hjelp av nøkkelordet function. ES6 introduserer en elegant og kort skrivemåte som gjør koden mer lesbar og gir en løsning på et irriterende problem med this.

I NodeJs har moduler blitt brukt fra begynnelsen av, men i begynnelsen brukte det utelukkende CommonJs-modulformatet med require. Siden ES6 er det en standardmoduldefinisjon og dermed de nye nøkkelordene import/export. Dette formatet støttes nå av nesten alle (nye) JS-biblioteker, og NodeJs kan også håndtere det i de nyeste versjonene.

Med JSX beskriver du UI-en til en komponent og integrerer JS-uttrykk i den. Prosjektfilen til videoen inneholder koden ferdig til dette opplæringsavsnittet.

Det er veldig enkelt å skrive egne React-komponenter ved å bruke funksjoner som returnerer JSX.

Denne leksjonen forklarer hvordan data og JavaScript-uttrykk kan integreres i JSX.

Uten en tilstand som kan endres, er det vanskelig å implementere en meningsfull app. I React brukes vanligvis useState til dette formålet. Denne leksjonen introduserer denne kroken og forklarer bruken av den.

Props brukes til å sende data til barnekomponenter. Her blir det forklart nøye hvordan dette gjøres og hva man må være oppmerksom på.

Hvis props endres dynamisk, vil komponentens tilhørende renderfunksjon bli kalt på nytt.

Her vil det bli forklart hvordan oppgaveappen vil være strukturert. Videoen er basert på en prosjektfil som inneholder ferdig kode for denne delen av opplæringen.

Hvis et barnekomponent vil informere foreldrekomponenten om noe, skjer dette via en tilbakeringingsprop.

Oppgaver skal en gang bli fullført. Her diskuterer vi hvordan dette fungerer i koden.

Utseendet til et brukergrensesnitt er uten tvil viktig. Derfor forklarer jeg her hvordan dette fungerer med biblioteket Emotion og hvordan man kan bruke egenskapen className med det. I tillegg vil jeg også ta for meg attributtet style-, som lar deg style hvert element separat i detalj.

Ved å filtrere gjennom To-do-Arrayet kan To-dos deles inn i to grupper.

Selvfølgelig må man også kunne slette gjøremål. Her blir det forklart hvordan dette fungerer ved å filtrere i en matrise.

Tidligere har vi alltid pakket komponenter inn i DIVer. Dette kan imidlertid spares i visse tilfeller.

Nå blir det interessant: To-dos kan ganske enkelt lagres vedvarende i nettleserens minne og selvfølgelig lastes inn igjen, slik at de "overlever" siden blir lastet på nytt.

Med useEffect kan du integrere sideeffekter. Montering av en komponent kan også behandles med denne funksjonen.

Kort oppsummering av vår gjøremålsapp og siste forbedringer.

Videoavspillerappen er laget med create vite og det blir forklart hvordan appen skal settes opp. Prosjektfilen som er vedlagt videoen inneholder den ferdige koden for videoavspilleren.

Med attributtet ref kan vi referere til DOM-elementer og få tilgang til dem med useRef. Her gjør vi det med videodelen.

Vi lager den faktiske videospilleren, som allerede har knapper for Spill av, Pause og Stopp.

Siden man aldri trenger å bruke Play og Pause samtidig, kombinerer vi disse to i en knapp.

De egne kontroller for videoelementet styrer også videoen, noe som imidlertid fører til at statusen vår på Play/Pause-knappen ikke blir riktig justert. Vi løser dette ved hjelp av hendelseshåndterere på videoelementet.

Volumet kan også endres ved hjelp av en egen justering.

Å hoppe til en vilkårlig posisjon i videoen (søke) er overraskende enkelt å gjøre ved å sette egenskapen currentTime.

Videoets lengde bestemmes først etter at videometadataene er lastet, så vi må vente på riktig hendelse.

Spillelisten implementeres ved hjelp av en liste som kan realiseres med HTML-elementet select.

Vi bruker useEffect her for å reagere på endringer av src-egenskapen og tilbakestille tilstanden til videospilleren.

Spillelisten blir transformert fra faste oppføringer til en matrise.

Nå kommer redigeringen av videolisten inn i bildet: Vi legger til legging av videooppføringer.

Det man legger til, må man også kunne fjerne igjen. Dette gjør vi på en lignende måte som i en gjøremålsapp, ved å filtrere.

Spillelisten skal ikke bare fungere som en "bokmerkeliste", men også automatisk spille av videoene etter hverandre. Dette blir realisert i denne leksjonen.

For utålmodige: Knapper for neste og forrige video.

En spesialbehandling for den første og den siste videoen vil bli realisert: Next- og Previous-knappene skal være deaktivert tilsvarende.

Nå lagrer og laster vi inn spillelisten vår. Dette gjøres analogt med oppgave-appen i nettleserens lokale lagring.

Videoene som brukes som eksempler i videoavspillerappen, kan du se her i originalversjonen (alle med CC-lisens, se de respektive nettsidene):

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

Ved hjelp av useJsonFetch-hooks-eksempelet blir det forklart hvordan man kan skrive sine egne hook-funksjoner.

Tilstandsendring med setteren til useState kan være litt utfordrende. Med useImmer er det imidlertid ikke lenger et problem.

UI-en vil bli bygget raskere og reagerer raskere på brukerinntasting når unødvendige kall til render-funksjonene unngås. Med memo kan du forhindre at komponenter blir rendret når deres props ikke endres.

Med useCallback kan unødvendig rendering av barnkomponenter forhindres når Callback-Props brukes.

Kostbare beregninger innenfor renderfunksjoner bør bare utføres når det er nødvendig. Med useMemo kan resultatene av disse beregningene caches med tanke på avhengigheter.

Jeg oppsummerer her resultatene av kurset og gir tips om hva deltakerne bør se på i etterkant av kurset.