К содержанию

De Belangrijkste React Zelfstudie

Zelfstudie over het JavaScript-framework React. Voor beginners. Veel theorie en opdrachten.

Уроки

Introductie tot het React-framework

Installatie van het React-framework

Aansluiten van de react-devtools plugin

Inleiding tot de componentbenadering in React

Lay-out van de React-website

Resultaat van de component

JSX Taal

Inleiding tot de JSX-taal in React

Teruggave van geneste JSX-tags door functies

Regels voor het retourneren van een functie bij het verplaatsen van een tag naar beneden in JSX

Kenmerken van het retourneren van meerdere tags in JSX

Teruggave van niet-gesloten JSX-tag

Teruggave van een lege tag door een functie in JSX

Invoegen van waarden van variabelen en constanten in JSX

Nuances bij het invoegen van variabele waarden

Arrays invoegen in JSX

Invoegen van objecten in JSX

Invoegen van variabelen en constanten in tag attributen in JSX

Opslaan van tags in variabelen en constanten JSX

Kenmerken van het opslaan van meerdere tags in JSX constanten

Tags op verschillende regels in JSX

Teruggave van tags via return in JSX

Het sluiten van JSX-tags

Correctheid van opmaak in React

Uitvoering van JavaScript-code

Voorwaarden

Voorwaardelijke weergave in JSX

Weergave op voorwaarde in React

Voorwaarden voor het retourneren van een tag in JSX

Ternaire operator in JSX

Gebruik van de && operator in JSX

Inverteren voor verkorte voorwaarden in JSX

Functies

Gebruik van functies in React

Functie-aanroepen binnen tags in React

Gebeurtenissen toevoegen in JSX

Parameters in JSX Functions

Het Event Object in React

Event Object bij het doorgeven van parameters

Vormen van tags

Tags in JSX Arrays

Het vormen van een array van tags in een React-lus

Het vormen van tags uit een array met data in React

Unieke sleutels in een array van tags in React

Array van objecten weergeven in React

Unieke sleutels via id in React

Een array van objecten weergeven als HTML-tabel in React

Unieke id's

Discussie over unieke id's in React

Problemen met nieuwe id's in React

Willekeurige tekenreeksen voor id in React

ID-generatie in React

Functie voor het genereren van id in React

Gebruik van de id-functie in React

Onjuist gebruik van de id-functie in React

Staten

Introductie tot States in React

Gebruik van states in React

Reactiviteit van states in React

Booleaanse waarde in state in React

Teller met states in React

Formulieren

Werken met inputs in React

Het wijzigen van invoergegevens bij weergave in React

Gegevens aanpassen met een functie in React

Werken met meerdere inputs in React

Gegevens van formulier verwerken bij het klikken op een knop in React

Werken met textarea in React

Werken met checkbox in React

Checkboxes en conditioneel renderen in React

Werken met select in React

Select-items uit array in React

Value-attributen in select in React

Value attributen van select uit array in React

Werken met radio in React

Standaardwaarden in React

Inputs binden aan een array in React

Invoervelden binden aan een object in React

Gegevens

Reactiviteit van gegevens in React

Reactief toevoegen aan array in React

Reactieve arraybewerkingen in React

Reactief toevoegen aan een array van objecten in React

Reactieve bewerkingen op arrays van objecten in React

Reactieve weergave van gegevens in React

Componenten

Inleiding tot React-componenten

Gebruik van componenten in React

Meerdere instanties van een component in React

Component Props in React

Het maken van kindcomponenten in React

Array voor het maken van kindcomponenten in React

Kindercomponenten in een React-lus

Doorgeven van staten aan kindcomponenten in React

Id doorgeven aan een component in React

Ouderstate wijzigen in kindcomponent in React

Bewerken van parent state in een child component in React

Bewerking van state in een kleinkomponent in React

Werkmodi via staten van onderliggende componenten in React

Concepten

React Concepten bij het werken met componenten

Componentgegevens in React

Typen componenten in React

Unidirectionele gegevensstroom in React

State omhoog brengen in React

Één bron van waarheid in React

Styling

Manieren om React componenten te stijlen

Gebruik van globale CSS voor stijlen in React

Gegevens invoegen in het style attribuut vanuit een object in React

Gegevens invoegen in het style attribuut vanuit een apart bestand in React

Werken met CSS-stijlen in het style attribuut in React

Gegevens invoegen in het style attribuut vanuit variabelen in React

Styling met Styled Components in React

Gebruik van Props met Styled Components in React

Gebruik van props in conditioneel renderen met Styled Components in React

Uitgebreide stilisering van componenten in React

Start met het leren van stijlen met CSS modules in React

Verder met het leren van stijlen met CSS modules React

De composes opdracht voor classes in CSS modules in React

De composes opdracht voor bestanden in CSS modules in React

Projecten

Project Checklist in React

Notitieblok Project in React