Blog | Contattami | Elenco corsi

REACT & TYPESCRIPT
(with HOOKS)

Due giornate di formazione su React e Typescript, utilizzando componenti funzionali, hooks e le più recenti API della libreria

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.12 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 ore (2gg)
Livello: Principianti
Versione React: 16.12.x
Versione Typescript: 3.7.x
Tipologia: Corso in aula

ESEMPIO
Nell'esempio seguente, estratto dal corso, potete vedere il codice di una view in cui gestiremo delle operazioni CRUD su una collezione di dati:

1. Creiamo e utilizziamo un custom hook ("useCrud") per la gestione centralizzata della business logic (XHR e stato)

2. Creiamo una UI stateless, applicando un approccio totalmente component-based

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 (versione 16.12+) per essere subito operativi e produttivi

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

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"
"Fetch" 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
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 degli style inline
Inline styles and CSSProperties TS 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
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
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
ISTRUTTORE:
FABIO BIONDI

codemotion-2019-circle



TRAINER, SPEAKER, DEVELOPER
Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in web technologies con specializzazione Angular, con più di 15 anni di esperienza nella creazione di applicazioni web enterprise.

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho inoltre fondato e gestisco diverse community italiane che si occupano di Javascript, Angular e React (quasi 20000 membri).

Attualmente mi occupo di formazione, code review e mentoring principalmente su Angular, React, Javascript / Typescript, Redux, NGRX e RxJS.


CERTIFICATIONI & AWARDS

  • 2019: Microsoft MVP
  • 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 ore (2gg)
    Accesso ad Area educational
    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)