Lära sig och förstå React - praktisk handledning

Här kommer ämnena att presenteras som kommer att behandlas vidare, och motivationen bakom denna kurs kommer att förklaras.

Det finns numera otaliga UI-ramverk för JavaScript - varför ska det nu vara React? Förutom denna biblioteks obestridliga popularitet finns det också några djupgående skäl som talar för React.

Vi sätter upp utvecklingsmiljön i den här lektionen och skapar blitzsnabbt vår första React-app med npm create vite.

Efter att vi i förra lektionen har skapat en "ny" React-app ska vi här fokusera på att förstå strukturen av denna app och förklara hur React kan integreras i en webbsida.

En liten uppfriskning om var vs. let/const.

Destrukturering möjliggör att selektivt extrahera element från objekt och arrayer. Vid närmare granskning upptäcker man många användningsområden som gör JS-koden mer elegant och kompakt.

Funktioner är väsentliga i JS och har hittills endast deklarerats och definierats med nyckelordet function. ES6 introducerar en elegant och kort skrivstil som gör koden lättare att läsa och erbjuder en lösning på ett irriterande problem med this.

I NodeJs användes moduler redan från början, men det använde ursprungligen enbart CommonJs-modulformatet med require. Sedan ES6 finns det en moduldefinition i standarden och därmed de nya nyckelorden import/export. Numera stöds detta format av nästan samtliga (nya) JS-bibliotek och även NodeJs kan hantera det i de senaste versionerna.

Med JSX beskriver ni gränssnittet av en komponent och integrerar JS-uttryck i det. Projektfilen till videon innehåller den färdiga koden för denna handledningssektion.

Egna React-komponenter kan enkelt skrivas med hjälp av funktioner som returnerar JSX.

Denna lektion förklarar hur data och JavaScript-uttryck kan integreras i JSX.

Utan en tillstånd som kan ändras är det knappast möjligt att implementera en meningsfull app. I React används vanligtvis useState för detta. Denna lektion introducerar denna Hook och förklarar dess användning.

Props används för att skicka data till barnkomponenter. Här förklaras hur detta görs och vad man bör tänka på.

När props förändras dynamiskt kommer komponentens renderfunktion att kallas igen.

När en barnkomponent vill kommunicera med en förälderkomponent görs detta genom en återuppringningsprop.

Att göra-listan bör någon gång också vara avklarad. Här diskuterar vi hur detta fungerar i koden.

Utseendet av ett UI är utan tvekan viktigt. Därför förklarar jag här hur man kan göra detta med hjälp av biblioteket Emotion och hur man kan använda Prop className med det. Dessutom kommer vi att också se på attributet style-, med vilket man kan styla varje element separat i detalj.

Genom att filtrera to-do-listan kan to-dos delas in i två grupper.

Självklart måste man också kunna ta bort att-göra-uppgifter. Här förklaras hur detta fungerar genom array-filtrering.

Hittills har vi alltid "wrapperat" komponenter i DIVs. Det kan man dock ibland också spara sig.

Nu blir det intressant: Att-göra-uppgifter kan enkelt lagras ihållande i webbläsarens minne och naturligtvis även laddas igen, så att de "överlever" om sidan laddas om.

Med useEffect kan sidoeffekter integreras. Montering av en komponent kan också hanteras med denna funktion.

Kort sammanfattning av vår Att-göra-app och senaste förbättringar.

Video Player-appen skapas med skapa vite och det förklaras hur appen ska vara strukturerad. Projektfilen som bifogas videon innehåller färdig kod för video-spelaren.

Med attributet ref kan DOM-element refereras och åtkomst fås med useRef. Här gör vi det med vide-elementet.

Vi skapar den faktiska videospelaren som redan har knappar för Play, Pause och Stop.

Eftersom man aldrig behöver använda Play och Pause samtidigt, kombinerar vi dem i en knapp.

De egna kontrollerna för videoelementet styr också videon, vilket dock leder till att vår status vid Play/Pause-knappen inte justeras korrekt. Vi löser detta genom att använda händelseläsare på videoelementet.

Ljudvolymen kan vi också ändra med en egen reglage.

Att hoppa till en valfri position i videon (Sök) är förvånansvärt lätt att åstadkomma genom att ställa in egenskapen currentTime.

Videons längd bestäms först efter att videometadatan har laddats, så vi måste vänta på rätt händelse.

Spellistan implementeras med en lista som kan skapas med HTML-elementet välj.

Nu kommer bearbetningen av videolistan in i bilden: Vi lägger till att lägga till videopostningar.

Vad man lägger till måste man också kunna ta bort igen. Detta gör vi liknande med att filtrera som i en att göra-app.

Spellistan ska inte bara fungera som en "bokmärkeslista", utan också automatiskt spela videoklippen i följd. Detta implementeras i den här lektionen.

För otåliga: knappar för nästa och föregående video.

En specialbehandling för den första och sista videon implementeras: Next- och Previous-knapparna ska vara inaktiverade.

Nu sparar och laddar vi vår spellista. Detta görs analogt med att göra-appen i webbläsarens lokala lagring.

De videor som används som exempel i videospelar-appen kan du se här i sin originalversion (alla CC-licenser, se de relevanta webbplatserna):

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

Genom exemplet med useJsonFetch-kroken förklaras hur man kan skriva egna krokfunktioner.

Tillståndsändring med useStates setter kan vara knepigt. Med useImmer är det dock inga problem längre.

UI:en byggs upp snabbare och reagerar snabbare på användarinmatning om onödiga renderingsanrop inte sker. Med memo kan komponenter förhindras från att renderas om deras props inte ändras.

Med useCallback kan onödig omrendering av barnkomponenter förhindras när Callback-Props används.

Uppgifterna i renderfunktionerna bör endast utföras när det är nödvändigt. Med useMemo kan resultaten av dessa beräkningar cachelagras med hänsyn till beroenden.

Jag sammanfattar här resultaten från kursen och ger råd om vad deltagarna borde titta på efter kursen.