Vilka ämnen kommer att täckas i kursen?
Introduktion till grunderna i React
Introduktion till React-kursen:
Inledande ord.
Vad är React och lite om bibliotekets historia.
Fokus på att arbeta med ett kodbas-system.
Grundläggande React-komponent:
Att lära sig vad JSX är i React.
Hur man skriver en grundläggande första komponent.
Bygga en komponent med statisk data och förstå grunderna.
Bygga en lista med dynamiska data:
Bygger element dynamiskt.
Använder förmågorna hos Array.prototype.map för dynamisk konstruktion.
Importera och exportera komponenter från en fil.
Bygga en tabell med dynamisk data:
Strukturen på tabellen och dess komponenter i HTML.
Använda en nästlad loop för att bygga en tabell.
Använda map-funktionen på ett nästlat sätt.
Använda dynamisk data från en importerad fil.
Styling med Style-objektet:
Att förstå skillnaden mellan HTML och JSX.
Lära sig att stila element på sidan.
Öva på att dynamiskt bygga element på ett utmanande sätt med inlärda stilar.
Komponenter med tillstånd och händelser
Integrering av CSS-filer i React:
Inkorporering av stilvärlden som en integrerad del av komponentskapande.
Förståelse för vad className är och skillnaden mellan HTML och JSX.
Inkorporering av en omfattande övning av allt material som lärt ut fram till denna punkt i kursen.
Betonande av CSS-regler och hur de integreras i vårt uppbyggda system.
Integrering av Props i Komponenter:
Vad är props i React och när man ska använda dem.
Bygga komponenter med props och vanliga metoder för att skriva.
Använda komponenter vi skrev i dynamiskt byggande.
Bygga en tabell med Props:
Bygga en tabell med hjälp av props.
Skapa en smart komponent i tabellkonstruktion.
Kombinera dynamiskt byggande med flera komponenter med hjälp av props och stilisering med CSS.
Använda Events och useState:
Hur man kopplar onClick-typ events till element.
Vad är smarta komponenter och varför behöver vi dem.
Vad är react hook av typ useState och hur man använder den.
Skapa booleska villkor inom JSX för en komponent.
Ansluta skapandet av events och lagring av tillstånd för att bygga smarta React-komponenter.
Att använda onChange-händelsen:
Hur man lägger till en inmatning på sidan och använder useState för att lagra inmatningsvärden.
Bygga en dynamisk lista med data från användarinmatning.
Fördjupad förklaring av arrays och skillnaden mellan värde och referens.
Förståelse för hur man arbetar med arrays lagrade i komponentens tillstånd.
Avancerade ämnen och API-användning
Bygga en dynamisk tabell med händelser:
Förstå hur man integrerar allt som lärt hittills för att bygga en tabell dynamiskt.
Använda useState för att lagra ett antal inmatningar.
Exempel på användning av komplex state med en array av objekt.
Att använda useEffect Hook:
Vad är react hook av typen useEffect och hur och när man använder den.
Utför serverkommunikation med fetch.
Visar metoder för att säkra vår kod för att undvika onödiga fel.
Bygga en smart komponent som kombinerar både useState och useEffect hooks.
Exempel på att använda useEffect i server-sidans sökning:
Utforskar ytterligare användningsområden för useEffect.
Förstå hur komponentens livscykel påverkar vår kodimplementering.
Presenterar ett komplext exempel på att använda useEffect.
Använda ytterligare inmatningar:
Vad är en kryssruta (checkbox input) och hur man använder den.
Vad är en alternativknapp (radio input) och hur man använder den.
Vad är datum- och tidsinmatningar (datetime och datetime-local inputs) och när man ska använda dem.
Bygga en tabell från API med resultatfiltrering:
Göra en API-förfrågan för att hämta data om en tabell.
Bygga tabellen dynamiskt.
Lära sig hur man utför sökningar genom smart resultatfiltrering.
Diskutera kodarkitektur.
Avancerade ämnen och kodarkitektur
Använda avancerade filter:
Bygga en tabell som visar information om flygningar.
Utöka användningen av tabellen med en smart radkomponent.
Använda inmatningar för att bygga filter till tabellen, med användning av checkbox, datetime och textinmatningar.
Bulma-biblioteket för avancerad stilisering:
Att lära sig bädda in färdiga stilar.
Använda bulma-paketet för att lägga till färg och stilar i React-projekt som byggs tillsammans.
Bädda in stilar i en befintlig komponent och gå igenom dokumentationen för biblioteket vi kommer att använda.
Sortering i JavaScript:
Förbättra en befintlig tabellkomponent och lägga till sorteringsfunktioner till den.
Fördjupad förståelse för hur sortering fungerar på arrayer med nummer, strängar och objekt.
Se hur man hanterar speciell sortering när vårt fält inte är en enkel jämförelse.
Kommunikationskanaler Mellan Komponenter:
Att lära sig hur en barnkomponent kan kommunicera med en föräldrakomponent.
Implementera bulma-stil på flera komponenter.
Bygga en mångsidig komponent som tillåter oss att bädda in flikar i applikationen.
Att se exempel på användning av props av typ funktion.
Slutsats