К содержанию

Grundlæggende React Tutorial

Tutorial om JavaScript-frameworks React. For begyndere. Meget teori og opgaver.

Уроки

Introduktion til React-frameworket

Installation af React-frameworket

Tilslutning af react-devtools plugin

Introduktion til komponenttilgangen i React

Layout af React framework websted

Komponentens resultat

JSX Sproget

Introduktion til JSX-sproget i React

Returnering af indlejrede JSX-tags med funktioner

Regler for returnering af funktion ved nedflytning af tag i JSX

Funktioner til at returnere flere tags i JSX

Returnering af ikke-lukket JSX-tag

Return af tomt tag af funktion i JSX

Indsættelse af variable værdier og konstanter i JSX

Nuancer ved indsættelse af variable værdier

Indsættelse af arrays i JSX

Indsættelse af objekter i JSX

Indsætning af variable og konstanter i attributter for tags i JSX

Lagring af tags i variabler og konstanter i JSX

Særligheder ved lagring af flere tags i JSX-konstanter

Tags på forskellige linjer i JSX

Returnering af tags via return i JSX

Lukning af JSX-tags

Korrekthed af opstilling i React

Udførelse af JavaScript-kode

Betingelser

Brug af betingelser i JSX

Betinget visning i React

Betingelser for returnering af tag i JSX

Den ternære operator i JSX

Brug af && operatoren i JSX

Invertering af korte betingelser i JSX

Funktioner

Brug af funktioner i React

Udførelse af funktioner inde i tags i React

Håndtering af events i JSX

Parametre i JSX-funktioner

Event-objektet i React

Event-objekt ved parameteroverførsel

Oprettelse af tags

Tags i JSX-arrays

Oprettelse af tag-array i en React-løkke

Oprettelse af tags fra en dataarray i React

Unikke nøgler i array af tags i React

Udskrivning af objektarrays i React

Unikke nøgler via id i React

Udsendelse af objektarray som HTML-tabel i React

Unikke id'er

Diskussion af unikke id'er i React

Problemer med nye id'er i React

Tilfældige strenge til id i React

Generering af id i React

Funktion til generering af id i React

Brug af id-funktionen i React

Forkert brug af id-funktionen i React

Stater

Introduktion til stater i React

Brug af states i React

Reaktivitet af states i React

Logisk værdi i state i React

Tæller med states i React

Formular

Arbejde med inputs i React

Ændring af inputdata ved deres visning i React

Ændring af data ved hjælp af en funktion i React

Arbejde med flere inputs i React

Behandling af formulardata ved klik på en knap i React

Arbejde med textarea i React

Arbejde med checkbox i React

Afkrydsningsfelter og betinget rendering i React

Arbejde med select i React

Selectpunkter fra en array i React

Value-attributter i select i React

Value-attributter for select fra array i React

Arbejde med radio i React

Standardværdier i React

Tilbinding af inputs til en array i React

Tilbinding af inputfelter til et objekt i React

Data

Datareaktivitet i React

Reaktiv tilføjelse til array i React

Reaktive operationer på arrays i React

Reaktiv tilføjelse til array af objekter i React

Reaktive operationer på arrays af objekter i React

Reaktiv datavisning i React

Komponenter

Introduktion til React-komponenter

Brug af komponenter i React

Flere instanser af en komponent i React

Komponentprops i React

Oprettelse af underkomponenter i React

Array til oprettelse af underkomponenter i React

Børnekomponenter i et React-loop

Overførsel af tilstande til underkomponenter i React

Overførsel af id til en komponent i React

Ændring af forældrekomponentens state i et underkomponent i React

Redigering af forældre-state i en underkomponent i React

Redigering af state i et barnebarnskomponent i React

Tilstandsdrevne tilstande i underkomponenter i React

Koncepter

React-koncepter ved arbejde med komponenter

Komponentdata i React

Typer af komponenter i React

Envejsret dataflow i React

Lifting State Up i React

En enkelt sandhedskilde i React

Styling

Metoder til styling af React-komponenter

Brug af global CSS til styling i React

Indsæt data i style-attribut fra et objekt i React

Indsætning af data i style-attributten fra en separat fil i React

Arbejde med CSS-stilarter i style-attributten i React

Indsæt data i style-attributten fra variabler i React

Styling med Styled Components i React

Brug af props med Styled Components i React

Brug af props i betinget rendering med Styled Components i React

Avanceret styling af komponenter i React

Introduktion til styling med CSS modules i React

Fortsat undersøgelse af styling med CSS modules React

Kommandoen composes for klasser i CSS modules i React

Kommandoen composes for filer i CSS modules i React

Projekter

Projekt Checkliste i React

Notesbog-projekt i React