React PRO - Creare
Real World applications
Tailwind, Zustand, Vite e TypeScript
Un corso pratico in cui sviluppiamo da zero un'applicazione React con TypeScript analizzando diversi scenari e casi d'uso frequenti - autenticazione, state management locale e globale, gestione forms, router, creazione layout e componenti, best practices e molto altro...
11
capitoli
+100
video
+6 ore
di lezione
Il corso
Questo corso sposa la filosofia "Learn by Doing".
Creeremo passo-passo un piccolo negozio per la vendita di prodotti, dal layout alla gestione del carrello.
Avrai modo, inoltre, di configurare il database e sviluppare il relativo CMS per la gestione di ordini e prodotti, integrando tutto il processo per gestire autenticazione e sicurezza .
Cosa imparerai in questo corso?
L'obiettivo del corso non è tanto quello di creare un software pronto per la produzione ma:
1
Modern Stack
React 18, TypeScript, Vite, Tailwind, Zustand.
2
Progetto real-world
Sviluppo applicazione CRUD con area pubblica e riservata. La maggior parte dei concetti sono comunque applicabili anche in meta-framework come Next o Gatbsy
3
Video brevi
La durata media dei video è di 4 minuti. Inutile creare video lunghi e noiosi al solo scopo di aumentare la durata del corso
4
Mini corso ES6 & TypeScript
Incluso nel prezzo un mini-corso di 3 ore su Javascript ES6 e TypeScript, propedeutico all'apprendimento di React
5
Supporto
Puoi chiedere supporto tramite i commenti visibili sotto ad ogni video
A chi è rivolto
Beginners
Non hai mai usato React? Probabilmente non è il corso più semplice da cui partire ma questo percorso rappresenta la strada più veloce per comprendere in breve tempo il potenziale della libreria tramite la creazione di un progetto reale.
In ogni capitolo troverai comunque i prerequisiti necessari per svolgerlo e relativi link di approfondimento
In ogni capitolo troverai comunque i prerequisiti necessari per svolgerlo e relativi link di approfondimento
React Developer
Utilizzi React da un po' di tempo o hai già seguito un corso base?
Potrai scoprire nuovi trick, strategie o strumenti!
Consulta il programma e verifica se il corso può far per te.
*Potrai chiedere il rimborso entro 30gg nel caso non fossi soddisfatto
Potrai scoprire nuovi trick, strategie o strumenti!
Consulta il programma e verifica se il corso può far per te.
*Potrai chiedere il rimborso entro 30gg nel caso non fossi soddisfatto
Requisiti
Tutti i concetti descritti nel corso sono affrontati passo-passo. Tuttavia consiglio di acquistarlo solo se si possiedono le seguenti conoscenze:
Punti di forza
Acquisire il know-how necessario per creare progetti reali in React nel più breve tempo possibile:
Progetto real-world
Organizzare e strutturare un progetto React / TypeScript
Tailwind & CSS
Creare layout senza l'ausilio di componenti e temi pre-confezionati
React e TypeScript
Acquisire confidenza con React e le sue API con particolare attenzione all'utilizzo di TypeScript
State Management
Gestione stato locale con useReducer e stato globale con Zustand
React Router
Creare applicazioni multi-view con route di primo e secondo livello
Clean Coding
Best practices, convenzioni e diversi consigli utili per la creazione di codice manutenibile
Autenticazione
Gestire il processo di autenticazione e sicurezza: area pubblica e riservata, protezione DOM e route, procedure di login / logout e molto altro...
CMS
Utilizzo di CMS Headless (PocketBase), creazione del database e integrazione con SDK esterni.
Crea un progetto reale da zero
In questo corso realizziamo un semplice shop online per l'acquisto di prodotti, con carrello, CMS per gestione prodotti e ordini, autenticazione e molto altro.
Utilizzerai React e TypeScript, il layout sarà creato interamente con Tailwind, lo stato locale tramite useReducer e quello globale con il micro state manager Zustand, utilizzerai Cloudinary per l'upload delle immagini, gestirai router, forms e molto altro.
Riassumendo:
affronterai moltissimi scenari tipici presenti nella maggior parte delle applicazione front-end.
Riassumendo:
affronterai moltissimi scenari tipici presenti nella maggior parte delle applicazione front-end.
Sviluppo dell'area riservata
Creiamo un'area riservata, con accesso protetto tramite JWT, per la gestione di prodotti e ordini:
creazione database, sviluppo pagina di login e procedura di logout, proteggere l'area riservata da accessi indesiderati, nascondere elementi del DOM in base allo stato dell'utente e molto altro...
creazione database, sviluppo pagina di login e procedura di logout, proteggere l'area riservata da accessi indesiderati, nascondere elementi del DOM in base allo stato dell'utente e molto altro...
POCHISSIME DIPENDENZE
Uno dei problemi più diffusi nello sviluppo e per la manutenzione di applicazioni React è il numero elevato di dipendenze che spesso includono questi progetti.
Spesso si installa una dipendenza senza pensarci molto ma la realtà dei fatti è che rappresenterà di certo un debito tecnico !
Per questo motivo creeremo pressoché tutto da zero eccetto per alcune dipendenze chiave:clsx: utility (20 righe) per applicare dinamicamente classi CSS
font-awesome: un banale set di icone
pocketbase: l'SDK per comunicare con il database che integreremo
react, react-dom e react-router-dom: la libreria React e il router più utilizzato nel suo ecosistema
zustand: uno dei micro state manager più diffusi per gestire facilmente stati globali
Per questo motivo creeremo pressoché tutto da zero eccetto per alcune dipendenze chiave:
BEST PRACTICE e TIPS
React non è un framework opinionato e per questo motivo ogni sviluppatore ha diverse metodologie di lavoro e convinzioni su quale sia l'approccio migliore per risolvere un problema o gestire un determinato scenario.
Anche se il progetto realizzato è composto da poco più di 50 files, in questo percorso cercherò di trasferire la mia esperienza, le strategie e i pattern che spesso adotto per creare applicazioni scalabili e manutenibili nel tempo.
Anche se il progetto realizzato è composto da poco più di 50 files, in questo percorso cercherò di trasferire la mia esperienza, le strategie e i pattern che spesso adotto per creare applicazioni scalabili e manutenibili nel tempo.
Il Programma
Il progetto è stato realizzato con React 18.2, Vite 4, Tailwind 3, React Router 6.8 e le ultime versioni di ogni libreria (aggiornate al primo trimestre del 2023).
Ogni capitolo ha due obiettivi:
Il corso è ancora in fase di sviluppo: durata e programma possono variare.
La data di uscita è prevista per fine marzo / inizio aprile
Capitolo 1: React, Vite, TypeScript & Tailwind
Durata: 26:37
Creare un progetto React 18 utilizzando Vite e TypeScript.
L'obiettivo del capitolo è quello di configurare il progetto correttamente, impostare il layout e iniziare a prendere confidenza con Tailwind creando diverse classi di utility globali che ci serviranno per la realizzazione dell'applicazione: buttons, forms, layout, tabelle.
L'obiettivo del capitolo è quello di configurare il progetto correttamente, impostare il layout e iniziare a prendere confidenza con Tailwind creando diverse classi di utility globali che ci serviranno per la realizzazione dell'applicazione: buttons, forms, layout, tabelle.
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
2:41
7. Tailwind Creare Button e varianti
6:07
8. Tailwind Forms Plugin
2:41
9. Tailwind Tables
1:49
Capitolo 2: Multiview applications con React Router
Durata: 32:42
Come creare Single Page Application multi-view con route di primo e secondo livello.
Si analizzano, inoltre, alcune best practices per l'ottimizzazione degli import e l'organizzazione delle cartelle del progetto
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
Durata: 28:06
Installare e configurare PocketBase, un CMS headless scritto in Go che sfrutteremo per la creazione delle REST API e per tutto il processo di autenticazione e sicurezza.
Sarà, inoltre, creato il database step-by-step, sarà utilizzato l'SDK JavaScript di PocketBase e si procederà con la sua integrazione e la visualizzazione dei primi dati all'interno dell'applicazione React
01. Installare Pocket Base
4:10
02. Database - la collezione products
3:50
03. 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
Durata: 20:24
Creiamo la pagina del negozio online per la visualizzazione dei prodotti.
In questo capitolo daremo spazio al concetto di componenti: organizzare la view in componenti gestendo stato, proprietà e lifecycle.
In questo capitolo daremo spazio al concetto di componenti: organizzare la view in componenti gestendo stato, proprietà e lifecycle.
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
Capitolo 5: Zustand e gestione stato globale
Durata: 24:38
Installare e configurare il micro state manager "Zustand" per creare porzioni di stato accessibili globalmente. Creeremo un componente "CartPanel" per visualizzare una preview del carrello in overlay, il cui stato di visualizzazione sarà controllato da diverse parti dell'applicazione
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
Capitolo 6: Il Carrello e la pagina Checkout
Durata: 01:01:50
Creaimo il carrello della spesa e la pagina Checkout esplorando diversi argomenti: utilizzo di stati locali, globali, creazione di "controlled forms", validazioni e molto altro.
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
1:24
Capitolo 7: Autenticazione
Durata: 33:35
Gestire il processo di autenticazione: utilizzo di zustand, procedure di login e logout, selettori, azioni, protezione DOM e route.
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
Capitolo 8: useReducer, custom hooks e side effects
Durata: 01:06:18
Gestire i servizi REST e lo stato dei prodotti tramite l'utilizzo di useReducer e la creazione di azioni, selettori e side effects.
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 typescrit 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
Capitolo 9: Creare la UI del CMS
Creazione dell'interfaccia grafica del CMS.
CAPITOLO PRESTO DISPONIBILE!
Riassunto argomenti:
CAPITOLO PRESTO DISPONIBILE!
Riassunto argomenti:
CMS Page
CMS Product List Component
CMS Product Form Component: Controlled Form
CMS Product Form Component: Edit
CMS Product Form Component: Add
Gestire campi di diverso tipo
Upload Image con Cloudinary
Creare il Cloudinary custom hook
Move Form Logic to custom hook
Capitolo 10: gestire gli ordini
Gestire gli ordini degli utenti. Si consolidano i concetti acquisiti nei capitoli precedenti
CAPITOLO PRESTO DISPONIBILE!
Riassunto argomenti:
CAPITOLO PRESTO DISPONIBILE!
Riassunto argomenti:
Get Orders API
Order Model
Orders API
Orders Typed Actions
Orders useReducer
useOrderService custom hook
Barrel file
Sviluppare la UI
Incluso nel pacchetto
Mini corso JavaScript ES6 / TypeScript
JavaScript ES6 Fundamentals
40:46
JavaScript ES6 Fundamentals
40:46
• Introduzione ad ES6/TS, Babel e Webpack (8:48)
• Javascript ES6 - Cheatsheet
• var vs let - Block Scope vs Function Scope (4:06)
• Le costanti: const - Mutabilità vs Immutabilità (6:23)
• Template literals: stringhe multiline con espressioni (3:58)
• Short Object syntax (2:26)
• Destructuring Array (3:38)
• Destructuring Object - part 1 (5:47)
• Destructuring Object - part 2: nested props (3:27)
• Destructuring Object - part 3: rename & short object syntax (2:13)
Manipolazione dati e immutabilità
43:13
Manipolazione dati e immutabilità
43:13
• Array Spread operator: clone, merge e modifica array (3:15)
• Object Spread operator vs Object.assign (4:55)
• Arrow function (4:32)
• Array: map (4:10)
• Array: filter (2:41)
• Array: find & findIndex (3:29)
• Immutabilità in ES6, React, Angular, Redux (13:30)
• Classes, Ereditarietà e lexical this (6:41)
imports and modules
17:32
imports and modules
17:32
• Creazione progetto ES6 con webserver e npm (3:01)
• Hello ES6: il tag "script" (1:38)
• Import modules e type="module" (5:34)
• Import as (1:56)
• Import default (5:23)
Async & Promise: by Andrea Simone Costa
14:03
Async & Promise: by Andrea Simone Costa
14:03
• Promises (8:39)
• Fetch: comunicazione con il server (2:53)
• Async Await (2:31)
TypeScript: fundamentals
47:26
TypeScript: fundamentals
47:26
• Introduzione a TypeScript (1:29)
• Utilizzare il mio playground TypeScript (3:45)
• Utilizzare on-line playground: StackBlitz (3:19)
• Inferenza in TypeScript (2:36)
• Primitives Types (4:17)
• Tipizzare oggetti usando interface e gestione proprietà opzionali (5:55)
• Tipizzare oggetti complessi (4:14)
• Tipizzare array (3:15)
• Utilizzo di class e type per la tipizzazione (6:15)
• Classi: private vs public (1:41)
• Classi: getter & setter (3:42)
• Tipizzare funzioni (5:02)
• Type, literals e introduzione a Union types (1:56)
Acquista il corso
Accedi al materiale dove e quando vuoi... per sempre!
PRESTO DISPONIBILE
React Pro: Creare Real World applications
Disponibile tra fine marzo e aprile. Iscriviti alla newsletter per essere avvisato e ricevere uno sconto promozionale
-
Corso React Pro:
Creare Real World applications -
~100 video tutorial su React
-
~5/6 ore di lezione su React
-
Corso JavaScript ES6 / TypeScript (+ 3 ore)
-
30 gg soddisfatto o rimborsato
FAQ
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Certo, puoi scrivermi tramite il Form di Contatto
È possibile fruire il corso simultaneamente su device?
È possibile fruire il corso simultaneamente su device?
Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati.
Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
Contattami per ulteriori info.
Contattami per ulteriori info.
È previsto un rimborso nel caso non fossi soddisfatto?
È previsto un rimborso nel caso non fossi soddisfatto?
Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 30 giorni dall'acquisto
Posso ricevere la fattura?
Posso ricevere la fattura?
In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione.
Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto.
Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale.
Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
L'iva viene applicata? La fattura è inviata da un'azienda americana
L'iva viene applicata? La fattura è inviata da un'azienda americana
Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA
La possibilità di visionare il corso è limitata nel tempo?
La possibilità di visionare il corso è limitata nel tempo?
No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.
Dubbi e Domande?
Dubbi e Domande?
Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto
Dove posso seguirti per ulteriori aggiornamenti?
Dove posso seguirti per ulteriori aggiornamenti?
Sono presente su tutti i principali social network. Trovi i link nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
Per favore inviami una segnalazione compilando il Form di contatto
Keep updated about latest content
videos, articles, tips and news
BETA
2023 Fabio Biondi | P.I. 01116230317