Avancerad React

Länk till repo

https://github.com/jonatanhallenberg/advanced-react-141114-demo

npm install npm run dev

Tisdag 14/11 (08.30-12:00)

Möteslänk

Introduktion

• Välkommen till kursen!

Modern Javascript / ES6

• Demo
• ES6 - Övningsuppgifter

Hantera en komponents interna tillstånd

• Demo
• Sätta upp projekt + useState

Hantera en komponents interna tillstånd

• useReducer

Implementera egna hooks för återanvändbar komponentkod

• Egna hooks

Dagens övningar

• Övningar

---

Onsdag 14/11 (08.30-12:00)

Möteslänk

Bemästra nyanserna av useEffect

• useEffect

React Context för lagring och åtkomst av globalt tillgänglig data

• React Context

Effektiv hämtning av komponentdata, caching och optimistiska uppdateringar med biblioteket React Query

• Data fetching libraries

Dagens övningar

• Övningar

---

Tisdag 21/11 (08.30-12:00)

Komponenttestning

• React Testing Library

Cypress

• End-to-end-testning

Felhantering

• Error boundaries - fånga upp fel i ett komponentträd

Dagens övningar

• Övningar

---

Onsdag 22/11 (08.30-12:00)

• Tailwind CSS

Prestanda

• Profilera komponenter

  • React Dev Tools (Profiler?)

• Memoization

  • React.memo
  • useMemo
  • useCallback

• Server och klientkomponenter i NextJS

Nyare funktionalitet i React

• Suspense

Förslag på ytterligare områden

• Generiska komponenter (Typescript)

  • Bygga en generisk komponent, t.ex. en tabell som kan ta emot olika typer av data

• Nestade komponenter (Typescript)

  • Bygga en komponent som har andra komponenter som barn
  • Exempel:

    <Card>
      <Card.Header>
        <Card.Title>...</Card.Title>
      </Card.Header>
      <Card.Body>
        <Card.Text>...</Card.Text>
      </Card.Body>
    </Card>
    

• Designsystem / Komponentbibliotek

  • Storybook

• End-to-end-testning

  • Cypress

• CSS-strategier

  • CSS-in-JS (Styled components)
  • CSS-moduler
  • Tailwind CSS