Blog | Contattami | Elenco corsi

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

react-ts



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.
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
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"

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.

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.
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

codemotion-2019-circle



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).

  • Awards Google & Microsoft
    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?
    Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di partecipanti (da 3 a 30 persone).
    Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato sulle iniziative
    Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
    Assolutamente sì. Utilizza il form di contatto per organizzare una riunione Skype / telefono
    Posso modificare il programma e creare un corso personalizzato ?
    Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo stilare insieme un programma personalizzato sulla base dei vostri obiettivi e del background dei partecipanti. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)
    Dove può essere erogato il corso?
    • In Friuli, Ronchi dei Legionari (Gorizia) - Max 14 posti con seduta e tavolo oppure 80 posti solo seduta.
    • On-Site, presso la vostra sede, in tutta Italia
    Quanto costa?
    Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata
    C'è un quantitativo minimo di giornate da acquistare?
    Almeno 2 giornate se la durata del viaggio (da Trieste, la provincia in cui risiedo) è inferiore alle 4 ore.
    Tre giornate, invece, nel caso di una durata superiore.
    Il corso prevede esercitazioni per gli studenti?
    La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti
    Devo portare il mio laptop?
    Lo consiglio ma non è indispensabile. È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)