Welke onderwerpen worden behandeld in de cursus?
Inleiding tot de basisprincipes van React
Introductie tot de React Cursus:
Openingswoorden.
Wat is React en een beetje over de geschiedenis van de bibliotheek.
Nadruk op werken met een codebase systeem.
Basisonderdeel van React:
Leren wat JSX is in React.
Hoe schrijf je een basis eerste component.
Een component bouwen met statische gegevens en de basisprincipes begrijpen.
Een lijst bouwen met dynamische gegevens:
Dynamisch elementen bouwen.
Gebruikmaken van de mogelijkheden van Array.prototype.map voor dynamische bouw.
Componenten importeren en exporteren vanuit een bestand.
Een tabel bouwen met dynamische gegevens:
Structuur van de tabel en de componenten in HTML.
Een geneste lus gebruiken om een tabel te bouwen.
De map-functie op een geneste manier gebruiken.
Dynamische gegevens gebruiken uit een geïmporteerd bestand.
Stylen met het Style Object:
Het begrijpen van het verschil tussen HTML en JSX.
Leren hoe elementen op de pagina te stylen.
Oefenen met het dynamisch bouwen van elementen op een uitdagende manier met geleerde stijlen.
Componenten met Status en Events
Integreren van CSS-bestanden in React:
Het integreren van de wereld van stijlen als een integraal onderdeel van componentenbouw.
Begrijpen wat className is en het verschil tussen HTML en JSX.
Het integreren van een uitgebreide oefening van al het geleerde materiaal tot dit punt in de cursus.
Het benadrukken van CSS-regels en hoe ze integreren in ons gebouwde systeem.
Integreren van Props in Componenten:
Wat zijn props in React en wanneer gebruik je ze.
Bouwen van componenten met props en gangbare methoden van schrijven.
Gebruikmaken van componenten die we dynamisch hebben gebouwd.
Een tabel bouwen met Props:
Een tabel bouwen met behulp van props.
Een slim component creëren in de tabelconstructie.
Dynamisch bouwen combineren met meerdere components met behulp van props en stijlen met CSS.
Gebruik van Events en useState:
Hoe onClick type events te koppelen aan elementen.
Wat zijn slimme componenten en waarom hebben we ze nodig.
Wat is de react hook van type useState en hoe deze te gebruiken.
Booleaanse voorwaarden creëren binnen de JSX van een component.
Het verbinden van event creatie en state opslag voor het bouwen van slimme React componenten.
Gebruikmaken van het onChange Event:
Hoe je een invoerveld aan de pagina toevoegt en useState gebruikt om invoerwaarden op te slaan.
Een dynamische lijst bouwen met gegevens ingevoerd door de gebruiker.
Uitgebreide uitleg van arrays en het verschil tussen waarde en referentie.
Begrijpen hoe te werken met arrays opgeslagen in de staat van het component.
Geavanceerde Onderwerpen en API Gebruik
Het bouwen van een dynamische tabel met evenementen:
Begrijpen hoe alles wat tot nu toe geleerd is te integreren om dynamisch een tabel te bouwen.
Gebruik van useState om een aantal invoervelden op te slaan.
Voorbeeld van het gebruik van complexe staat met een array van objecten.
Het gebruik van de useEffect Hook:
Wat is de react hook van het type useEffect en hoe en wanneer gebruik je het.
Servercommunicatie uitvoeren met fetch.
Methoden tonen om onze code te beveiligen om onnodige fouten te voorkomen.
Het bouwen van een slim component dat zowel useState als useEffect hooks combineert.
Voorbeeld van het gebruik van useEffect in server-side zoeken:
Verkennen van aanvullende toepassingen voor useEffect.
Begrijpen hoe de levenscyclus van een component onze code-implementatie beïnvloedt.
Het presenteren van een complex voorbeeld van het gebruik van useEffect.
Gebruik van Extra Inputs:
Wat is een checkbox input en hoe gebruik je het.
Wat is een radio input en hoe gebruik je het.
Wat zijn datetime en datetime-local inputs en wanneer gebruik je ze.
Een tabel bouwen vanuit een API met resultaatfiltering:
Een API-verzoek doen om gegevens over een tabel op te halen.
De tabel dynamisch opbouwen.
Leren hoe je slimme resultaatfiltering uitvoert om door zoekresultaten te zoeken.
De codearchitectuur bespreken.
Geavanceerde Onderwerpen en Code Architectuur
Gebruik van Geavanceerde Filters:
Een tabel bouwen die informatie over vluchten weergeeft.
Het gebruik van de tabel uitbreiden met een slimme rijcomponent.
Inputs gebruiken om filters voor de tabel te bouwen, gebruikmakend van checkbox, datetime en tekst inputs.
Bulma-bibliotheek voor geavanceerde opmaak:
Leren om kant-en-klare stijlen in te bedden.
Het bulma-pakket gebruiken om kleur en stijlen toe te voegen aan samen gebouwde React-projecten.
Stijlen inbedden in een bestaand component en de documentatie van de bibliotheek die we zullen gebruiken doornemen.
Sorteren in JavaScript:
Een bestaand tabelcomponent verbeteren en sorteerfunctionaliteiten eraan toevoegen.
Diepgaand begrip van hoe sorteringen werken op arrays met nummers, strings en objecten.
Zien hoe om te gaan met speciale sortering wanneer ons veld geen eenvoudige vergelijking is.
Communicatiekanalen Tussen Componenten:
Leren hoe een child component kan communiceren met een parent component.
Implementeren van bulma styling op verschillende componenten.
Bouwen van een veelzijdige component die ons in staat stelt om tabs in de applicatie in te bedden.
Voorbeelden zien van het gebruik van props van het type functie.
Conclusie