React leren en begrijpen - de praktijktutorial

Hier worden de onderwerpen geïntroduceerd die verder zullen worden behandeld, en wordt ingegaan op de motivatie achter deze cursus.

Er zijn inmiddels ontelbare UI-frameworks voor JavaScript - waarom zou het nu specifiek React moeten zijn? Naast de onbetwiste populariteit van deze bibliotheek zijn er ook een paar diepgaandere redenen die voor React spreken.

We stellen in deze les de ontwikkelingsomgeving in en maken met npm create vite in een handomdraai onze eerste React-applicatie.

Na het aanmaken van een "verse" React-applicatie in de laatste les, gaan we hier uitleggen hoe de structuur van deze applicatie begrepen kan worden en hoe React in een website geïntegreerd kan worden.

Een kleine opfrisser over var vs. let/const.

Destructuring maakt het mogelijk om specifieke elementen uit objecten en arrays te extraheren. Bij nadere beschouwing ontstaan er veel toepassingsmogelijkheden die JS-code eleganter en compacter maken.

Functies zijn essentieel in JS en tot nu toe alleen gedeclareerd en gedefinieerd via het trefwoord functie. ES6 introduceert een elegante en korte schrijfwijze die de code leesbaarder maakt en een oplossing biedt voor een terugkerend probleem met this.

Module werden sinds het begin al gebruikt in NodeJs, maar aanvankelijk vertrouwde het alleen op het CommonJs-moduleformaat met require. Sinds ES6 is er een moduledefinitie als standaard en dus de nieuwe trefwoorden import/export. Dit formaat wordt inmiddels ondersteund door bijna alle (nieuwe) JS-bibliotheken en ook NodeJs kan er in de nieuwste versies mee omgaan.

Met JSX beschrijf je de UI van een component en integreer je JS-uitdrukkingen erin. Het projectbestand voor de video bevat de voltooide code voor dit gedeelte van de tutorial.

Je kunt je eigen React-componenten heel eenvoudig schrijven met behulp van functies die JSX retourneren.

Deze les legt uit hoe gegevens en JavaScript-uitdrukkingen in JSX geïntegreerd kunnen worden.

Zonder een staat die kan veranderen, is het moeilijk om een zinvolle app te implementeren. In React wordt hiervoor meestal useState gebruikt. Deze les introduceert deze hook en legt het gebruik ervan uit.

Props worden gebruikt om gegevens over te dragen naar kindcomponenten. Hier wordt uitgelegd hoe dit precies gebeurt en waar je op moet letten.

Als Props dynamisch veranderen, wordt de overeenkomstige Render-functie van de component opnieuw aangeroepen.

Als een child-component de ouder-component iets wil laten weten, gebeurt dat via een callback-prop.

Op een gegeven moment moeten taken ook worden afgerond. Hier bespreken we hoe dit in de code werkt.

Het uiterlijk van een UI is zonder twijfel belangrijk. Daarom leg ik hier uit hoe dit werkt met behulp van de bibliotheek Emotion en hoe je de Prop className daarmee kunt gebruiken. Daarnaast wordt ook gekeken naar het style-attribuut, waarmee je elk element afzonderlijk tot in detail kunt stylen.

Door het filteren van de To-do-array kunnen de to-do's in twee groepen worden verdeeld.

Natuurlijk moet je ook taken kunnen verwijderen. Hier wordt uitgelegd hoe dit werkt door het filteren van een array.

Tot nu toe hebben we componenten altijd in DIVs 'ingepakt'. In bepaalde gevallen kan men dit echter ook besparen.

Nu wordt het interessant: Taken kunnen vrij eenvoudig persistent worden opgeslagen in de browser-opslag en natuurlijk ook weer worden geladen, zodat ze het herladen van de pagina overleven.

Met useEffect kunnen side effects worden geïntegreerd. Het mounten van een component kan ook met deze functie worden behandeld.

Korte samenvatting van onze taken-app en laatste verbeteringen.

De videospeler-applicatie wordt gemaakt met create vite en er wordt uitgelegd hoe de app moet worden opgebouwd. Het projectbestand bij de video bevat de voltooide code voor de videospeler.

Met het attribuut ref kunnen DOM-elementen worden gerefereerd en toegankelijk worden gemaakt met useRef. Hier doen we dat met het video-element.

We maken de eigenlijke videospeler die al knoppen heeft voor Afspelen, Pauzeren en Stoppen.

Omdat je Play en Pause nooit tegelijkertijd nodig hebt, combineren we deze twee in één knop.

De eigen controles van het video-element regelen ook de video, wat er echter toe leidt dat onze status niet correct wordt aangepast bij de knop Afspelen/Pauzeren. We lossen dit op met behulp van event handlers bij het video-element.

Het volume kunnen we ook aanpassen met een eigen schuifregelaar.

Het springen naar een willekeurige positie in de video (Seek) kan verrassend eenvoudig worden gedaan door het instellen van de eigenschap currentTime.

De lengte van de video wordt pas bepaald nadat de videometagegevens zijn geladen, daarom moeten we wachten op het juiste evenement.

De afspeellijst wordt geïmplementeerd door middel van een lijst die kan worden gemaakt met het HTML-element select.

Nu komt het bewerken van de videolijst aan bod: We voegen het toevoegen van videoposts toe.

Wat we toevoegen, moeten we ook weer kunnen verwijderen. Dit doen we op een vergelijkbare manier als bij de To-do-App door te filteren.

De afspeellijst moet niet alleen als een bladwijzerlijst dienen, maar ook automatisch de video's na elkaar afspelen. Dit zal in deze les worden geïmplementeerd.

Voor de ongeduldigen: knoppen voor de volgende en de vorige video.

Een speciale behandeling voor de eerste en laatste video wordt toegepast: de Next- en Previous-knoppen moeten dienovereenkomstig worden gedeactiveerd.

Nu slaan we onze afspeellijst op en laden we deze in, analoog aan de To-do-App in de lokale opslag van de browser.

De video's die als voorbeeld worden gebruikt in de Video Player-app, kunnen hier in hun originele vorm worden bekeken (allemaal onder CC-Attribution-licentie, zie de betreffende websites):

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

Aan de hand van de useJsonFetch--hook wordt hier uitgelegd hoe je je eigen hook-functies kunt schrijven.

De wijziging van de staat met de setter van useState kan lastig zijn. Met useImmer is het echter geen probleem meer.

De UI wordt sneller opgebouwd en reageert sneller op gebruikersinvoer, als er geen onnodige oproepen naar de renderfuncties plaatsvinden. Met memo kan voorkomen worden dat componenten worden gerenderd als hun props niet veranderen.

Met useCallback kan het onnodig opnieuw renderen van kindercomponenten worden voorkomen wanneer gebruik wordt gemaakt van Callback-Props.

Ingewikkelde berekeningen binnen de renderfuncties moeten alleen worden uitgevoerd wanneer dat nodig is. Met useMemo kunnen de resultaten van deze berekeningen worden gecached rekening houdend met de afhankelijkheden.

Ik vat hier de resultaten van de cursus samen en geef aan wat de deelnemers na de cursus zouden moeten bekijken.