FabioBiondi.
0
CatalogoInfoIl tuo programma
← tutti i corsi
// corso · 2026react

React UI: UIKIT riutilizzabile

Crea un UIKIT di componenti React flessibili e riutilizzabili. Storybook per documentare, sperimentare, testare.

Durata
12h
Sessioni
3 da 4h
Livello
Avanzato
[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

Introduzione

Un corso per esplorare la creazione di componenti riutilizzabili in React e ampliare le tue conoscenze su TypeScript. Non solo imparerai a costruire componenti flessibili, ma anche a padroneggiare diverse tecniche, pattern e strategie:
§02

Componenti Riutilizzabili

  • • Imparare tecniche, pattern ed API di React per la creazione di uno UIKIT di componenti flessibili
  • • Creazione di componenti riutilizzabili come Button, ButtonGroup, TabBar, Accordion, GoogleMap/Leaflet", ...
§03

Storybook

  • • Installare e configurare Storybook nei tuoi progetti React/TypeScript.
  • • Creare un ambiente Storybook per documentare i tuoi componenti, semplificando, inoltre, lo sviluppo e il debug.
  • • Scrivere "storie" per i componenti, rendendo più agevole la comprensione delle loro funzionalità.
  • • Introduzione ai test di componenti all'interno di Storybook per garantire la robustezza del tuo codice.
§04

React API

  • • Esplora come creare istanze di componenti in modo dinamico durante l'esecuzione del programma.
  • • Crea interfacce utente dinamiche, ottenendo dati da file API REST per una maggiore flessibilità.
  • • Sperimenta con il caricamento "Lazy Loading" di singoli componenti utilizzando React.lazy e Suspense.
[ programma ]

Cosa vediamo,
in dettaglio.

Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.

4 moduli · 22 argomenti
  1. M01

    Fundamentals

    • Le basi per creare componenti riutilizzabili e UIKIT
    • Stateful e Stateless reusable components
    • Lavorare con la proprietà children
    • Componenti compositi e Children API
    • Compound Components
    • Estendere le proprietà dei componenti con attributi del DOM
    • HTML attributes vs HTML Props
  2. M02

    Creare uno UIKIT

    • Componenti per la gestione della Typography
    • Componenti per la gestione dei layout
    • Component: Card e Collapsable Panels (Stateful vs Stateless)
    • Component: Button e ButtonGroup (composition)
    • Component: TabBar (TypeScript e Generics)
    • Component: Static Maps con MapQuest (ereditare proprietà dle DOM)
    • Component: Accordion
    • Component: Tooltip e Popover con Floating UI
  3. M03

    Storybook

    • Installazione e configurazione Storybook in progetti React/TypeScript
    • Creare uno storybook per documentare i componenti
    • Scrivere "storie"
    • Introduzione ai test di componenti in Storybook
  4. M04

    Dynamic Component Loading

    • Creare istanze di componenti a runtime
    • Creazione UI dinamiche acquisendo i dati da file API REST
    • Lazy Loading di singoli componenti: React.lazy e Suspense
[ corsi propedeutici ]

Prima di questo corso...

[ corsi correlati ]

Potrebbero piacerti anche...

Pronto a portarlo nel tuo team?

Contattami →