React Core Concepts

Home/Corsi/React/React Core Concepts
React Core Concepts 2019-07-28T04:20:30+00:00

Questa sezione è obsoleta.

Visita il nuovo sito con i programmi aggiornati:

formazione.fabiobiondi.io

REACT CORE CONCEPTS

Un corso di formazione sulle funzionalità principali della libreria React, pattern, best practices e sulle interessanti novità introdotte da Javascript ES6

0
ore di teoria e live coding
  • Tipologia:
    Corso Intensivo
    (teoria e live coding)

  • Versione React: 16.8.x

  • Durata:

    • Min 2 giornate (16 ore)
    • Max 3 giornate (24 ore)
  • Obiettivo: durante questo corso saranno analizzate la maggior parte delle funzionalità offerte dalla libreria React per la creazione di Single Page Applications
  • Requisiti: familiarità con almeno un linguaggio di programmazione. È preferibile aver già utilizzato in precedenza HTML, CSS e Javascript.E

IL PROGRAMMA

GIORNATE 1 e 2

JAVASCRIPT ES2015 (aka ES6)

  • Javascript ES2015
  • Compiler, Transpiler e tool: Babel, Typescript e Webpack
  • var vs let vs const: function scope vs block scope
  • Template Literals
  • Arrow syntax
  • Destructuring
  • Object.assign() e Object concise syntax
  • Rest e Spread operator
  • Immutabilità
  • Array methods: find, map, filter, …
  • ES6 modules
  • Promises
  • Classi e ereditarietà in ES6

Form, Refs ed eventi

  • Form in React
  • Controlled vs Uncontrolled Forms
  • Gestire campi di input: text, select, checkbox
  • Valori di default
  • Validazioni e regular expression
  • Gestione eventi mouse e interazione utente

Styling

  • Inline styling
  • classi CSS dinamiche
  • CSS Modules
  • Animazioni con CSS transitions

List

  • Creare liste dinamiche di elementi
  • Utilizzo del metodo .map()
  • Template condizionali

Comunicazione con il server

  • Utilizzo servizi RESTful
  • Comunicazione con Axios
  • Promises e utilizzo di “fetch”
  • async await

React Components

  • Approccio Component-Based
  • Functional & stateless components
  • Class and Stateful Components
  • La funzione ‘render’
  • Component constructor
  • Gestire i valori di defaults delle proprietà
  • PropTypes validation
  • Componenti compositi & nested
  • JSX e template condizionali
  • Passaggio proprietà in input
  • Comunicazione tra componenti
  • Comunicazione con il server

Stateful components

  • States
  • Differenze tra componenti stateful e stateless
  • Container vs Presentational components
  • 1-way data flow
  • Gestire lo stato di default
  • Creare progetti e componenti ready for “Redux”

Component Lifecycle

  • Tutte le fasi del ciclo di vita del componente
  • componentDidMount, componentDidUpdate, componentWillUnmount …
  • Ottimizzazione performance
    • shouldComponentUpdate
    • React PureComponents e immutable state
  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate
  • getDerivedStateFromError
  • Esempi e casi d’uso

React Router

  • Integrazione React Router DOM
  • Sviluppo applicazioni multi-view
  • Creazione menu di navigazione
  • Passaggio parametri
  • Gestione Nested routes

GIORNATA 3

React 16.6 updates

  • lazy: route & component lazy loading
  • Suspence
  • New Context API (da React 16.3 a React 16.6+)
  • CreateRef (16.3)

React Hooks (React 16.8.x)

  • useState
  • useEffect
  • custom hooks

Pattern & Best Practices

  • Higher Order Components
  • Introduzione al pattern “render props”
  • Errour Boundaries
  • React Profiler
  • Best practices in React
  • Organizzazione progetti

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 4 giornate, suddiviso in 3 moduli:

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:

PROSSIMO CORSO
Mastering Components

PROSSIMI EVENTI?

Consulta la mia pagina Facebook

SEGUIMI

Vuoi organizzare questo corso

PRESSO LA TUA SEDE?

CONTATTAMI