Corso React, Redux e Next.js

Formazione professionale per sviluppatori frontend

Corso di formazione professionale su React, Redux, Next.js per sviluppatori frontend. Il corso, che ho ad oggi tenuto presso decine di aziende in tutta Italia, è diviso in due varianti: la versione corta, della durata di 3 giornate lavorative, e la versione lunga, della durata di 5 giornate lavorative. La versione base copre argomenti legati alle fondamenta di React, mentre la versione più lunga copre anche argomenti legati a Redux, React Router e Testing.

Sono disponibili anche dei moduli aggiuntivi legati a Next.js, sia relativi al Pages Router (fino alla v12) che all'App Router (dalla v13 in poi). Questi moduli vengono solitamente trattati in alternativa a Redux e React Router, ma possono essere trattati anche in aggiunta ad essi allungando la durata complessiva del corso.

Il corso può essere svolto utilizzando sia TypeScript che JavaScript, e sono disponibili due moduli opzionali da mezza giornata ciascuno per il ripasso dei concetti di base di entrambi i linguaggi, con particolare attenzione alle feature più moderne.

Il corso è erogabile sia in lingua italiana che in lingua inglese, e può essere tenuto sia in presenza che da remoto.

Per la partecipazione al corso è richiesta una buona conoscenza di HTML, CSS e JavaScript (o TypeScript); il corso è pensato per sviluppatori con precedenti esperienze di programmazione.

I moduli previsti, ciascuno della durata di mezza giornata (4 ore), sono i seguenti:

  • Refresh su JavaScript (opzionale)
    • Transpiling e bundling;
    • var, let e const;
    • Module System;
    • Arrow Functions;
    • Classi;
    • Operatori Spread e Rest;
    • Destructuring;
    • Object Literals;
    • Template Literals;
    • Cicli for in e for of;
    • Nullish Coalescing Operator;
    • Optional Chaining;
  • Refresh su TypeScript (opzionale)
    • Introduzione a TypeScript;
    • Tipi primitivi;
    • Definizione di tipi;
    • Type inference e type casting;
    • Generics;
    • Interfacce ed Enums;
  • Introduzione a React
    • Cos'è React;
    • Paradigma imperativo e Paradigma dichiarativo;
    • JSX;
    • Componenti React (function components e class components);
    • Setup di un progetto con Vite;
    • Virtual DOM;
  • Class Components (opzionale)
    • Props;
    • Gestione degli eventi;
    • Gestione dello stato;
    • Lifecycle di un componente;
  • Function Components
    • Props;
    • Gestione degli eventi;
    • Introduzione agli hooks;
    • Gestione dello stato (useState);
    • Effetti collaterali e sincronizzazione (useEffect);
  • Forms e Liste
    • UI interattive ed eventi avanzati;
    • Form controllati;
    • Form non controllati;
    • useRef ed accesso al DOM;
    • Gestione delle liste e chiavi univoche;
  • Data Fetching e Custom Hooks
    • La funzione fetch in JavaScript;
    • Axios;
    • Introduzione al data fetching in React;
    • Custom Hooks;
    • Caching e deduplication con SWR;
  • Composition e Context
    • Composizione di componenti (children);
    • Context API;
    • Styling dei componenti (CSS, SCSS, inline styles);
    • Lifting state up;
  • Redux Base
    • State Management;
    • Il paradigma Flux;
    • Introduzione a Redux;
    • Principi fondamentali: stato, azioni, reducer;
    • Creazione dello store;
    • Accesso ed interazione con lo store;
  • Redux Avanzato
    • Gestione dei middleware;
    • Operazioni asincrone e thunk;
    • Redux DevTools;
    • Redux Toolkit;
    • React Redux;
  • React Router
    • Installazione e configurazione;
    • Router e routes;
    • Link e navigazione;
    • Rotte parametriche;
    • Rotte annidate;
  • Testing
    • Fondamenta di Testing con Vitest e React Testing Library;
    • Introduzione a Vitest;
    • Scrivere un test e definire asserzioni;
    • Test di operazioni asincrone;
    • Testare componenti React con React Testing Library;
    • Testare hooks con React Testing Library;
  • Next.js Pages Router
    • Introduzione e creazione di un progetto Next.js;
    • Pagine e routing;
    • Routing dinamico;
    • Data fetching;
    • Gestione delle immagini;
    • Internazionalizzazione;
  • Next.js App Router, parte I
    • Introduzione ai React Server Components;
    • Creazione e struttura di un progetto Next.js con App Router;
    • Routing, Links e Navigazione;
    • Layouts e Templates;
    • Gruppi di rotte;
    • Rotte dinamiche e query string;
  • Next.js App Router, parte II
    • Data Fetching;
    • Loading State e Error State;
    • Rotte parallele;
    • Route handler e Middleware;
    • Gestione delle immagini;
    • Gestione dei metadati;

Durante lo svolgimento dei moduli saranno proposti esercizi propedeutici all'apprendimento degli argomenti trattati. Per ulteriori informazioni o per chiedere un preventivo puoi inviarmi una email.