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

Utforska med små komponenter!

1. Installera React TS-project med Vite

och välj tillval!

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!