# Introduzione

# Cosa imparerai in questo corso?

• acquisire confidenza nell'utilizzo di TypeScript in progetti React
• creazione layout con Tailwind, senza l'ausilio di UIKIT esterni e/o template di terze parti
• gestione route di primo e secondo livello, con navigazione primaria e secondaria
• gestire componenti con molti stati locali tramite l'utilizzo di useReducer, separando azioni, side effect, selettori e stato
• comprendere il potenziale degli state manager per la gestione dello stato globale (utilizzeremo Zustand)
• creare un database tramite l'utilizzo di PocketBase (un ottimo CMS Headless scritto in Go, che potrete utilizzare anche in altri progetti reali)
• effettuare le classiche operazioni CRUD creando un backoffice da zero per gestiore prodotti, ordini e upload di immagini con Cloudinary
• gestire il processo di autenticazione con JWT e tutti gli step necessari per limitare l'accesso all'area riservata, agli elementi del DOM e alle route protette
• applicare best practices e strategie di clean coding per la creazione di codice manunitebile

# Il video corso

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.

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

Sviluppo dell'area riservata

Creiamo un'area riservata con accesso protetto da login tramite JWT token, 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...

Il corso non approfondisce l'aspetto relativo alla sicurezza e la strategia utilizzata da PocketBase, JWT + localStorage, è stata integrata a titolo esemplificativo allo scopo di descrivere e implementare diverse funzionalità di React.

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.

# Punti di forza

# A chi è rivolto

# Il Programma

Fabio Biondi

Fabio Biondi is Google Developer Expert in Angular

He is a freelance Front-End trainer, speaker, content creator and community manager

# Requisiti

• HTML e CSS: conoscenza base
• Confidenza nell'utilizzo di JavaScript ES6: manipolazione Array e Oggetti, destructuring, arrow syntax, promise, Spread operator.
• Fondamenta di TypeScript

Questo corso è disponibile solo ai membri di LearnByDo.ing

Membership

Con la MemberShip potrai accedere a:

Tutti i corsi e i libri di LearnByDo.ing

Corsi Esclusivi riservati alla Membership

Preview dei corsi in fase di sviluppo

Attestati di completamento

Funzionalità della piattaforma riservate ai membri

Note, appunti e cookbook ricchi di informazioni e snippets

Il più economico

3 MESI

€ 6700

invece di € 197

INIZIA

risparmi €71

1 ANNO

€ 19700

invece di € 297

INIZIA

SCONTI QUANTITÀ

1 ANNO

TEAMS

5 utenti: € 700 (€ 935)

10 utenti: € 1300 (€ 1870)

20 utenti: € 2000 (€ 3740)

CONTATTACI

Hai bisogno della fattura? Leggi prima di effettuare l'ordine.

Come richiedere la fattura

La fattura è generata automaticamente in fase di acquisto, quindi assicurati di inserire tutte le informazioni prima del pagamento perché poi non potrai più richiederla.

Guarda il video di 10 secondi qui sotto (non contiene audio)

Esempio di fattura

Pagamenti e fatturazione sono gestiti da "Paddle.Com market Ltd", il sistema di pagamenti utilizzato in questo sito.
Di seguito puoi vedere un esempio di fattura che riceverai subito dopo l'acquisto:

Scopri tutti i dettagli