React (by Facebook): sviluppare componenti in React, ES2015 e Webpack

Corso su React (by Facebook)

Partecipa all'evento

React (by Facebook): sviluppare componenti in React, ES2015 e Webpack – Con Fabio Biondi

LIVELLO: PRINCIPIANTE / INTERMEDIO

PREREQUESITI
Il partecipante dovrà possedere una certà familiarità con l’uso di HTML e Javascript (variabili, manipolazione array e oggetti, cicli).

DURATA
8 ore ( 7 ore corso + 1 Q&A )

OVERVIEW
React è una libreria sviluppata da Facebook per lo sviluppo di interfacce grafiche in HTML5 e Javascript. L’enorme successo che sta ottenendo questa libreria è principalmente dovuto alle sue performance, raggiungibili grazie all’utilizzo del Virtual DOM, un algoritmo che ottimizza il rendering di pagine HTML interattive.

OBIETTIVI FORMATIVI
Durante questo corso saranno analizzate la maggior parte delle funzionalità offerte dalla libreria Facebook React, dalle basi alla realizzazione di componenti riusabili, integrando diverse librerie esterne, tra le quali jQueryUI, TweenMax, GoogleMap API, ThreeJS e CreateJS, e tecnologie come HTML5 Canvas e WebGL. Sarà inoltre utilizzato il framework React Bootstrap analizzando diversi componenti (tooltip, popover, modali, tab­bars e molto altro) e realizzeremo delle semplici applicazioni allo scopo di apprendere le tecniche principali di comunicazione tra componenti. Al termine della giornata il partecipante sarà quindi in grado di realizzare delle semplici single page applications in React e JSX e avrà le basi fondamentali per poter proseguire in modo autonomo l’apprendimento.

MATERIALE DIDATTICO
Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

IL PROGRAMMA
React

  • React e la sintassi JSX
  • JSX esterni
  • JSX, ES6 e Harmony Syntax
  • Compilare React da riga da comando

React Fundamentals

  1. Creare componenti React
  2. Passare proprietà ai componenti con props
  3. introduzione al lifecycle dei componenti React : componentDidMount,render e forceUpdate()
  4. Gestire gli statee creare componenti stateful
  5. Inline styling, classi CSS dinamiche e skinning componenti React
  6. Gestire i campi di input, gli eventi del mouse e generare DOM dinamico
  7. form dinamici e validazioni
  8. utilizzare le references (refs)
  9. Trasferire proprietà ai componenti utilizzando props el’operatore es6 spread
  10. gestire liste complesse con il metodo map e creazione template dinamici
  11. Analisi del ciclo di vita completo di componenti React.
  12. Funzionalità riusabili con React Mixins
  13. propTypes Validation
  14. Comunicazione tra componenti

Componenti riusabili e 3rd party integration

  • Creazione di un componente Google Map: location, marker, drag’n’drop e gestione eventi
  • Creazione di un componente Street View per visualizzare immagini da una qualunque location e con comandi personalizzati per rotazione (heading) e pitch
  • Sviluppo di un viewer GoogleMap / Street View allo scopo di padroneggiare la comunicazione tra componenti e comprendere il life cycle di componenti React.

Integrazione con altre tecnologie web

  • Integrazione con HTML5 Canvastramite l’utilizzo della libreria CreateJSper lo sviluppo di componenti chart data­driven riutilizzabili.
  • Integrazione WebGL / ThreeJS all’interno di componenti React e creazione di un viewer 3D per il caricamento di differenti modelli 3D animati in formato collada.
  • Integrazione con i plugin di jQueryUI: resizable and draggable
  • Gestire animazioni e creare componenti interattivi con GSAP e Tweenmax.

React Bootstrap

Utilizzare diversi componenti fondamentali di Bootstrap per creare velocemente applicazioni prototipi e applicazioni interattive, tra i quali:

  • Dynamic Responsive Grids
  • Pannelli e Accordion
  • Popover
  • Tooltip
  • Finestre Modali
  • TabBar
  • Carousel

Il corso verrà realizzato solamente al raggiungimento di almeno 6 partecipanti. Eventuali biglietti acquistati saranno rimborsati nel caso in cui il corso venisse annullato.

Loading...
Chiudi

Rimani aggiornato su tutti gli eventi e le iniziative di Talent Garden
Tieniti aggiornato su cosa accade nel mondo di Talent Garden: eventi, incontri, persone e notizie dal mondo digitale ogni mese!

Chiudi

Rimani aggiornato su tutti gli eventi e le iniative di Talent Garden
Tieniti aggiornato su cosa accade nel mondo di Talent Garden: eventi, incontri, persone e notizie dal mondo digitale ogni mese!