codequick-darkmode-logo
Logga inRegistrera dig
React-kurs

Läroplan:

React-kurs

20 Lektioner 125 Online kodningsfrågor


Vilka ämnen kommer att täckas i kursen?

Introduktion till grunderna i React

  1. Introduktion till React-kursen:

    • Inledande ord.

    • Vad är React och lite om bibliotekets historia.

    • Fokus på att arbeta med ett kodbas-system.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. Slutsats