Istituto Tecnico Tecnologico “B. Pascal”

React for Dummies

Repository del corso: GitHub

Appuntamenti

Totale: 10 ore, divise in 5 lezioni

Martedì Venerdì
04/03 07/03
11/03 ;(
18/03 21/03
25/03 -

Tutte le lezioni si svolgono dalle 14:30 alle 16:30 in L1.

Programma

(verrà introdotto nelle slide successive)

Consultabile nel README.md della repository di riferimento.

Breve sarmone: uso di AI

ChatGPT (o simili) sanno risolvere molto bene i nostri problemi.

  • sanno centrare un div
  • sono capaci di usare la fetch API per richieste semplici
  • sanno strutturare abbastanza bene una UI a componenti

❌ NON RAGIONEVOLE

Utilizzare ChatGPT (o simili). Troppo di aiuto.

✅ RAGIONEVOLE

(e di ulteriore aiuto)

Utilizzare strumenti che ti guidano nella risoluzione di un problema.

Suggerimento

cs50.ai

  • sviluppato dall’Università di Harvard, messo a disposizione gratuitamente;
  • ChatGPT, ma con limitazioni utili all’apprendimento;
  • try to speak in english!

Richiede login con GitHub

Puntata #0

Fondamenti del Web

Linguaggi fondamentali: HTML, CSS e JavaScript

HyperText Markup Language

  • Linguaggio di markup (come Latex, Markdown, XML…)
  • Definisce la struttura e il contenuto di una pagina.

Non è un linguaggio di programmazione!

alt text

HyperText Markup Language

  • Una pagina si compone di un insieme di tag;
    • ogni tag è composto da una coppia di elementi, uno di apertura e uno di chiusura
    • per ogni tag possono essere specificati alcuni attributi
      • coppia nome="valore" che specifica alcune proprietà dell’elemento

HyperText Markup Language

<!DOCTYPE html> <!-- Dichiaro il tipo di documento -->

<html>
    <!-- Parte di metadati della pagina -->
    <head>
        <title>Il mio bellissimo sito</title>
    </head>

    <!-- Contenuto della pagina -->
    <body>
        <p>Lorem Ipsum Ipse Dixit</p>
        <a href="www.google.com">Mi sento fortunato</a>
    </body>
</html>

Document Object Model

Rappresentazione ad albero del contenuto di una pagina HTML

alt text

HTML: Semantica dei tag

alt text

HTML: Tag di Sectioning

alt text

HTML

Alcuni tag fondamentali:

  • <img src="link-to-img" alt="">
    • src: percorso dell’immagine (salvata nel filesystem o sul web)
    • alt: testo alternativo (mostrato quando l’immagine non viene caricata correttamente)

HTML

Alcuni tag fondamentali:

  • <a href="www.google.com" target="_blank">Clicca qui</a>
    • href: URL del tag.
    • target: specifica dove deve essere aperto quel link — _blank indica “in una nuova tab”.

HTML

Attributi

  • Ce ne sono tanti, alcuni visti poco fa (href, target, src, alt…)
  • Alcuni sono universali — comuni a tutti i tag esistenti:
    • class
    • id
    • style
    • data-
    • …

HTML

Attributi

class vs id

  • class: identifica un gruppo di elementi a cui voglio attribuire caratteristiche comuni.
  • id: identifica un singolo elemento della mia pagina.

Entrambi permettono di interagire con il documento HTML tramite fogli di stile o script esterni.

Cascading Style Sheet

  • Tecnologia particolarmente odiata, ma comunque fondamentale — è ovunque;
  • Ha l’importante compito di separare il contenuto dalla sua presentazione
    • definisce infatti come un contenuto HTML deve essere presentato

Non è un linguaggio di programmazione!

alt text

CSS

Importare un foglio di stile

  1. foglio di stile inline
    • attributo style del tag che voglio stilare
  2. foglio di stile interno
    • importato in <head> dal tag <style>
  3. foglio di stile esterno
    1. importato in <head> dal tag <style>
    2. importato in <head> dal tag <link>

1. CSS inline

...
    <header style="color:blue;">
        <h1>Monsters and Co.</h1>
    </header>
...

2. CSS in <head>

...
    <head>
        <style type="text/css">
            header {
                color: blue;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>Monsters and Co.</h1>
        </header>
    </body>
...

3.1 foglio esterno

index.html
 
styles.css

3.2 foglio esterno

index.html
 
styles.css

CSS

Funzionamento

  • Un foglio di stile si compone di una serie di regole, scritte una dopo l’altra;
    • queste vengono applicate a cascata (non a caso il linguaggio si chiama Cascade Style Sheet),
      • partendo dall’alto e scendendo in maniera lineare fino alla fine del foglio;
    • logica da tenere a mente per evitare eventuali conflitti tra diverse regole applicate ad uno stesso elemento;

Sintassi

selettore {
  proprietà: valore;
}
# specifica esempio
selettore a chi applicare le regole di stile div, .nav-link...
proprietà caratteristica di stile assegnabile ad un elemento margin, padding...

Selettori

Più utilizzati

Tipologia Selettore
universale *
di tipo E
di prossimità E{ ,>,+,~}F
di classe E{.,#}main-title

Selettori

Un pelo meno utilizzati

Tipologia Selettore
di pseudo-classi E:link, E:hover
di pseudo-classi strutturali E:first-child, E:nth-child(n)
di pseudo-elementi E:before, E:after
di attributi E[attr]

Selettori

<div id="provaID"></div>

div#provaID{ background-color: red; }
div.provaClasse{ background-color: blue; }
div{ background-color: green; }

Di quale colore sarà lo sfondo del div?

Priorità delle regole

In ordine decrescente di importanza

  1. Media
  2. Importanza di una dichiarazione
  3. Origine della dichiarazione
  4. Specificità del selettore
  5. Ordine delle dichiarazioni

!important fornisce max. priorità:

p { font-size: 3px !important }

Box Model

Ogni elemento è definito da una scatola (box) all’interno della quale si trova il contenuto. alt text

FlexBox

Sistema di suddivisione e distribuzione dello spazio che favorisce adattabilità alle dimensioni dello schermo, anche quando la dimensione degli elementi da disporre non è conosciuta a priori.

Utilizzata da Bootstrap!

Flexbox Interactive Guide

JavaScript

  • Unico linguaggio di programmazione tra i 3;
  • Non c’entra un c***o con Java;
    • si usano in contesti diversi!
  • Interagisce con il Document Object Model
    • aggiunge/rimuove/modifica nodi e elementi

alt text

JavaScript

  • Linguaggio interpretato, debolmente tipizzato, fortemente odiato e prototype-based;
    • non c’è il concetto di classe ma di prototipo
      • istanza primaria, astratta, sempre accessibile che può essere clonata e modificata in un qualunque momento — anche a run-time!

JavaScript

Creazione di oggetti

Classe Prototipo JSON Notation

JavaScript

Importare uno script

  1. Elemento <script> contenuto nella pagina HTML. 
    <script type="text/javascript">
 …codice JS
</script>
  2. Riferimento a script contenuti in file .js esterni. 
    <script src="script_esterno.js"> </script>
  3. Direttamente nel codice HTML in risposta ad eventi. 
    <input type="button" onclick="alert('Ciao!')"…/>
<a href="javascript:nome_funzione()"> Clicca qui!</a>

JavaScript

Cheatsheet — sintassi

Link al cheatsheet

JavaScript

Cosa interessa a noi: dichiarazione di una variabile

const vector = [] vector è costante
let vector = [] vector non è costante

Esiste anche var, ma è bandita da questo corso.

JavaScript

Array destructuring

JavaScript

alt text Dispense utili

Risorse utili

Puntata #1

Introduzione a React

Vantaggi di React, tecnologie adottate

Perché usare un framework?

  • sviluppo più strutturato e guidato
    • meno codice
    • riutilizzo del codice
  • gestione di progetti di dimensione scalabile

ReactJS

  • Sviluppato da Facebook nel 2013
  • Libreria di sviluppo per S.P.A.
    • Single Page Applications

alt text

ReactJS

Core features

  • Virtual DOM
  • Component-based
  • Dataflow monodirezionale

React non è un framework!

Docs: react.dev alt text

Framework

Struttura / insieme di regole a cui uno sviluppatore deve attenersi per costruire un’applicazione.

Libreria

Insieme di funzioni messe a disposizione dello sviluppatore per risolvere un problema.

NOI — React

  • Componenti
  • Hooks
    • useState(), useEffect(), useContext()
  • Routing
  • Data Fetching

NOI — React

  • Utilizziamo JavaScript come linguaggio per React (alternativa: TypeScript)
  • Utilizziamo Bootstrap come framework CSS;
  • Utilizziamo vite come build tool per costruire la nostra applicazione;

— Proposta traccia progetto —

Astazor

Timossi Casa d’aste

Progetto PCTO — 5F, A.S. 2022/23

proff. Tappi Francesco, Tonetti Tiberio

alt text

Versione riadattata al corso:

alt text

Puntata #2

Inizializzazione

vite, sguardo alla struttura di un progetto template

Prima di partire

  • Assicurati di avere Node.js; versioni 18+ o 20+

Controlla la versione installata con:

 node --version

oppure installane una da https://nodejs.org/en

1) Esegui

 npm create vite@latest

sul terminale e segui le istruzioni!

Puoi aggiungere

 <proj_name> -- --template react

per saltare i passaggi di setup.

2) Esegui

npm install

per installare tutte le dipendenze necessarie al progetto.

3) Esegui

npm run dev

per avviare il progetto!

Bootstrap

  • Framework CSS sviluppato da Twitter
  • Design responsive e mobile-first

Bootstrap

Installazione

All’interno della cartella del progetto appena creato, apri il terminale e digita

npm i bootstrap@5.3.3

Bootstrap

Installazione

[proj_name]/src/main.jsx

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min'
...
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
...

Puntata #3

Concetti base di React

JSX, props, Thinking in React

Web Development tradizionale

HTML JavaScript

Web Development w/React

Sidebar.jsx Form.jsx

Content WITHOUT React

Insieme di codici markup che possono essere ‘cosparsi di interattività’.

Content WITH React

Insieme di funzionalità che possono essere ‘cosparse di markup’.

JSX

“JavaScript XML”

JavaScript + HTML

Estensione di ogni file in cui si definisce un componente

Navbar.jsx, Footer.jsx…

Rules — [1] Naming Convention

Dichiarazione di componenti

PascalCase

altrimenti non funzionano!

Rules — [2] Single return element

Le funzioni che restituiscono del JSX devono restituire sempre e solo 1 elemento di root.

Tag HTML Frammenti

Rules – [3] Closing tags

Chiudi sempre qualsiasi tag HTML!

HTML-like React-like
<img> <img/>
<br> <br/>
<li> <li/>

Rules — [4] camelCase everywhere

Usa quasi sempre il camelCase nelle proprietà!

HTML-like React-like

Rules — [4] camelCase everywhere

Usa quasi sempre il camelCase nelle proprietà!

Perché?

JSX viene convertito in un oggetto JavaScript.

from to

Componenti

Core feature di React

Blocchi di UI indipendenti e riutilizzabili.

Componenti

Class Components Functional Components
Class Functional
Definiti in una classe che estende React.Component; devono definire la UI nel metodo render() Funzione JavaScript che restituisce del JSX
Componenti Stateful: logica + stato Componenti Stateless (Stateful con Hooks)
✅ gestione del ciclo di vita. ❌ gestione del ciclo di vita.

Passaggio di props ai componenti

1. Definire direttamente un nome per le props

2. Utilizzare un nome generico - ‘props’

N.B.: L'IntelliSense non è in grado di suggerire.

Puntata #4

Components features

Ciclo di vita

“Nascita”, aggiornamento e “morte”

Ciclo di vita

3 fasi:

  1. Mounting
    • momento in cui il componente viene creato e agganciato al DOM;
  2. Updating
    • momento in cui le props o lo stato di un componente cambia
  3. Unmounting
    • momento in cui il componente viene rimosso dal DOM;

Cliccami!

Ciclo di vita

Class components

Funzioni ereditabili dalla classe React.Component

  1. componentDidMount()

  2. componentDidUpdate(prevProps, prevState)

  3. componentWillUnmount()

Ciclo di vita

Functional components

Simulato grazie all’hook useEffect()

  1. Mounting: 
    useEffect(() => {...}, [])
  2. Updating: 
    useEffect(() => {...}, [yourDependency])
  3. Cleanup: per effettuare un’azione di terminazione (esempio: chiudere una connessione esterna), 
    useEffect(() => { return () => {...} })
Esempio in react-examples

Conditional Rendering

Mostro un componente in base ad una condizione booleana.

  1. If statements
  2. Ternary operator
  3. && operator
Esempio in react-examples

Event Handling

Come gestisco onClick(), onSubmit() o altri tipi di eventi lanciati da elementi del DOM?

  1. Dichiara un event handler — all’interno dell’implementazione del componente;
  2. Dichiara un event handler all’interno dell’evento da gestire.
  3. Usa una funzione lambda all’interno dell’evento da gestire.
Esempio in react-examples

State: A Component’s Memory

Obiettivo: ricordare un valore tra diversi update e re-render

Non basta una normale variabile!

  1. Cambiare il valore di una variabile locale non causa l’aggiornamento di un componente!
  2. Il valore di una variabile locale non persiste tra diversi aggiornamenti.

Come?

Utilizzo l’hook useState().

Ma prima di tutto, cos'è un hook?

Particolare funzione che non restituisce JSX, ma permette di connettersi con una funzionalità di un componente.

Dall’inglese ‘hook into’ — connettersi

Ma prima di tutto, cos'è un hook?

N.B.B. (nota bene benissimo): Tutti gli hook devono iniziare con use

useState(), useContext(), useEffect(), useRef()…

Possono essere anche custom!

useState(): anatomia

  • Deve essere importato
import { useState } from "react"
  • Si utilizza come segue:
const [ index, setIndex ] = useState(0)

const [ name, setName ] = useState("")
  • La funzione accetta come parametro il valore di default che si vuole assegnare alla variabile stato
  • Il ritorno è di due elementi:
    • il primo contiene il valore effettivo;
    • il secondo è il metodo per impostare il valore effettivo;

N.B.S.B. (nota bene super bene): usa il setter fornito per modificare lo stato!

Naming convention

Solitamente si scrive

const [ something, setSomething ] = useState(...)
  • usa il prefisso set per il secondo elemento di ritorno!

Puntata #5

Routing

react-router

Reference: reactrouter.com

Routing

Funzionalità non prevista di default.

Dobbiamo implementarla attraverso strumenti esterni!

Routing

react-router

[...] React Router is a simple and declarative library for routing. Its only job will be matching the URL to a set of components, providing access to URL data, and navigating around the app. [...]

— Guida ufficiale

Routing

Installazione

In un terminale aperto dentro al progetto, eseguire:

npm install react-router

Routing

Setup

2 fasi:

  1. Dichiarazione delle routes.
  2. Creazione delle effettive routes.

Routing

  1. Dichiarazione delle routes.

In cima alla nostra applicazione, dobbiamo posizionare un componente <BrowserRouter>

Routing

(1) Dichiarazione delle routes.

All’interno dell’entry point della nostra applicazione, devo dichiarare l’elenco delle possibili routes.

Routing

<Route> e <Routes>

<Route>: “strada” all’interno della mia applicazione, comprende

  • indirizzo (attributo path)
  • elemento in corrispondenza di quell’indirizzo (attributo element)

Routing

<Route> e <Routes>

<Route>: può essere composta! alt text

Routing

<Route> e <Routes>

<Routes>: elenco di <Route> dell’applicazione

Routing

(2) Navigazione

3 possibilità (2 molto simili):

  • <Link>
  • <NavLink>
  • useNavigate()

Guida di riferimento — reactrouter.com/start/declarative/navigating

Puntata #6

Data Fetching

alt text

Data Fetching

Processo di recupero di dati.

Data Fetching

Il nostro caso: Flickr

Data Fetching

Il nostro caso: Flickr

Servizio predecessore di Instagram, Unsplash… nato nel 2004 per organizzare e condividere foto.

Data Fetching

Il nostro caso: FlickrAPI

Data Fetching

Insieme di operazioni generalmente asincrone.

Nel moderno JavaScript, vengono gestite tramite paradigma delle Promise.

Data Fetching

Promise

“Proxy” per un oggetto il cui valore non è conosciuto al momento della creazione.

Come un metodo sincrono restituisce un valore, una funzione asincrona ritorna una Promise per fornire un valore in un determinato momento del futuro.

Data Fetching

Promise

alt text

web-basics/js/promises.js

Data Fetching

Un esempio alt text

web-basics/js/promises.js

Data Fetching

Un esempio alt text

web-basics/js/promises.js

Data Fetching

Come aggancio le callback resolve() e reject()? alt text

web-basics/js/promises.js

Data Fetching

Esempio di fetch() API — con dati di esempio

Data Fetching – in React

La pura logica del fetching è responsabilità di JavaScript. In React:

  1. posso ottimizzare le richieste dati;
  2. posso gestire le fasi di pending delle Promise ed eventuali errori.

Data Fetching – in React

Supponiamo di avere una funzione fetchPhotos() che prende due parametri — url e pictureUrlFormatter — e che restituisce una Promise contenente un array di oggetti HTMLImageElement

Data Fetching – in React

Data Fetching – in React

(1) ottimizzazione delle richieste dei dati

Chiamare questa promise in un componente è immediato per 1 volta, ma se il fetch viene eseguito ad ogni re-render l’applicazione potrebbe subire rallentamenti.

Data Fetching – in React

(1) ottimizzazione delle richieste dei dati

Dobbiamo salvare in una cache il primo risultato, e ricalcolarlo solo quando strettamente necessario.

Data Fetching – in React

(1) ottimizzazione delle richieste dei dati

Soluzione: useMemo()!

Hook di React per memorizzare il risultato di un calcolo dispendioso.

Data Fetching – in React

Anatomia di useMemo()

  1. deve essere importato dalla libreria react
  2. accetta due parametri di input:
    1. funzione callback che effettua il calcolo dispendioso
    2. array di dipendenze della funzione callback

useMemo()

Data Fetching – in React

(2) gestione degli stati pending e rejected di una Promise

Obiettivo: Vogliamo visualizzare il caricamento delle risorse e segnalare un eventuale errore avvenuto durante la richiesta.

Data Fetching – in React

(2) gestione degli stati pending e rejected di una Promise

Come? Innanzitutto, il componente che incaricato a mostrare i dati ricevuti deve poter ricevere una promise come prop.

Data Fetching – in React

alt text

Data Fetching – in React

Il contenuto di questa promise deve essere letto dal componente tramite Hook use().

use() è una novità di React v19!

Reference: Official Docs

Data Fetching – in React

alt text

Ricordati di 'use-client'!

Data Fetching – in React

alt text`

Così facendo, il componente è pronto.

Data Fetching – in React

La nostra applicazione utilizza il componente Gallery immediatamente dentro ad App.

Muoviamoci quindi su App.

Data Fetching – in React

È dentro ad App che richiamiamo la promise e la memorizziamo con useMemo()

alt text

Data Fetching – in React

Posso ricoprire il componente Gallery con un componente nativo di React chiamato Suspense

alt text

Data Fetching – in React

Posso ricoprire il tutto con un componente ErrorBoundary

Non è direttamente presente nella libreria react, è necessario installare il pacchetto react-error-boundary per poterlo utilizzare

npm i react-error-boundary

Data Fetching – in React

Puntata #X

Thinking in React

https://react.dev/learn/thinking-in-react

Obiettivo: Simple App

Step #1

Break the UI into a component hierarchy

Step #2

Build a static version in React

Step #3

Find the minimal but complete representation of UI state

Keep it D.R.Y.!

Don’t Repeat Yourself

Step #4

Identify where your state should live

Step #5

Add inverse data flow

Make data flow bidirectional.

Questionario di valutazione del corso

Link al Google Form

  • anonimo
  • breve
  • di estremo aiuto per migliorare eventuali futuri interventi
  • siate costruttivi e obiettivi
    • qualsiasi suggerimento è ben accetto!