React e Redux: Sviluppa applicazioni da zero

Contenido del curso
Descrizione del corso
Come seguire e codice sorgente del corso
Cos'è React ?
Quale linguaggio per sviluppare applicazioni React ?
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 ?
Cosa vedremo in questa sezione ?
Babel e ES6
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 ?
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 ?
Scaricare, Installare e avviare il server di backend
Presentazione SFIDA1: MyPlaces - Component, Props, JSX, ..
Risorse SFIDA 1
SOLUZIONE: Componente MyPlacesList e passaggio array dei posti preferiti
SOLUZIONE: MyPlacesList
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
Stateless Functional Components
Lo stato di un componente
Aggiornare lo stato di un componente
Quiz
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
Controlled Components
Integrare Material UI nell'applicazione MyPlaces
SFIDA - Creare Header e Footer con Material UI
Search Form Material UI
SFIDA: Correggi gli errori
SFIDA : Correggi Errori - SOLUZIONE
Input dall'utente: Search Form e Controlled Components
Controlled Component: Ricapitolazione