Grundläggande React-handledning

Introduktion Installera React Anslut react-devtools plugin Komponentbaserat tillvägagångssätt Webbplatslayout Komponentens arbetsresultat

JSX-språket

Introduktion till JSX Returnera kapslade taggar Bryt taggar nedåt Returnera flera taggar Returnera oavslutade taggar Returnera tom tagg med funktion Infoga variabelvärden Nyanser vid infogning av variabler Infoga arrayer Infoga objekt Infoga i attribut Lagra taggar i JSX Lagra flera taggar Taggar på olika rader Returnera taggar Avslutade JSX-taggar Korrekthet i markup Köra JavaScript-kod

Villkor

Villkor i JSX Visning baserat på villkor Villkor för att returnera en tagg Ternär operator i JSX Använda operatorn && i JSX Invertering för förkortade villkor

Funktioner

Använda funktioner Anropa funktioner inuti taggar Lägga på hanterare Hanterparametrar Event-objekt Event-objekt vid parameteröverföring

Skapande av taggar

Taggarray Taggarray i loop Taggar från array med data Nycklar i array Array av objekt Unika nycklar via id Tabell från array av objekt

Unika id

Diskussion Problem med nya id Slumpmässiga strängar för id Generering av id Funktion för att generera id Användning av id-funktion Felaktig användning av funktionen

Tillstånd

Introduktion till tillstånd Användning Reaktivitet Booleskt värde i tillstånd Räknare vid arbete med tillstånd

Formulär

Att arbeta med inputfält Ändra inputdata vid utskrift Ändra data med en funktion Att arbeta med flera inputfält Hantering av formulärdata Att arbeta med textarea Att arbeta med kryssrutor Kryssrutor och villkorsstyrdom rendering Att arbeta med select Select-alternativ från en array Value-attribut i select Selects value-attribut från en array Att arbeta med radio Standardvärden Bindning av inputfält till en array Bindning av inputfält till ett objekt Praktik - !!! jag skulle ta bort den helt todo, del att hämta via länk

Data

Introduktion Reaktiv tillägg till array Reaktiva arrayoperationer Reaktiv tillägg till array av objekt Reaktiva operationer på arrayer av objekt Reaktiv datavisning

Komponenter

Introduktion till komponenter Använda komponenter Flera instanser av en komponent Komponenters props Barnkomponenter Array för att skapa barnkomponenter Barnkomponenter i loop Skicka tillstånd till barnkomponenter Skicka id till en komponent Ändra förälders tillstånd Redigera förälders tillstånd Redigera förförälders tillstånd Arbetslägen via tillstånd Prop-typer todo

Koncept

Introduktion Komponentdata Komponenttyper Enkelriktat dataflöde Lyft state En saningskälla

Styling

Sätt att styla i React Global CSS Infoga data i style-attribut från ett objekt Infoga data i style-attribut från en separat fil Arbeta med CSS-stilar i style-attributet Infoga data i style-attribut från variabler Styled Components Props i Styled Components Props och villkorsstyrda rendering i Styled Components Komponenter med utökad styling Kom igång med CSS modules Fortsatt arbete med CSS modules Kommandot composes för klasser Kommandot composes för filer

Projekt

Checklista Anteckningsblock
↑
Svenska▼
AzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақLietuviųLatviešuМакедонскиMelayuNederlandsNorskPolskiPortuguêsRomânăРусскийSlovenčinaSlovenščinaShqipKiswahiliTürkçeЎзбекOʻzbek
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa