React Mastering Components

Home/Corsi/React/React Mastering Components
React Mastering Components 2017-08-18T02:25:27+00:00

MASTERING REACT COMPONENTS

Una giornata dedicata alla creazione di componenti riutilizzabili, componibili e testabili in React e ES2015

0
ore di teoria
0
ore di pratica
  • Durata: 1 giornata (8 ore)

  • Tipologia: Corso Intensivo

  • Versione React: 15.5 / 16

  • Obiettivo: Apprendere pattern, best practices e metodologie per la creazione di componenti React riutilizzabili, documentati e testabili

  • Requisiti: familiarità con l’utilizzo di React. Conoscere gli argomenti affrontati durante il corso React Core Concepts

IL CORSO

Il corso prevede la creazione di componenti React riutilizzabili, documentati e testabili.
È suddiviso essenzialmente in tre fasi:

1 SVILUPPO COMPONENTI
Tecniche, best practices e metodologie per la creazione di componenti React riutilizzabili, componibili e testabili

2 DOCUMENTAZIONE
Generare la documentazione dei componenti e creare un code playground in cui provare differenti scenari e casi d’uso

3 INTEGRAZIONE TEST
Creazione e integrazione test utilizzando Jest e Enzyme

UI-KIT

L’ecosistema React è ricco di UI-KIT e librerie di componenti “ready-to-use”.

Tuttavia, utilizzare questi strumenti in produzione è sempre un azzardo: non sono aggiornati con frequenza, i bug non vengono chiusi in tempi ragionevoli, dipendono da altre librerie, aumentando notevolmente le dimensioni del bundle generato o, semplicemente, non soddisfano pienamente le esigenze del progetto.

VANTAGGI

I vantaggi nel delegare parte delle funzionalità dell’applicazione ad una libreria di componenti riutilizzabili, ad ogni modo, sono molteplici:

  • codebase snella: parte delle funzionalità del progetto sono gestite dal kit
  • UI consistente in tutte le view dell’applicazione
  • produttività: riutilizzo dei componenti in altri team e progetti
  • testabile: semplifica il debug e l’integrazione di unit test

Durante il corso si acquisiranno le nozioni fondamentali per creare, gestire, documentare e testare il proprio set di componenti all’interno di progetti React.

IL PROGRAMMA

1 SVILUPPO COMPONENTI

Il corso prevede la creazione dei seguenti componenti:

  • Componenti di layout: griglie responsive, panels, cards, collapsable panels, …
  • Navigators: Buttons, TabBar, …
  • Finestre Modali con template personalizzabili
  • Gestione typography 
  • Integrazione 3rd party API: Google Map e HighCharts

Durante lo sviluppo dei componenti:

  • vengono applicati design pattern come l’Higher Order Component, per aggiungere funzionalità a componenti preesistenti
  • viene sfruttato il lifecycle dei componenti per l’ottimizzazione delle performance generali dell’applicazione
  • si analizzano diverse tecniche per la gestione di componenti nidificati
  • si applica un flusso 1-way nella comunicazione tra componenti
  • si creano componenti utilizzabili in un qualunque progetto con architettura Flux, Mobx/MST, Redux.
  • si utilizzano le React Top-Level API per creare componenti a runtime

Clicca sull’immagine per ingrandire

2 DOCUMENTAZIONE, PLAYGROUND e PREVIEW

  • Approfondimento su PropTypes validation
  • Documentare correttamente i componenti
  • ESLint: validare il codice dal punto di vista stilistico
  • Generazione documentazione (vedi immagini seguenti)
  • Creazione Live Code Playground (vedi immagini seguenti)

CODE PLAYGROUND con LIVE PREVIEW:

3 INTEGRAZIONE TEST

  • Integrazione unit test con Jest (by Facebook)
    • expect  e  snapshots
    • Async operations
    • Mock and Event simulation
    • Utilizzare le Spie con Sinon
  • Enzyme: utility per testare componenti React
    • Full e Shallow renderer
    • DOM selectors
    • Testare componenti e differenti casi ‘uso
    • Component Lifecycle

INFORMAZIONI SUL CORSO

LEARN

Durante la giornata le sessioni di teoria saranno supportate costantemente da slide, contenenti approfondimenti, snippet e diversi casi d’uso illustrati passo-passo dal docente.

LIVE CODE

Il docente applicherà buona parte degli argomenti precedentemente trattati, scrivendo codice LIVE, con numerosi esempi pratici e coinvolgendo attivamente i partecipanti.

HANDS-ON

Nel pomeriggio gli studenti metteranno in pratica le nozioni acquisite durante la giornata realizzando diversi esercizi con il costante supporto del docente.

UN PERCORSO COMPLETO

Questo modulo fa parte di un percorso didattico più ampio che si pone due obiettivi: il primo è quello di descrivere in modo approfondito tutte le funzionalità e la sintassi della libreria, il secondo, più importante, è quello di trasferire ai partecipanti metodologie, approcci e best practice consolidate affinché possano creare applicazioni modulari, scalabili, manutenibili e testabili.

Il percorso completo è composto da 3 giornate, suddiviso in 3 moduli da 8 ore:

FAQ

Devo portare il mio laptop? 2017-07-06T13:44:22+00:00

Ti consigliamo di portare il tuo laptop tramite il quale potrai consultare le slide e svolgere le esercitazioni qualora fossero previste dal corso.
Nel caso non avessi la possibilità di portarlo potrai comunque affiancare un altro partecipante.

Come posso contattare l’organizzatore? 2017-07-13T23:13:51+00:00

Per tariffe, informazioni sui prossimi corsi o qualunque altra domanda puoi scrivere all’organizzatore utilizzando l’indirizzo email presente nel footer

Devo installare qualche software sul mio laptop? 2017-09-12T21:45:29+00:00

Per svolgere le esercitazioni il tuo laptop dev’essere configurato per l’utilizzo di Git e dovresti installare una versione di Node superiore alla 6.9.

RECENSIONI

“N.D.”
– Da inserire

“N.D.”
– Da inserire

DOCENTE

Fabio Biondi
Fabio BiondiJS Developer and Trainer
I’m an active contributor in the italian front-end communities with 10+ years of experience in developing enterprise level applications and components.

Especially focused in front-end applications and all related aspects, both visuals and architecturals, I daily use cutting-edge libraries and frameworks offering training, development, code review and consulting on Angular, React and several other technologies.

I also collaborate with many training italian companies in order to organize events, training courses and campus.

  • Javascript, Angular, React, Redux, RxJS
  • D3.js, CreateJS, GSAP TweenMax, Firebase

Facebook community admin on:

PRECEDENTE
Core Concepts

PROSSIMO CORSO
React & Redux

PROSSIMI EVENTI?

Consulta la mia pagina Facebook

SEGUIMI

Vuoi organizzare questo corso

PRESSO LA TUA SEDE?

CONTATTAMI