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

React Core Concepts (TypeScript)

Le fondamenta per creare Single Page Application in React e TypeScript.

Durata
16h
Sessioni
4 da 4h
Livello
Base
[ 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

React, sviluppato da Facebook, è attualmente una delle librerie Javascript più amate e utilizzate per lo sviluppo del front-end di applicazioni web.

Non penso ci sia bisogno di presentare la libreria, perché molto famosa. Tuttavia, non è spesso noto a molti, soprattutto ai principianti, che con React è oggi possibile anche creare plugin per Microsoft Office, componenti per Wordpress, creare siti web super performanti con NextJS, creare applicazioni mobile con React Native ed è utilizzato in moltissimi altri contesti.
§02

Perchè TypeScript??

• Ormai uno standard de facto nello sviluppo di applicazioni web e utilizzato dalla maggior parte dei frameworke e librerie JavaSCript
• Static Type System
• Errori a compile-time
• Funzionalità di completamento più precise e refactoring più sicuro negli IDE
• Solido e sicuro: riduce i bug causati da errate assunzioni sul tipo
• Aiuta a documentare il codice
• Features: introduce nuove funzionalità molto più celermente rispetto a Javascript
§03

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

• Ho ridotto al minimo l'utilizzo di librerie esterne per focalizzarci totalmente sulle funzionalità di React, senza troppe magie e imparando "l'arte di arrangiarsi".

§04

Obiettivo

Al termine del corso gli studenti saranno in grado di creare le loro prime semplici applicazioni in React
[ 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.

8 moduli · 69 argomenti
  1. M01

    Hello React

    • Creazione progetto React
    • Installazione tools e configurazione dell'ambiente di lavoro
    • Analisi dei file che compongono un progetto React
    • Introduzione al sistema di template JSX
  2. M02

    TSX e React Components

    • Introduzione a TSX: la versione TypeScript di JSX
    • Creare un progetto React / TypeScript con Vite
    • React Components e TSX: Arrow Function vs Regular Function
    • JSX Multiline
    • React Fragment
    • JSX Expressions
    • Dynamic Attributes
    • Conditional DOM
    • Ternary Operator
    • Split in functions
    • Creare custom components
    • Component Properties: passare proprietà ai componenti
    • Split in multiple files
    • Gestione eventi del mouse
    • Rendering e React Strict Mode
    • useState hook: gestire lo stato locale
    • Visualizzare un elenco di dati con map
    • useState & Map: aggiungere elementi alla lista
    • useEffect and Fetch Data (GET)
    • fetch, POST e aggiornamento stato
    • Custom Types
    • Utilizzare axios per la comunicazione con le API REST
    • JavaScript: utilizzare il destructuring per le proprietà
    • Typescript: tipizzazione dei componenti
    • TypeScript: strict flag in tsconfig
    • TypeScript: noImplicitAny
    • TypeScript: Union Type
    • TypeScript: Typed useState
    • TypeScript: useState, Union Type e null
    • TypeScript: strictNullCheck
  3. M03

    Styling

    • applicare classi CSS dinamicamente sulla base delle proprietà dei componenti
    • Applicare classi con l'utility "clsx"
    • Inline styling
    • Typescript: Tipizzazione styles
    • La proprietà children
    • Organizzare il CSS in differenti files
    • Glocal CSS vs Local Scoped CSS vs CSS Modules
    • Installazione e utilizzo librerie CSS: Tailwind e/o Bootstrap, FontAwesome
  4. M04

    Hooks, fetch e REST API, async-await

    • Introduzione alla gestione dello stato in functional components
    • State vs Proprietà
    • Hook: gestione stato con useState
    • Hook: lifecycle con useEffect
    • Comunicazione server: fetch API e Promise
    • Comunicazione server: utilizzo della libreria "Axios"
    • Utilizzo di async-await
    • Gestire stati distribuiti su più componenti
  5. M05

    MultiView Application con React Router

    • Installazione e utilizzo di React Router Dom
    • Definire le regole del router
    • Navigazione tra pagine
    • Redirect e Default view
  6. M06

    Eventi

    • Mouse e Keyboard events
    • Event Handlers in TypeScript
    • Passare funzioni ed event handler a componenti
  7. M07

    Forms

    • Intro sui Form in React
    • Gestione Forms senza l'ausilio di hooks e librerie esterne
    • useRef hook - assegnare focus ad un campo di input
    • Uncontrolled forms
    • Controlled Form e gestione stato del form
    • Validazione di form
    • Gestione stato form "error" e "dirty"
    • Creare form con Input, Checkbox, Select
  8. M08

    Esempi

    • Dashboard dinamiche
    • Semplici CRUD
    • Sviluppo siti web
    • Snippet ad hoc sulla base delle necessità
[ corsi propedeutici ]

Prima di questo corso...

[ corsi correlati ]

Potrebbero piacerti anche...

Pronto a portarlo nel tuo team?

Contattami →