Font size
WorksheetsReact
Total questions: 38
Worksheet time: 1hrs 13mins
Scrivi max. 2 parole su React (o quel caBBo che vuoi)
Quale affermazione descrive correttamente il ruolo di React in un’applicazione web?
React è un framework completo che gestisce routing, stato globale e backend.
React è una libreria per costruire interfacce basate su componenti e aggiornate tramite stato.
React sostituisce completamente il DOM del browser con uno virtuale.
React è un linguaggio di programmazione alternativo a JavaScript.
In una SPA (Single-Page Application), dove avviene principalmente la navigazione tra le pagine?
Server-side
Client-side
Database
API esterne
Quale metodologia favorisce la coerenza nell'implementazione?
Approccio monolitico
Approccio a componenti
Approccio sequenziale
Approccio iterativo
Perché i contenuti di un componente possono essere cambiati facilmente?
Perché si usano i "props"
Perché sono scritti in HTML
Perché sono fissi
Perché sono sempre uguali
Perché il componente Card non sa cosa contiene, ma lo visualizza comunque correttamente?
Perché utilizza la proprietà "children" che permette di passare contenuti dinamici.
Perché il titolo viene passato come props.
Perché il componente è scritto in PascalCase.
Perché importa React da 'react'.
Quale convenzione di scrittura viene suggerita per i nomi dei componenti React?
PascalCase
kebab-case
camelCase
UPPERCASE
Che cosa sono i componenti in React e perché sono considerati fondamentali per costruire un’interfaccia modulare?
Qual è la funzione principale degli Hook in React?
Permettere ai componenti funzionali di usare funzionalità avanzate come stato, effetti collaterali o riferimenti
Migliorare le prestazioni ottimizzando automaticamente il rendering dei componenti funzionali rispetto a quelli a classe.
Rendere possibile modificare il DOM direttamente all’interno dei componenti senza usare API esterne come useRef.
Permettere a React di compilare i componenti funzionali in WebAssembly quando utilizzano Hook asincroni.
Se vuoi eseguire del codice quando qualcosa cambia in un componente React, quale Hook dovresti utilizzare?
useEffect
useMemo
useReducer
useCallback
Quale Hook consente di condividere dati tra componenti senza passare props?
useContext
useReducer
useEffect
useCallback
Qual è la differenza principale tra useEffect e useLayoutEffect?
useLayoutEffect viene eseguito prima del render visivo, mentre useEffect dopo
useLayoutEffect è l’unico che può accedere ai valori aggiornati dello stato, mentre useEffect può accedere solo allo stato precedente.
useEffect viene eseguito prima del commit phase di React, mentre useLayoutEffect viene eseguito dopo ogni re-render ma prima del diffing virtuale.
useLayoutEffect permette di aggiornare il DOM senza causare re-render, mentre useEffect forza sempre un re-render del componente.
Qual è la funzione principale dell’Hook useState in React?
Memorizzare e aggiornare dati dentro un componente.
Creare nuovi componenti.
Gestire la navigazione tra pagine.
Applicare stili CSS ai componenti.
Cosa succede quando il valore memorizzato con useState cambia in React?
React ricalcola il componente e aggiorna la UI.
Il componente viene eliminato.
La pagina viene ricaricata completamente.
Niente, il valore rimane invariato.
className sostituisce l’attributo HTML class in JSX.
Vero
Falso
Quale hook viene utilizzato per eseguire la chiamata di fetch al montaggio del componente?
useEffect
useState
useCallback
useReducer
Abbina ogni concetto alla sua definizione.
React
Aggiornamento efficiente della UI
Componenti riutilizzabili
Modularità e riutilizzo del codice
Stato e ciclo di vita
Gestione dello stato e dei componenti
SPA
Applicazione a pagina singola
Qual è lo scopo della funzione fetchUsers nel componente UsersList?
Recuperare i dati degli utenti da un endpoint e aggiornare lo stato
Visualizzare la lista degli utenti
Memorizzare la chiave degli utenti
Gestire l'input dell'utente
JSX/TSX richiede sempre un solo nodo root.
Vero
False
Perché si utilizza l'array vuoto come secondo argomento di useCallback nella funzione fetchUsers?
Per memorizzare la funzione e non ricrearla ad ogni render
Per eseguire la funzione solo una volta
Per aggiornare lo stato ad ogni cambiamento
Per evitare errori di sintassi
A cosa serve l’ambiente "Test/Stage"?
Per i test automatici o ambienti di staging
Per la versione online in produzione
Per lo sviluppo di nuove funzionalità
Per la gestione degli utenti
Quale comando npm è necessario per installare la libreria di routing in React?
npm install react-router-dom
npm install react-dom-router
npm install router-react-dom
npm install react-routing-dom
Quale attributo viene utilizzato nel componente Link per specificare la destinazione della navigazione?
to
href
path
dest
I componenti React devono essere scritti in PascalCase.
Vero
False
Abbina i seguenti Hook
useState
Memorizza e aggiorna lo stato
useEffect
Esegue azioni quando qualcosa cambia
useRef
Mantiene valori persistenti
useContext
Permette di condividere dati globali
Spiega il ruolo degli Hook in React.
In particolare, descrivi la differenza tra useState e useEffect e fai un esempio concreto di quando useresti entrambi nello stesso componente.
Supponendo di voler aggiungere una nuova pagina "Blog", quale modifica dovresti apportare al codice di esempio?
Aggiungere un nuovo <Link to="/blog">Blog</Link> nel menu di navigazione e una <Route path="/blog" element={<Blog />} /> nei Routes.
Creare una Route /blog ma non aggiungere il Link: React Router genera automaticamente la voce di menu.
Sostituire <BrowserRouter> con <Router blogMode> per abilitare le pagine dinamiche.
Cambiare la route di Home in /blog, lasciando React Router occuparsi del resto tramite redirect implicito.
Qual è il problema principale che la Context API risolve nello sviluppo di applicazioni React?
Permette di creare un "contenitore globale" di stato per evitare il passaggio eccessivo di props tra componenti.
Permette di velocizzare il rendering dei componenti.
Serve per gestire le animazioni dell’interfaccia.
Serve per ottimizzare le query al database.
Qual è lo scopo principale degli environments in un progetto React creato con Vite?
Consentire di utilizzare automaticamente un database diverso per ogni componente React.
Separare configurazioni e variabili per Development, Stage/Test e Production, così l’app può comportarsi in modo diverso a seconda dell’ambiente.
Permettere a Vite di generare più bundle JavaScript per ottimizzare le performance di build.
Abilitare funzionalità avanzate di React come Redux e Context API senza configurazione aggiuntiva.
Le props possono essere modificate direttamente dentro il componente.
Vero
Falso
Perché è utile la Context API quando più livelli di componenti devono condividere gli stessi dati?
Perché permette di condividere dati comuni senza passare props a catena.
Perché elimina la necessità di usare lo stato locale.
Perché migliora la sicurezza dell’applicazione.
Perché riduce il numero di componenti nell’app.
Quale delle seguenti NON è una situazione tipica in cui si usa il Context?
Gestione delle animazioni CSS.
Autenticazione utente.
Lingua e localizzazione.
Preferenze dell’app.
Ordina le seguenti fasi del lifecycle funzionale semplificato
Render del componente
Esecuzione degli effetti useEffect
Aggiornamento dello stato tramite setState
Re-render del componente
Qual è il modo corretto per utilizzare una variabile definita in un file .env dentro un progetto React con Vite?
Accedendo direttamente alla variabile tramite process.env.MIA_VARIABILE come nei progetti Node.js.
Importando la variabile con import { MIA_VARIABILE } from './env' dopo aver configurato Vite.
Creando la variabile nel file .env con prefisso VITE_ e leggendola con import.meta.env.VITE_MIA_VARIABILE nel codice.
Inserendo la variabile nel file vite.config.ts e accedendola da qualsiasi componente tramite window.env.
Un componente può restituire più elementi senza un wrapper. (<> </>)
Vero
Falso
Ordina le cartelle secondo la funzione descritta
public/
File statici non processati dal bundler
src/assets/
Asset processati e ottimizzati dal bundl
src/components/
Componenti riutilizzabili dell’interfacc
src/pages/
Pagine principali dell’applicazione
Qual è la funzione principale del Hook useMemo in React?
Memorizzare valori calcolati per ottimizzare le prestazioni.
Gestire gli effetti collaterali.
Creare riferimenti a elementi del DOM.
Gestire lo stato globale dell'applicazione.
Redux: abbina ogni concetto alla sua definizione.
Store
Contenitore centrale che mantiene lo sta
Action
Oggetto che descrive “cosa deve accadere
Reducer
Funzione pura che riceve stato + azione
Selector
Metodo che invia un’azione allo store
