1
Inleiding
- ES6+ en modules.
- De belangrijkste principes van React: VirtualDOM, JSX, eenrichtingsgegevensstroom.
- Ontdek het ecosysteem van ReactJS-tools.
Praktisch werk
Het opzetten van een ontwikkelomgeving die geoptimaliseerd is voor React en een eerste webapplicatie die als rode draad zal dienen voor volgende hoofdstukken.
2
Goede ontwikkelingspraktijken
- Productiviteitsherinneringen: prop-types en DefaultProps, componentenblad met StoryBook.
- Code typen met flow of TypeScript.
- Het opzetten van unit- en functionele tests.
- Snelle prototyping van componenten en oplossingen.
Praktisch werk
Verbeterde kwaliteit van applicaties dankzij geautomatiseerd typen en testen.
3
Geavanceerde technieken en ontwerppatronen
- Het patroon van hogere orde componenten (HOC).
- Rendering in externe DOM-elementen met behulp van portals.
- "React hooks" functioneel programmeren: useEffect, useState.
- React: maken van "customHooks" om aangepaste logica te distribueren.
- Afhankelijkheidsinjectie met contexten.
Praktisch werk
Contexten en portalen implementeren in de Red Wire applicatie. Functionele componenten maken en hooks gebruiken.
4
Redux voor gevorderden
- Redux-herinnering: de verschillende entiteiten, basissyntaxis en integratie met React.
- Vereenvoudig en optimaliseer het maken van formulieren met Redux Form.
- Verbeter de gebruikerservaring met Redux Persist en lokale statusopslag.
- Redux aangepaste middleware maken.
Praktisch werk
Een formulier converteren naar Redux Form en de navigatie opslaan.
5
Prestaties optimaliseren
- Hoe kunnen we de levenscyclus van componenten optimaliseren?
- Gebruik onveranderlijkheid om de verwerking te versnellen en te vereenvoudigen.
- Zuivere componenten.
- API voor React.Suspense optimalisatie React.Lazy, concurrent modus en React.Cache.
- Rendering aan de serverkant met NextJS.
Praktisch werk
Code splitsen implementeren met React.Lazy en Suspense.
6
Gebeurtenissen/overgangen
- Componenten "met de hand" animeren met CSS-animaties en overgangen.
- Vereenvoudig u werk met React Transition Group.
- Verder gaan met de belangrijkste animatiebibliotheken: vergelijking en voorbeelden van implementatie.
Praktisch werk
Overgang toegevoegd voor het verschijnen/verdwijnen van verschillende schermen.
7
Internationalisering
- Internationalisering versus lokalisering: verschillen en scenario's voor gebruik.
- De belangrijkste boekhandels voor internationalisering.
- Integratie met React en Redux.
Praktisch werk
Vertaling van de red wire-toepassing en beheer van de taalwijziging.