Introduzione
  • Descrizione del corso
  • Come seguire e codice sorgente del corso
  • Cos'è React ?
  • Quale linguaggio per sviluppare applicazioni React ?
Ambiente di Sviluppo e Prima Applicazione
  • Cosa vedremo in questa sezione ?
  • Quale Editor per il codice ?
  • Installazione del Package Manager Node JS
  • Problema permessi di amministrazione npm - SOLUZIONE
  • Prima Applicazione React e starter kit
  • Quiz
  • Cosa avete imparato in questa sezione ?
I linguaggi per scrivere applicazioni React: JavaScript e ES6
  • Cosa vedremo in questa sezione ?
  • Istruzioni per la lezione successiva - installazione di Babel 6
  • Babel 6 e ES6
  • Installazione e Configurazione di Babel 7
  • Convertire codice ES6 in JavaScript con Babel ed eseguirlo
  • Variabili var: function scope e block scope
  • let e const
  • Oggetti e const: Come cambia l'accessibilità ?
  • Template Strings
  • Parametri di default e argomenti di una funzione
  • Destructuring: Come destrutturare array e oggetti
  • Object literal: Scorciatoie per lavorare con gli oggetti
  • For...of loop
  • Operatore "Spread ... "
  • Rest parameters e passaggio di un numero indefinito di argomenti a funzioni
  • Map e Filter
  • Arrow Function - le Funzioni freccia
  • SFIDA: Trasformare un funzione in una Arrow Function
  • Quiz
  • Funzioni Freccia: Parentesi e Parametri
  • this e arrow functions
  • Combinare parametri di default e destructuring array
  • Combinare parametri di default e destructuring objects
  • SFIDA: Default e destructuring
  • Classi
  • Le classi sono funzioni
  • Sottoclassi: le keywords extends e super
  • Classi e sottoclassi: da Codice ES6 a ES5. Analisi delle differenze
  • Moduli ES6
  • Cosa abbiamo imparato in questa sezione ?
Creazione di Interfacce utente con React Puro e JSX
  • Cosa vedremo in questa sezione ?
  • Cos'è la composizione ?
  • Preparazione dell'applicazione MyPlaces
  • Rimuovere i files di default creati da create-react-app
  • Cosa succede dopo "npm start" ? Come viene avviata l'applicazione ?
  • Creare Elementi React utilizzando React puro
  • React Developers Tools
  • Le proprietà di un elemento React: class o className ?
  • Elementi annidati
  • JSX
  • JSX restituisce un solo elemento root
  • React.Component
  • Class Component e Composizione
  • Component Props
  • Refactor: organizzare i files dell'applicazione
  • Approccio Dichiarativo vs Approccio Imperativo
  • Unidirectional Data Flow - Flusso dei dati unidirezionale
  • Quiz
  • Cosa abbiamo imparato in questa sezione ?
Il Backend dell'applicazione
  • Scaricare, Installare e avviare il server di backend
SFIDA: Applicazione MyPlaces
  • Presentazione SFIDA1: MyPlaces - Component, Props, JSX, ..
  • Risorse SFIDA 1
  • SOLUZIONE: Componente MyPlacesList e passaggio array dei posti preferiti
  • SOLUZIONE: MyPlacesList
Lo Stile di un'applicazione React
  • Definire uno stile per il componente attraverso className
  • Avatar e altre opzione per modificare lo stile dell'applicazione
  • class e className
  • Aggiungere un button per ricevere input dall'interfaccia
  • Framework UI: Materialize CSS e Material UI
  • Webpack e CSS
  • Progettare l'Header utilizzando Materialize CSS
  • SFIDA - Creare il componente Footer e usare Materialize CSS
Gestione degli Stati
  • Stateless Functional Components
  • Lo stato di un componente
  • Aggiornare lo stato di un componente
  • Quiz
Creare User Interface per React con Material UI - Applicazione: Gym Workout
  • Frameworks per User Interface Material: React Materialize, Material UI, MUI Css
  • Creare una nuova applicazione e installare Material UI
  • Definire l'architettura delle cartelle dell'applicazione
  • Implementare l'Header dell'applicazione con Material UI
  • Il Footer: Tab Material UI e metodo onChange
  • Grid Layout e componenti Paper
  • Popolare Tab dinamicamente da un data store
  • Il metodo Reduce
  • Gestire il click su un item della Tab e creare una struttura dati per le Card
  • Riempire la card di sinistra con i dati: List e Typography
  • Lists: Presentare gli esercizi di ogni gruppo attraverso una List
  • Tabs, Typography e Gestione dello stato tra componenti diversi
  • Modificare lo stato di un componente da un altro componente
  • Gestione Click su Item e State