La tua Web App in 4 mosse con React.js

ReactJs App
20 e 21 LUGLIO 2017 | DALLE 9.00 alle 17.30

La modularità dell'ecosistema React è estremamente potente per la costruzione di applicazioni moderne.

L’obiettivo dell'evento è l'apprendimento degli argomenti trattati nel programma e la realizzazione di un'applicazione completa dal design all’implementazione.

 

Programma

Giorno 1

  •  Panoramica nuove funzionalità JavaScript ES6
  •  Fondamenti sullo sviluppo di componenti in React:
      - Definizione di componente
      - Rendering
      - Popolamento tramite properties
      - Validazione delle properties
      - Composizione di componenti
      - Comunicazione tra componenti
    _____
    COFFEE BREAK

      - JSX
      - Componenti contenitori vs componenti presentazionali
      - Gestione dello state
      - Metodi del lifecycle
      - Esempi pratici
      - Devtools
    _____
    PAUSA PRANZO
     
  • Gestione dello store con Redux:
      - Introduzione al framework
      - Principi
      - Cambi di stato tramite azioni
      - Funzioni Pure
    _____
    COFFEE BREAK

      - Funzioni Reducer
      - Metodi dello store: getState(), dispach(), subscribe()
      - Integrazione con React
      - Esempi pratici

 

Giorno 2

  • Creazione passo dopo passo di un'app completa in React / Redux:
      - Configurazione dell'ambiente di sviluppo
      - Raccolta dei requisiti e design dell'applicazione
    _____
    COFFEE BREAK

      - Sviluppo di un layer di API in Node.js per reperire e memorizzare i dati dell'app
    _____
    PAUSA PRANZO

      - Sviluppo dei componenti necessari
    _____
    COFFEE BREAK

      - Integrazione di uno store Redux

 

Tecnologie

  • React.js

Scritto in JavaScript e realizzato dai team di sviluppo Facebook e Instagram, React viene usato nel web per per creare applicazioni veloci con interfacce utente interattive e facili da manutenere.

Esso permette la manipolazione virtuale del DOM fornendo la possibilità di renderizzarlo non solo nel browser, ma anche su server o desktop.

  • Redux.js

È un framework JavaScript per la gestione degli stati di un'applicazione che permette di memorizzare e comunicare dati all'interno di un'applicazione (lato client), astraendo il processo di manipolazione degli stessi.

Con Redux è possibile scrivere applicazioni che si comportano in modo coerente se eseguite in ambienti diversi (client, server e native) e facili da testare.

  • JSX

È una sintassi XML / HTML utilizzata da React in modo che il testo XML / HTML possa coesistere con il codice JavaScript / React. Tale sintassi è destinata ad essere utilizzata dai transpiler (es. Babel) per trasformare il markup JSX (trovato nei file JavaScript) in oggetti JavaScript standard.

A differenza del passato, invece di scrivere JavaScript in HTML, JSX ci permette di inserire HTML in JavaScript!

  • Node.js

Node.js è un framework che consente di scrivere applicazione server-side in JavaScript. Costruito sul motore JavaScript V8, esso è in grado di ricevere e rispondere a richieste HTTP. Node.js usa un modello I/O non bloccante e ad eventi, che lo rendono un framework leggero ed efficiente.

Inoltre l'ecosistema dei pacchetti di Node.js, NPM, è il più grande ecosistema di librerie open source al mondo!

 

Come utilizzeremo le tecnologie durante l'evento

Con React.js costruiremo la logica e i componenti necessari per la nostra applicazione, utilizzando JSX per scrivere in maniera più semplice le singole viste.
Grazie allo sviluppo di un server in Node.js, creremo un livello di API per la nostra applicazione.
Infine integreremo Redux.js per avere uno store di dati centralizzato e gestire in maniera consistente lo stato della nostra App.

 

Di cosa hai bisogno?

  • Fondamenti di programmazione JavaScript
  • Conoscenza base di sviluppo web su architetture MVC / MVVM

...e il tuo laptop!

 

Dove?

Le giornate di workshop si svolgeranno a Milano, presso gli uffici ibuildings c/o Regus in via Santa Maria Valle 3.
 

Quando?

Giovedì 20 e Venerdì 21 Luglio - dalle 9 alle 17.30*

*Accredito dalle 9 alle 9.30