Lær at forstå React - den praktiske vejledning

Her præsenteres emnerne, der vil blive behandlet senere, og der vil blive dykket ned i motivationen bag denne kursus.

Der er utallige UI-rammeworks til JavaScript i dag – hvorfor skulle det netop være React? Udover bibliotekets utvivlsomme popularitet er der også nogle mere dybtgående grunde til at vælge React.

Vi opretter udviklingsmiljøet i denne lektion og skaber vores første React-app på ingen tid med npm create vite.

Efter at vi har oprettet en "frisk" React-app i den seneste lektion, vil vi her forklare strukturen af denne app og forklare, hvordan React kan integreres på en hjemmeside.

En lille opfrisker om emnet var vs. let/const.

Destruktion gør det muligt at ekstrahere specifikke elementer fra objekter og arrays. Ved nærmere undersøgelse åbner der sig mange anvendelsesmuligheder, der gør JS-kode mere elegant og kompakt.

Funktionerne er afgørende i JS og er hidtil kun blevet deklareret og defineret ved hjælp af nøgleordet function. ES6 introducerer en elegant og kort skrivemåde, der gør koden mere læsbar og tilbyder en løsning på et irriterende problem med this.

I NodeJs har moduler været brugt fra begyndelsen, men det startede kun med at bruge CommonJs-modulformatet med require. Siden ES6 er der kommet en moduldefinition i standarden og dermed de nye nøgleord import/export. For tiden understøttes dette format af næsten alle (nye) JS-biblioteker, og NodeJs kan også håndtere det i de nyeste versioner.

Med JSX beskriver du UI'et af en komponent og integrerer JS-udtryk i det. Projektfilen til videoen indeholder den færdige kode til denne tutorialssektion.

Det er meget nemt at skrive dine egne React-komponenter ved hjælp af funktioner, der returnerer JSX.

Denne lektion forklarer, hvordan data og JavaScript-udtryk kan integreres i JSX.

Uden en tilstand, der kan ændre sig, kan en meningsfuld app næppe implementeres. I React bruges normalt useState til dette. Denne lektion præsenterer denne hook og forklarer dens anvendelse.

Props bruges til at overføre data til børnekomponenter. Her forklares det, hvordan dette præcist sker, og hvad man skal være opmærksom på.

Hvis props ændrer sig dynamisk, bliver komponentens tilsvarende render-funktion kaldt igen.

Hvis et barnekomponent af forældrekomponenten vil fortælle noget, sker det via en tilbagekaldsprop.

Opgaver skal på et tidspunkt også være færdiggjort. Her diskuterer vi, hvordan dette fungerer i koden.

UI'ens udseende er utvivlsomt vigtigt. Derfor vil jeg her forklare, hvordan dette fungerer ved hjælp af biblioteket Emotion, og hvordan man kan bruge prop'et className. Derudover vil der også være fokus på det style-attribut, som gør det muligt at style hvert element individuelt.

Ved at filtrere To-do-arrayet kan To-do'erne opdeles i to grupper.

Selvfølgelig skal man også kunne slette opgaver. Her forklares det, hvordan dette fungerer ved at filtrere arrayet.

Indtil videre har vi altid "wrapet" komponenter i DIVs. Dette kan dog i visse tilfælde også undgås.

Nu bliver det interessant: To-do'er kan let gemmes vedvarende i browserens hukommelse og selvfølgelig også indlæses igen, så de "overlever" genindlæsningen af siden.

Med useEffect kan sideeffekter integreres. Montering af en komponent kan også håndteres med denne funktion.

Kort opsummering af vores to-do-app og sidste forbedringer.

Videoafspillerappen oprettes med create vite og der forklares, hvordan appen skal opbygges. Det vedhæftede projektfil til videoen indeholder den færdige kode til videoafspilleren.

Med attributten ref kan DOM-elementer refereres og få adgang til med useRef. Her gør vi det med video-elementet.

Vi opretter den faktiske videospiller, der allerede har knapper til afspilning, pause og stop.

Da man aldrig har brug for at have afspilning og pause på samme tid, kombinerer vi de to i én knap.

De egne kontrolelementer for videoelementet styrer også videoen, hvilket imidlertid medfører, at vores status ikke bliver tilpasset korrekt med afspil/pause-knappen. Vi løser dette ved hjælp af eventhandlers på videoelementet.

Vi kan også ændre lydstyrken ved hjælp af en egen knap.

At springe til en vilkårlig position i videoen (Seek) er overraskende let at gøre ved at sætte egenskaben currentTime.

Videoets længde er først fast efter indlæsning af video-metadata, så vi bliver nødt til at vente på det rigtige event.

Spillelisten implementeres ved hjælp af en liste, der kan implementeres med HTML-elementet vælg.

Nu kommer redigeringen af videolisten ind i billedet: Vi tilføjer tilføjelsen af videoindgange.

Det, man tilføjer, skal man også kunne fjerne igen. Dette gør vi lignende til to-do-appen ved at filtrere.

Spillelisten skal ikke kun fungere som en "bogmærkeliste", men også automatisk afspille videoerne efter hinanden. Dette realiseres i denne lektion.

Til de utålmodige: Knapper til næste og forrige video.

En specialbehandling for den første og den sidste video realiseres: Next- og Previous-knapperne skal være deaktiverede.

Nu gemmer og indlæser vi vores spilleliste. Dette sker analogt med to-do-appen i browserens lokale opbevaring.

I kan se videoerne, der bruges som eksempler i videoafspiller-appen, her i originalversionen (alle CC-licens, se de tilhørende hjemmesider):

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

Her forklares det, hvordan man kan skrive egne hook-funktioner ved hjælp af useJsonFetch--krogen som eksempel.

Tilstandsskift med setteren af useState kan være tricky. Med useImmer er det dog ikke længere et problem.

Brugergrænsefladen bygges hurtigere op og reagerer hurtigere på brugerinput, når der ikke sker unødvendige kald til render-funktionerne. Med memo kan man forhindre, at komponenter renderes, hvis deres egenskaber ikke ændrer sig.

Med useCallback kan unødvendig rendering af børnkomponenter forhindres, når der bruges Callback-Props.

Komplekse beregninger inden for renderfunktioner bør kun udføres, når det er nødvendigt. Med useMemo kan resultaterne af disse beregninger caches med hensyn til afhængighederne.

Jeg sammenfatter her resultaterne af kurset og giver henstillinger til, hvad deltagerne bør se efter kurset.