training-header-react

Sviluppo componenti
in React, ES2015 e Webpack

LIVELLO:

PRINCIPIANTE

DURATA:

8 ore

PREREQUISITI:

Il partecipante deve possedere una discreta conoscenza di HTML, CSS e Javascript.

OVERVIEW:

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.

OBIETTIVI FORMATIVI:

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 HighChart, GSAP TweenMax, GoogleMap e tecnologie come HTML5 canvas.
Sarà inoltre utilizzato il framework MaterializeCSS per l’integrazione di concetti di material design all’interno di ogni esempio.

CONOSCENZE IN USCITA:

Al termine della giornata il partecipante avrà acquisito le nozioni fondamentali per creare componenti React, integrare librerie esterne e sviluppare la user interface di web applications in React.

MATERIALE DIDATTICO:

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

IL PROGRAMMA:

React e ES2015

  • Babel e ES2015: arrow functions, destructuring, template strings,…
  • Hello world in React
  • Functional stateless component
  • Struttura componenti React
  • Virtual DOM, reconciliation e render function
  • Utilizzo delle props
  • Costruttore
  • Gestire i valori di defaults
  • PropTypes validation
  • Inline styling, classi CSS dinamiche e skinning componenti React
  • Gestione CSS e LESS con WebPack
  • DOM e template condizionali

States

  • Creare componenti stateful e stateless
  • Gestire lo stato di default di un componente
  • Template dinamici legati allo stato del componente
  • Differenze tra props e state

Form, Refs ed Mouse events

  • Form in React
  • Gestire campi di input, Select e controlli del form
  • Validazioni
  • Utilizzo delle references (refs) e di react-dom
  • Gestione eventi Mouse e interazione utente

Advanced concepts

  • Creare liste dinamiche di elementi
  • Nested components
  • Comunicazione tra componenti
  • Conditional templates
  • Utilizzo di createElement

Component lifecycle

  • Le fasi del ciclo di vita del componente
  • utilizzo di componentWillReceiveProps and shouldComponentUpdate
  • tip&tricks, ottimizzazioni e performance

Integrazione librerie e 3rd party API
Creazione di componenti React utilizzando le seguenti librerie Javascript:

  • classnames
  • jQueryUI
  • HighCharts
  • Google Map API
  • GSAP Tweenmax
  • CreateJS and HTML5 Canvas
  • Axios e REST API

Componenti riusabili e creazione di uno UI Toolkit
Creazione di un set di componenti* riutilizzabili che sarà “sfruttato” successivamente all’interno di una semplice web application realizzata in React, ES2015 e WebPack:

  • Accordion
  • TabBar
  • Grid
  • Carousel
  • Chart
  • GoogleMap
  • List
  • Button
  • e molti altri

I componenti utilizzano MaterializeCSS ma i concetti possono essere estesi a qualunque framework CSS o nel caso i cui si preferisca utilizzare CSS custom.

Configurazione e installazione tools

  • Utilizzare Webpack in progetti React
  • Configurazione Webpack e utilizzo di hot-reload
  • Utilizzo dei loader in Webpack
  • Build e distribution
  • Integrazione material design con il framework MaterializeCSS

REQUISITI PER PARTECIPARE AL CORSO

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)

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

React, Javascript (ES2015), WebPack, NodeJS, npm, git, MaterializeCSS, HTML5 Canvas/CreateJS, GSAP TweenMax, HighChart, jQueryUI, Google Map, Axios,