OBIETTIVI
Durante questo corso saranno analizzate la maggior parte delle funzionalità offerte dalla libreria React per la creazione di Single Page Applications
PREREQUISITI: familiarità con almeno un linguaggio di programmazione. È preferibile aver già utilizzato in precedenza HTML, CSS e Javascript.
PROGRAMMA DEL CORSO
JAVASCRIPT ES2015 (aka ES6)
– Javascript ES2015
– Compiler, Transpiler e tool: Babel, Typescript e Webpack
– var vs let vs const: function scope vs block scope
– Template Literals
– Arrow syntax
– Destructuring
– Object.assign() e Object concise syntax
– Rest e Spread operator
– Immutabilità
– Array methods: find, map, filter, …
– ES6 modules
– Promises
– Classi e ereditarietà in ES6
Form, Refs ed eventi
-Form in React
– Controlled vs Uncontrolled Forms
– Gestire campi di input: text, select, checkbox
– Valori di default
– Validazioni e regular expression
– Gestione eventi mouse e interazione utente
Styling
– Inline styling
– classi CSS dinamiche
– CSS Modules
– Animazioni con CSS transitions
List
– Creare liste dinamiche di elementi
– Utilizzo del metodo. map()
– Template condizionali
Comunicazione con il server
– Utilizzo servizi RESTful
– Comunicazione con Axios
– Promises e utilizzo di “fetch”
– async await
React Components
– Approccio Component-Based
– Functional & stateless components
– Class and Stateful Components
– La funzione ‘render’
– Component constructor
– Gestire i valori di defaults delle proprietà
– PropTypes validation
– Componenti compositi & nested
– JSX e template condizionali
– Passaggio proprietà in input
– Comunicazione tra componenti
– Comunicazione con il server
Stateful components
– States
– Differenze tra componenti stateful e stateless
Container vs Presentational components
– 1-way data flow
– Gestire lo stato di default
– Creare progetti e componenti ready for “Redux”
Component Lifecycle
– Tutte le fasi del ciclo di vita del componente
– componentDidMount, componentDidUpdate, componentWillUnmount …
– Ottimizzazione performance
– shouldComponentUpdate
– React PureComponents e immutable state
– getDerivedStateFromProps
– getSnapshotBeforeUpdate
– getDerivedStateFromError
– Esempi e casi d’uso
React Router
– Integrazione React Router DOM
– Sviluppo applicazioni multi-view
– Creazione menu di navigazione
– Passaggio parametri
– Gestione Nested routes