React & Typescript

Agenda

  • Fördelen med Typescript i React
  • Komma igång med TS-projekt i React med Vite
  • Använd typescript med: props, events, useState, useEffect, style o.s,v
  • Migrera React JS projekt => React TS-projekt 

Fördelar med TS i React

  • Fånga fel i compile-time - många fel beror på TypeError
  • Men största fördelen är att man får feedback direkt i IDE:n. Knappas att man behöver lämna IDE-miljön
  • Kodkvalitet
  • Autocomplete
  • etc

Utforska med små komponenter!

1. Installera React TS-project med Vite

och välj tillval!

  
 npm create vite@latest

2. Vi utforskar props, events, useState, useEffect, style o.s,v

Copy & Past:a komponenter från detta repo 👆

https://github.com/chasacademy-sandra-larsson/typescript-react-demo-starter

Migrera React JS => React TS (vite)

  1. npm install @types/react @types/react-dom
  2. Om man har externa bibliotek som kräver types så installera dem med
  3. npx tsc --init
  4. tsconfig => jsx": "react-jsx"
  5. Byt alla .js/.jsx-filer till .tsx
  6. Använd // @ts-no-check högst upp i en fil för att ignorera  ts-fel - så att du kan fokusera på vissa filer
  7. Rätta alla ts-fel eller inför typer där det behövs
  8. Jobba utifrån och in (alltså i komponenter som inte har beroenden, och sedan dem som importerar)
  9. Testkör! Obs! Du behöver ändra entrypoint main.jsx till main.tsx i index.html

Migrera React JS => React TS (vite)

https://github.com/chasacademy-sandra-larsson/react-firebase-todolist-just-js

Vi kör på denna todolist från förra terminen :-)

På workshopen väljer ni egen applikation efter intresse, omfång och svårighet!