Impara dai migliori esperti in modo rapido ed efficace. 

349 4400619

Sviluppo componenti in React, WebPack e ES2015

React ​è una libreria sviluppata da Facebook per lo sviluppo di interfacce utente in HTML5 e Javascript. L'enorme successo che sta ottenendo è dovuto alla facilità d'uso e di apprendimento di questa libreria. Inoltre, le performance dovute all'utilizzo di un Virtual DOM, algoritmo di ottimizzazione del rendering, e un ecosistema ricco e molto solido sono senz'altro altri fattori rilevanti. Durante il corso sarà inoltre utilizzato javascript in versione ES2015 (ES6), compilato tramite Babel utilizzando WebPack per la gestione dei moduli.

Durante questo corso saranno analizzate la maggior parte delle funzionalità offerte dalla libreria React, dalle basi alla realizzazione di componenti riutilizzabili, integrando inoltre diverse librerie esterne, tra le quali jQueryUI, TweenMax, GoogleMap e tecnologie come HTML canvas. 

Sarà inoltre utilizzato il framework MaterializeCSS per l’integrazione di concetti di material design all’interno di ogni esempio. 

Al termine della giornata il partecipante sarà in grado di creare componenti in React utilizzando la versione ES2015 di javascript, di utilizzare WebPack per sviluppare delle semplici single page applications e avrà le basi per poter proseguire in modo autonomo la fase di apprendimento.

Informazioni Pratiche

Dove

Luiss Enlabs - Stazione Termini
Via Giovanni Giolitti 34

Quando

26 febbraio. Iscrizioni aperte fino al 19 febbraio.

Prezzo

120€ a partecipante
(iva esclusa).

Docenti

Fabio Biondi

Fabio Biondi è un istruttore certificato Adobe con più di 10 anni di esperienza nello sviluppo di componenti, infografiche ed interfacce interattive in ambito  web, mobile, LFD e totem.
Attualmente si occupa inoltre di consulenza e training su AngularJS, React, CreateJS, D3.js, Cordova e real time web applications.
Organizza eventi formativi online e in tutta Italia
.

Programma

Panoramica
● Utilizzare Webpack in progetti React
● Hello world in React e ES2015 (aka ES6)
● Integrazione material design con MaterializeCSS
React
● Creare componenti React in ES2015
● React props
● Trasferire proprietà e children ai componenti
● Render function
● Costruttore
● Gestire i defaults
● PropTypes validation
● Gestione CSS e LESS con WebPack
● Inline styling​, classi CSS dinamiche e skinning componenti React
● DOM e template condizionali
● Ciclo di vita di componenti React.
States
● Creare componenti statefull e stateless
● Gestire lo stato di default di un componente
● Template dinamici legati allo stato del componente
● Trasferire proprietà ai componenti con lo spread operator
● Introduzione alle arrow functions ES6
List
● Creare liste dinamiche di elementi
● Utilizzo del metodo .map()
Form, Refs ed eventi
● Form in React
● Gestire campi di input, Select e controlli del form
● Valori di default e utilizzo dello state
● Validazioni
● Utilizzo di references (refs​)
● Gestione eventi mouse e interazione utente
Sviluppo componenti
● Creazione componenti riusabili
● Comunicazione tra componenti
Integrazione Google Map
● Integrazione Google Map API per lo sviluppo di un componente “Map”
● Creazione di un componente StreetView utilizzando le Google Street View Image API
Creazione Chart in HTML5 Canvas e CreateJS
● Integrazione con HTML5 Canvas​ tramite l’utilizzo della libreria CreateJS​ per lo sviluppo di chart personalizzati.
TweenMax e animazioni in javascript
● Gestire animazioni e creare componenti interattivi con GSAP e Tweenmax.
jQuery e Jquery UI
● Integrazione con i plugin di jQueryUI​: resizable and draggable

Materiale hardware e software 

L’utilizzo del notebook durante la giornata è facoltativo. Di seguito si elenca il software necessario per la fruizione degli esempi svolti durante il corso:
● Editor per il codice: ad esempio SublimeText 3 / Atom / VIM
● NodeJS (https://nodejs.org) e npm (https://www.npmjs.com)
● Git (https://git­scm.com/book/en/v2/Getting­Started­Installing­Git)

Prerequisiti

Il partecipante dovrà possedere una certa familiarità con l’uso di HTML, CSS e Javascript.

Durata:

8 ore, dalle 9 alle 18 con un'ora di pausa pranzo.

E se vuoi approfondire la tua conoscenza di AngularJS, clicca qui:
https://goo.gl/WlCGJB

Puoi partecipare a entrambi i Bootcamp ad un prezzo davvero eccezionale!