REACT FUNDAMENTALS
in TYPESCRIPT
Un corso di formazione su React e Typescript personalizzabile: dalle basi ai pattern più recenti fino ad ottimizzazioni e tecniche di state management

INTRODUZIONE
React, sviluppato da Facebook, è attualmente una delle librerie Javascript più amate e utilizzate per lo sviluppo di Single Page Application.
Dalla metà del 2019 React è decisamente cambiato rispetto alle precedenti versioni, per 3 motivi principali:
1) Typescript: che è ormai adottato dalla maggior parte degli sviluppatori React, soprattutto in contesti enterprise. Tuttavia, anche nel caso avessi già esperienza in Typescript, non è sempre banale la sua integrazione in applicazioni React e, di conseguenza, questo corso vi potrà essere molto utile.
2) Hooks: In React 16.8 sono stati introdotti ufficialmente gli "hooks" che hanno stravolto il modo di scrivere applicazioni e componenti React, abbandonando quasi esclusivamente l'utilizzo dei componenti "class-based".
3) Nuove API: il corso è aggiornato alla release 16.13+ di React e Typescript 3.7.x.
Dalla metà del 2019 React è decisamente cambiato rispetto alle precedenti versioni, per 3 motivi principali:
1) Typescript: che è ormai adottato dalla maggior parte degli sviluppatori React, soprattutto in contesti enterprise. Tuttavia, anche nel caso avessi già esperienza in Typescript, non è sempre banale la sua integrazione in applicazioni React e, di conseguenza, questo corso vi potrà essere molto utile.
2) Hooks: In React 16.8 sono stati introdotti ufficialmente gli "hooks" che hanno stravolto il modo di scrivere applicazioni e componenti React, abbandonando quasi esclusivamente l'utilizzo dei componenti "class-based".
3) Nuove API: il corso è aggiornato alla release 16.13+ di React e Typescript 3.7.x.
PERCHÈ UTILIZZARE TYPESCRIPT?
• Supportato dalla CLI ufficiale di React (CRA)
• Static Type System
• Solido e sicuro: riduce i bug causati da errate assunzioni sul tipo
• Funzionalità di completamento più precise e refactoring più sicuro negli IDE
• Aiuta a documentare il codice
• Errori a compile-time
• Utilizzato ormai in Angular, React, Vue, Node, ...
• Popolare: è ormai uno dei linguaggi più utilizzati al mondo
• La community React lo ama e sempre più team lo stanno adottando
• Features: introduce nuove funzionalità molto più celermente rispetto a Javascript
• Microsoft: componenti React / TS possono essere utilizzati in Microsoft Power Apps, Dynamics e Office 365
• Static Type System
• Solido e sicuro: riduce i bug causati da errate assunzioni sul tipo
• Funzionalità di completamento più precise e refactoring più sicuro negli IDE
• Aiuta a documentare il codice
• Errori a compile-time
• Utilizzato ormai in Angular, React, Vue, Node, ...
• Popolare: è ormai uno dei linguaggi più utilizzati al mondo
• La community React lo ama e sempre più team lo stanno adottando
• Features: introduce nuove funzionalità molto più celermente rispetto a Javascript
• Microsoft: componenti React / TS possono essere utilizzati in Microsoft Power Apps, Dynamics e Office 365
PERCHÈ USARE GLI HOOKS?
• 100% backwards-compatible
• Completely opt-in: puoi utilizzarli o meno insieme a componenti di "vecchia" generazione
• React Trend: il team Facebook sta chiaramente andando in questa direzione e non ha più senso utilizzare le classi
• Riutilizzo della logica: semplificano la creazione di componenti complessi isolando la business logic (forms, fetch, redux, drag'n'drop ...)
• Stateful Functional Components: introducono la gestione dello stato in componenti funzionali
• Nuovo Component lifecycle: introducono il ciclo di vita nei componenti funzionali e lo semplificano rispetto alle classi
• Meno componenti: riducono il numero di componenti dell'applicazione e si evita l'utilizzo di "higher order components" e "render props"
• Completely opt-in: puoi utilizzarli o meno insieme a componenti di "vecchia" generazione
• React Trend: il team Facebook sta chiaramente andando in questa direzione e non ha più senso utilizzare le classi
• Riutilizzo della logica: semplificano la creazione di componenti complessi isolando la business logic (forms, fetch, redux, drag'n'drop ...)
• Stateful Functional Components: introducono la gestione dello stato in componenti funzionali
• Nuovo Component lifecycle: introducono il ciclo di vita nei componenti funzionali e lo semplificano rispetto alle classi
• Meno componenti: riducono il numero di componenti dell'applicazione e si evita l'utilizzo di "higher order components" e "render props"
Durata: 16/32 ore
Livello: Principianti
Versione React: 18.x
Versione Typescript: 4.x
Tipologia: Corso in aula
PUNTI DI FORZA DEL CORSO
In questo corso React, ho cercato di raccogliere i concetti fondamentali, le metodologie più utilizzate e i casi d'uso più frequenti che si presentano durante lo sviluppo di Single Page Application in React / Typescript.
• In breve tempo conoscerete le funzionalità più importanti delle ultime release della libreria per essere subito operativi e produttivi
• Puoi personalizzare la durata del corso (da 16 a 32 ore), scegliere quali argomenti affrontare (tra quelli disponibili nel programma) e la complessità con cui trattare le tematiche sulla base delle necessità e preparzione del team
• Applicherete fin da subito metodologie e best practice allo scopo di creare codice scalabile e semplice da mantenere: approccio component-based, custom hooks, lazy loading, gestione sicurezza, utilizzo di Typescript, componenti riutilizzabili.
• Ho ridotto al minimo l'utilizzo di librerie esterne: per descrivere i concetti fondamentali della libreria utilizzeremo semplicemente la versione CSS di "Bootstrap" per il layout, "React Router DOM" per la creazione di applicazioni multiview e "classnames", una semplice utility per applicare dinamicamente classi CSS.
• Il corso è propedeutico all'utilizzo di Redux & Redux Toolkit.
• Sono previste moltissime esercitazioni da effettuare durante e/o dopo il corso allo scopo di consolidare le conoscenze acquisite durante le lezioni. Saranno disponibili nell'esclusiva area riservata a cui gli studenti avranno accesso anche dopo il termine del corso.
• In breve tempo conoscerete le funzionalità più importanti delle ultime release della libreria per essere subito operativi e produttivi
• Puoi personalizzare la durata del corso (da 16 a 32 ore), scegliere quali argomenti affrontare (tra quelli disponibili nel programma) e la complessità con cui trattare le tematiche sulla base delle necessità e preparzione del team
• Applicherete fin da subito metodologie e best practice allo scopo di creare codice scalabile e semplice da mantenere: approccio component-based, custom hooks, lazy loading, gestione sicurezza, utilizzo di Typescript, componenti riutilizzabili.
• Ho ridotto al minimo l'utilizzo di librerie esterne: per descrivere i concetti fondamentali della libreria utilizzeremo semplicemente la versione CSS di "Bootstrap" per il layout, "React Router DOM" per la creazione di applicazioni multiview e "classnames", una semplice utility per applicare dinamicamente classi CSS.
• Il corso è propedeutico all'utilizzo di Redux & Redux Toolkit.
• Sono previste moltissime esercitazioni da effettuare durante e/o dopo il corso allo scopo di consolidare le conoscenze acquisite durante le lezioni. Saranno disponibili nell'esclusiva area riservata a cui gli studenti avranno accesso anche dopo il termine del corso.
REQUISITI
Familiarità con almeno un linguaggio di programmazione ad oggetti.
È preferibile, ma non indispensabile, aver già utilizzato in precedenza HTML, CSS e avere un po' di confidenza nella manipolazione del DOM in Javascript.
È preferibile, ma non indispensabile, aver già utilizzato in precedenza HTML, CSS e avere un po' di confidenza nella manipolazione del DOM in Javascript.
PROGRAMMA
Hello React
Creazione progetto React
Utilizzo di JSX
template condizionali
Analisi dei file che compongono un progetto React
Installare librerie CSS: Bootstrap e FontAwesome
Utilizzo di CSS
Hello Custom Components
Typescript: tipizzazione dei componenti
Typescript: inferenza
TypeScript 3.7 TIP: optional chaining
Passare Proprietà ai componenti e tipizzazione
Passare template JSX come proprietà
Hooks, fetch e REST API, async-await
Introduzione alla gestione dello stato in functional components
Hook: gestione stato con "useState"
Hook: lifecycle con "useEffect"
Comunicazione server: "fetch" API e "Promise"
Comunicazione server: utilizzo della libreria "Axios"
"Fetch & Axios" e utilizzo di "async-await"
Utilizzo di "useState" in children component
model & entities
Creazione di vari custom hook
MultiView Application con React Router
Perchè React Router
Installazione e utilizzo di React Router Dom
Definire le regole del router
Creare la navigation bar
Lazy Loading with Suspense
Route e Passaggio Parametri
Redirect e Default view
Hook: cambiare route con "useHistory"
CRUD App - Parte 1: liste e collezioni dati
Visualizzare una collezione di elementi
Component-based approach
Organizzare i componenti in moduli
Creare un REST mock server con json-server
Utilizzare l'hook "useEffect per gestire il ciclo di vita dei componenti"
Gestione errori HTTP
Eliminare elementi dal componente children
CRUD App - Parte 2: form - add / edit
Creazione Form Gestione elementi: ADD, EDIT, RESET
Lista - aggiornare i dati di elementi selezionati
Creare custom hook per gestire business logic: stato e XHR
Approfondimento Approccio component-based
Refactoring - organizzare la struttura cartelle
Performance & Optimization
Utilizzo dei React Developer Tools
React Developer Tools: components
React Developer Tools: Profile
Ottimizzazione performance
Differenze tra fase render e commit
Utilizzo di useMemo
Utilizzo di useCallback
Utilizzo di React.memo
Dynamic Component Loading
Creare istanze di componenti a runtime
Utilizzare if, switch e ternary operator
Utilizzo di una dictionary
Utilizzo API: React createElement
Lazy Loading di componenti: React.lazy e Suspense
JSX, styling components & tips
applicare classi CSS dinamicamente sulla base delle proprietà dei componenti
Applicare classi con l'utility "classnames"
Template condizionali: operatore ternario VS "AND" operator
Utilizzo style inline
Inline styles and CSSProperties Type
Typescript: Utilizzare il destructuring per le proprietà
La proprietà "Children"
Organizzare il CSS in differenti files
Glocal CSS vs Local Scoped CSS
CSS Modules
Utilizzo della libreria "classnames"
Utilizzare SCSS nei propri progetti
Mouse events, callback props & stateless apps
Mouse events: utilizzo e gestione tipizzazione
Invocare funzioni in JSX
Dynamic templates
Passare "callback" come proprietà di un componente
Forms
Intro sui Form in React
"useRef" hook - assegnare focus ad un campo di input
KeyboardEvent & uncontrolled forms
Controlled Form e gestione stato del form
Validare i form
Gestione stato form "error" e "dirty"
Creare form con Input, Checkbox, Select
React Hook Form
Utilizzo e configurazione della libreria
Creazione form
Validazione e gestione errori
Le utility fornite dalla libreria
Gestire form con nested object
Autenticazione e Sicurezza
Introduzione a JWT
Login
Persistenza Token con LocalStorage
Guards: rotezione Accesso Route
Creare componenti "speciali" per proteggere il DOM da accessi indesiderati
HTTP Interceptor, header e JWT
Redirects, default view e fallback
Reusable Components + Typescript Tips
Creare componenti riutilizzabili
Estendere le proprietà dei componenti con attributi del DOM
HTML attributes vs HTML Props
Utilizzo dei Generics
Component: Stateful vs Stateless Collapsable
Component: Static Map
Component: Custom Button
Component: TabBar
Introduzione: documentare componenti con Storybook
State management in React
Utilizzo di useState & useReducer per gestione stato globale
Drilling Props vs Composition
Diverse tecniche nell'utilizzo delle Context API
Utilizzo di micro state management: Zustand, Valtio, Jotai
Differenze performance tra le diverse soluzioni
Environment Variables
Variabili d'ambiente: production vs development
Creazione custom environment variables
Tipizzare le variabili d'ambiente: react-app-env.d.ts
ISTRUTTORE:
FABIO BIONDI
FABIO BIONDI

TRAINER, SPEAKER, DEVELOPER
Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in Angular e Web Technologies, e ho più di 15 anni di esperienza nella creazione di applicazioni web enterprise.
Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).
Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS
Dal 2019: Microsoft MVP Dal 2018: Google Developer Expert in Web Technologies e Angular 2004-2011: Adobe Certified Expert & Instructor (Flex, AIR, Flash).

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).
Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS

COSA INCLUDE IL CORSO
Corso di formazione on-site
16/32 ore
Accesso Area Studenti
Slide & Esercizi
Codice Sorgente
Incluso
Attestato di partecipazione
PDF formato A4
FAQ
A chi è rivolto?
Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
Posso modificare il programma e creare un corso personalizzato ?
Dove può essere erogato il corso?
Quanto costa?
C'è un quantitativo minimo di giornate da acquistare?
Il corso prevede esercitazioni per gli studenti?
Devo portare il mio laptop?