Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React Pro: Creare Real World applications
Intro
Introduzione al corso (8:33)
Come utilizzare la piattaforma (1:41)
🏴☠️ Pirateria (1:23)
Scrivi una recensione
Intro: React, TypeScript e TSX
01. Premessa
02. Creare un progetto React - TypeScript con Vite (2:41)
03. React Components: Arrow Function vs Regular Function (1:00)
04. JSX Multiline (0:55)
05. React Fragment (1:24)
06. JSX Expressions (0:37)
07. Dynamic Attributes (0:35)
08. Conditional DOM (0:56)
09. Ternary Operator (0:24)
10. Split in functions (1:28)
11. Custom components (1:16)
12. Component Properties (1:56)
13. Split in multiple files (1:47)
14. Mouse Events (0:58)
15. Rendering e React Strict Mode (1:51)
16. useState hook (4:04)
17. Visualizzare un elenco di dati con map (1:32)
18. useState & Map: aggiungere elementi alla lista (2:22)
19. useEffect and Fetch Data (GET) (4:35)
20. fetch, POST e aggiornamento stato (1:52)
21. Custom Types (2:32)
22. Utilizzare axios per la comunicazione con le API REST (2:29)
23. TypeScript TIP: strict flag in tsconfig (1:31)
24. TypeScript TIP: noImplicitAny (1:04)
25. TypeScript TIP: Union Type (1:10)
26. TypeScript TIP: Typed useState (2:49)
27. TypeScript TIP: useState, Union Type e null (1:32)
28. TypeScript TIP: strictNullCheck (1:52)
Capitolo 1: React, Vite, TypeScript & Tailwind
Pre-Requisiti
1. Creare il progetto React con Vite (1:39)
2. Strict Mode (1:50)
3. Configurare Tailwind (2:52)
4. Utilizzare Google Font (0:58)
5. Tailwind @apply utility e mobile developers tools (6:00)
6. Tailwind Page responsive layout (3:27)
7. Tailwind Creare Button e varianti (6:07)
8. Tailwind Forms Plugin (2:41)
9. Tailwind Tables (1:49)
10. Final Source Code
Capitolo 2: Multiview applications con React Router
Pre-Requisiti
01. Creare le pagine dell'applicazione (3:56)
02. Installare React Router e creare le regole (7:10)
03. La Navigation Bar (+ Emmet TIP) (10:33)
04. Nested Routes e Navigazione Secondaria (3:01)
05. TIP - Short imports con Barrel Files (3:02)
06. TIP - TypeScript Alias paths (5:00)
Capitolo 3: CMS & API con Pocket Base
Pre-Requisiti
01. Installare Pocket Base (4:10)
02. Database - la collezione products (3:50)
03. il Database - la collezione orders (3:08)
04. Popolare il database (2:29)
05. Installare e usare l'SDK JavaScript di PocketBase (3:40)
06. Creare il custom type "Product" (2:58)
07. L'hook useEffect (2:29)
08. Gestione stato locale con useState e visualizzazione prodotti (1:42)
09. TIP - env variables - differenziare le proprietà tra ambiente di sviluppo e produzione (2:57)
10. Creare il file pocketbase di configurazione (0:43)
Capitolo 4: Shop Page - Components
Pre-Requisiti
01. Shop Layout - CSS Grid with Tailwind (1:13)
02. Creare il layout dello Shop con Tailwind (3:31)
03. Creare il componente ProductCard: gestire proprietà primitive e callback (7:49)
04. Comunicazione con le API REST e gestione stato di "pending" (1:38)
05. Gestione degli errori (1:33)
06. Creare il componente "ServerError" (1:32)
07. TIP - Aggiornare gli alias paths in tsconfig.json (0:18)
08. Creare un componente "Spinner" animato utilizzando le icone di FontAwesome (2:50)
09. Download Source Code Progetto
Capitolo 5: Zustand e Global state management
01. CartPanel Layout (7:17)
02. useCartPanel - Glogal Store con Zustand (6:15)
03. Use global state in NavBar e Shop Page-audio (3:10)
04. Usare lo store nel componente Cart Panel (0:57)
05. Download Source Code progetto
Capitolo 6: Il Carrello e la pagina Checkout
Pre-Requisiti
01. Cart Store con Zustand (6:50)
02. Dynamic Cart Panel - Utilizzare lo store (2:42)
03. Enhance Store - gestione quantità (2:58)
04. Cart Selectors (4:12)
05. Usare i selettori nella NavBar (0:52)
06. La pagina Cart (7:39)
07. useCart store - refactoring e completamento (4:01)
08. Checkout Button (1:44)
09. Controlled Forms: la pagina Checkout (10:06)
10. Form Validations (1:45)
11. Form Field Validation e dynamic CSS class con "clsx" (1:46)
12. Dirty State e setState simultanei (2:28)
13. Regex Validators (0:50)
14. Form Prevent Default (1:23)
15. Creare il Type Order (3:37)
16. Ultimi fix per procedere alla pagina thank you (2:22)
17. useCheckout - spostare la business logic in un custom hook (4:09)
18. Thank you Page (0:22)
19. Disabilitare il Cart Badge se il carrello è vuoto (0:40)
20. Demo Finale e Download Source (1:24)
Capitolo 7: Autenticazione
01. Login Form - Controlled Form (4:36)
02. useLogin - Custom Hook (1:13)
03. Creare un modulo per le API di Authentication di PocketBase (2:27)
04. Authentication Store and Actions con Zustand (5:07)
05. Auth Zustand Selectors (0:42)
06. Auth Barrel File (0:52)
07. Usare le API di Autenticazione (1:47)
08. Gestione Errori nel Login (1:53)
09. Redirect dopo il login con useEffect (1:37)
10. AuthLogin e LocalStorage (1:48)
11. Logout (1:45)
12. Componente "IfLogged": protezione DOM, Fragment and PropsWithChildren (4:28)
13. Componente IfLogged...else (1:53)
14. Private Route (3:21)
Download Source Code
Capitolo 8: Gestione API e stato Prodotti con useReducer, typed actions and custom hooks
Pre-Requisiti (14:06)
Introduzione e Obiettivi del capitolo (1:16)
01. da useState a useReducer (12:11)
02. Products API - "non-null" assertion operator and TypeScript utility types (7:58)
03. Typed State (1:39)
04. Typed Actions (2:53)
05. Product Actions (4:19)
06. Separare il reducer dalla UI (0:54)
07. Products Reducer (9:28)
08. useProductsService - custom Hook Prodotti (10:16)
09.Barrel File e Considerazioni su Refactoring (1:18)
Download Source Code
Capitolo 9: CMS UI - Component-based approach
Pre-Requisiti
01. useEffect (1:09)
02. Differenziare i messaggi d'errore nel componente "ServerError" (3:28)
03. Spinner, useEffect e cleanup function-applicare un debounce (5:03)
04. Creare la tabella statica per la visualizzazione dei prodotti (2:29)
05. Popolare la tabella, cancellare e selezionare elementi e stopPropagation (10:00)
06. clsx - applicare dinamicamente classi css (3:33)
07. Product List Component (7:26)
08. Product Form - creare un side panel con transitions (7:59)
09. Product Form - Controlled Form e Validazioni (8:02)
10. useEffect e dipendenze - sync props con state (3:16)
11. Product Form - gestire EDIT e ADD (7:17)
12. Gestire campi di tipo differente (6:01)
13. Dirty State (0:59)
14. Visualizzazione Immagini (0:43)
15. Scrollable Side Panel (0:26)
16. Upload images con Cloudinary - Setup Account (2:57)
17. Upload con Cloudinary Widget (8:05)
18. useCloudinary - custom hook e Promise (6:44)
19. Creare il file definition type per Cloudinary: index.d.ts (1:31)
20. ShopPage - refactoring - usare actions e reducer (1:28)
Download Source Code
Capitolo 10:
01. Caricare gli ordini (3:24)
02. Order Type (4:26)
03. Orders API (2:03)
04. Orders Actions (1:45)
05. Orders Reducer (2:37)
06. useOrdersService: custom hook (6:49)
07. Orders Barrel File (0:23)
08. CMS Orders Page - invocare la prima azione (0:49)
09. CMSOrders Page - UI (3:20)
10. Salvare su database il nuovo ordine (1:23)
11. Gestire Azioni e Promise (4:19)
Download Source Code
Capitolo 11: contenuti BONUS e aggiornamenti
01. React, Components & CSS Modules: Local vs Global CSS (9:10)
02. Versioning & Deploy di applicazioni React su Vercel (6:02)
03. Pubblicare un'app PocketBase su PocketHost (3:45)
BONUS: Mini corso su React Router 6
1. Introduzione a React Router 6 (1:27)
2. Creazione di un progetto React / TypeScript con CRA (3:41)
3. Creazione Pagine e Navigazione con useState (6:23)
4. Installazione e configurazione React Route (7:07)
5. Barra di Navigazione (8:30)
6. Route dinamiche e gestione parametri (14:01)
7. Nested Routes: Outlet e children (5:30)
8. Proteggere Route da accessi indesiderati (3:26)
9. Nascondere elementi del template se non necessari (2:27)
10. Configurare il router tramite un oggetto (5:14)
11. Ottimizzazione bundle e lazy loading (3:31)
08. Creare un componente "Spinner" animato utilizzando le icone di FontAwesome
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock