Aflați cum să creați aplicații React folosind TypeScript. În primul rând, aflați elementele de bază ale TypeScript. Apoi, aflați cum să integrați TypeScript într-o aplicație React prin construirea unui proiect minunat. Veți învăța cum să utilizați TypeScript cu React Hooks, cum ar fi useState, useRef și useReducers. De asemenea, veți învăța cum să treceți elemente de recuzită de la o componentă la alta prin definirea tipurilor de recuzită ale componentei. Și vei învăța mult mai multe!
✏️ Curs creat de Roadside Coder. Vezi canalul lui: https://www.youtube.com/c/RoadsideCoder
💻 Cod: https://github.com/piyush-eon/react-typescript-taskify
🔗 Site live: https://taskify-typescript.netlify.app/
🔗 Documente Typescript: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
🔗 Tutorial de utilizare Reducer:
⭐️ Conținutul cursului ⭐️
⌨️ (0:00:00) Introducere
⌨️ (0:00:31) Typescript vs Javascript
⌨️ (0:00:57) Prezentare generală a proiectului
⌨️ (0:02:27) Configurați proiectul React Typescript
⌨️ (0:04:57) Tipuri de bază în dactilografia
⌨️ (0:07:30) Tip obiect
⌨️ (0:09:03) Câmp opțional în obiecte
⌨️ (0:09:20) Matrice de tip de obiect
⌨️ (0:09:55) Tip de uniune
⌨️ (0:10:25) Tipuri de funcții
⌨️ (0:12:06) Orice tip
⌨️ (0:12:35) necunoscut și niciodată Tip
⌨️ (0:12:52) Aliasuri (tip și interfață)
⌨️ (0:14:36) Tipuri de extindere
⌨️ (0:15:53) Extindere interfață
⌨️ (0:16:28) Extinderea cursurilor
⌨️ (0:16:45) Tip extins cu interfață (și invers)
⌨️ (0:17:22) Reacționează cu dactilografia
⌨️ (0:18:22) Tip de componentă funcțională
⌨️ (0:19:19) Crearea interfeței de utilizare de intrare
⌨️ (0:26:22) utilizați State Hook cu Typescript
⌨️ (0:27:39) PropTypes – Trecerea elementelor de recuzită către componentă
⌨️ (0:30:34) Interfață todo reutilizabilă
⌨️ (0:33:01) Funcția de trecere ca recuzită
⌨️ (0:34:14) Tip de eveniment în Typescript
⌨️ (0:35:20) Creați Todo Logic
⌨️ (0:37:54) folosește Ref Hook cu Typescript
⌨️ (0:40:41) Componenta TodoList
⌨️ (0:45:27) Trecerea recuzitei către SingleTodo
⌨️ (0:47:14) Componentă SingleTodo
⌨️ (0:52:23) Funcționalitate completa
⌨️ (0:54:56) Ștergeți funcționalitatea Todo
⌨️ (0:55:55) Editați funcționalitatea Todo
⌨️ (1:02:05) Editați remedierea erorilor
⌨️ (1:03:23) utilizați Reducer Hook cu Typescript
⌨️ (1:07:11) Teme pentru tine
⌨️ (1:07:26) Crearea interfeței de utilizare a aplicației pentru glisare și plasare
⌨️ (1:13:13) React Beautiful DnD Installation
⌨️ (1:14:00) finalizatTodos State
⌨️ (1:15:21) DragDropContext
⌨️ (1:16:42) Etichetă care poate fi aruncată
⌨️ (1:20:46) Etichetă trasabilă
⌨️ (1:23:21) onDragEnd Logic
⌨️ (1:30:05) Trageți și plasați stilul
⌨️ (1:32:36) Outro
🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://freecodecamp.org/news
Cursuri interesante:
- Tutorial complet React Native Web – Creați o aplicație de antrenament pentru iOS, Android și web
- Tutorial React / Typescript – Construiți o aplicație de test
- React Native – Curs introductiv pentru începători
- Cum să utilizați TypeScript în React
- Aflați React prin construirea unui site de comerț electronic – Tutorial
- Curs complet React 2020 – Învățați elementele fundamentale, Hooks, Context API, React Router, Custom Hooks
- Curs pentru dezvoltatori Full Stack React cu Appwrite
- Cod 15 Proiecte React – Curs complet
- Redux Tutorial – Începător până la avansat
- Deno Course – Mai bun decât Node.js?