К содержанию

Grundläggande React-handledning

Handledning för JavaScript-ramverket React. För nybörjare. Mycket teori och uppgifter.

Уроки

Introduktion till React-ramverket

Installation av React-ramverket

Anslutning av react-devtools plugin

Introduktion till komponentbaserat tillvägagångssätt i React

Layout för React-ramverket

Resultatet av en komponents arbete

JSX-språket

Introduktion till JSX-språket i React

Returnera kapslade JSX-taggar med funktioner

Regler för return av funktion vid neddragning av tagg i JSX

Funktioner för att returnera flera taggar i JSX

Returnering av oavslutad JSX-tagg

Returnera tomt tagg av funktion i JSX

Infogande av variabel- och konstantvärden i JSX

Nyanser vid insättning av variabelvärden

Infoga arrayer i JSX

Infoga objekt i JSX

Infogande av variabler och konstanter i taggars attribut i JSX

Lagring av taggar i variabler och konstanter i JSX

Funktioner för att lagra flera taggar i JSX-konstanter

Taggar på olika rader i JSX

Returnera taggar via return i JSX

JSX-taggar stängning

Korrekthet av markup i React

Exekvering av JavaScript-kod

Villkor

Använda villkor i JSX

Villkorsvis visning i React

Villkor för att returnera en tagg i JSX

Ternära operatorn i JSX

Använda operatorn && i JSX

Invertering för förkortade villkor i JSX

Funktioner

Använda funktioner i React

Anropa funktioner inuti taggar i React

Hantera händelser i JSX

Parametrar i JSX-funktioner

Event-objekt i React

Event-objekt vid parameteröverföring

Skapande av taggar

Taggar i JSX-arrayer

Skapa en array med taggar i en React-loop

Skapa taggar från en array med data i React

Unika nycklar i array av taggar i React

Utskrift av array med objekt i React

Unika nycklar via id i React

Utskrift av en array med objekt som en HTML-tabell i React

Unika id

Diskussion om unika id i React

Problem med nya id i React

Slumpmässiga strängar för id i React

Generering av id i React

Funktion för att generera id i React

Användning av id-funktionen i React

Felaktig användning av id-funktionen i React

Tillstånd

Introduktion till tillstånd i React

Användning av tillstånd i React

Reaktivitet av state i React

Booleskt värde i state i React

Räknare med tillstånd i React

Formulär

Att arbeta med inputs i React

Ändra av indata vid utskrift i React

Ändra data med en funktion i React

Arbeta med flera inmatningar i React

Hantera formulärdata genom att klicka på en knapp i React

Arbeta med textarea i React

Att arbeta med checkbox i React

Kryssrutor och villkorsstyrd rendering i React

Arbeta med select i React

Urvalspunkter från array i React

Value-attribut i select i React

Value-attribut för select från array i React

Arbeta med radio i React

Standardvärden i React

Binda inmatningar till en array i React

Bindning av inputfält till ett objekt i React

Data

Datareaktivitet i React

Reaktiv tillägg i array i React

Reaktiva operationer på arrayer i React

Reaktiv tilläggning av objekt i array i React

Reaktiva operationer på arrayer av objekt i React

Reaktiv visning av data i React

Komponenter

Introduktion till React-komponenter

Använda komponenter i React

Flera instanser av en komponent i React

Komponentprops i React

Skapa underkomponenter i React

Array för att skapa underkomponenter i React

Barnkomponenter i en React-loop

Överföring av tillstånd till underordnade komponenter i React

Skicka id till en komponent i React

Ändra föräldrakomponentens state i en barnkomponent i React

Redigering av föräldratillstånd i en barnkomponent i React

Redigering av state i barnbarnskomponent i React

Arbetslägen via state i underkomponenter i React

Koncept

React-koncept vid arbete med komponenter

Komponentdata i React

Typer av komponenter i React

Enkelriktad dataflöde i React

Lyfta state i React

En enda saningskälla i React

Styling

Sätt att styla React-komponenter

Använda global CSS för styling i React

Infoga data i style-attributet från ett objekt i React

Infoga data i style-attributet från en separat fil i React

Arbeta med CSS-stilar i style-attributet i React

Infoga data i style-attributet från variabler i React

Styling med Styled Components i React

Använda props med Styled Components i React

Användning av props i villkorsstyrd rendering med Styled Components i React

Avancerad styling av komponenter i React

Kom igång med styling med CSS modules i React

Fortsatt studier av styling med CSS modules React

Kommandot composes för klasser i CSS modules i React

Kommandot composes för filer i CSS modules i React

Projekt

Projekt Checklista i React

Anteckningsbok-projekt i React