Frontend framework componenti domande

Cos'è un componente in un framework frontend?

Un componente è un'unità riutilizzabile che incapsula logica, struttura e stilizzazione. I componenti possono essere semplici o complessi.

Quali sono i vantaggi dell'uso dei componenti?

- Riutilizzabilità - Manutenzione semplificata - Modifiche isolate - Testabilità migliorata

Componenti stateless vs stateful?

I componenti stateless non gestiscono stato, mentre i componenti stateful lo fanno. Gli stateful possono mantenere informazioni tra i rendering.

Qual è la struttura tipica di un componente?

Un componente solitamente include un template (markup), uno script (logica) e uno stile (CSS).

Come si passa dati ai componenti?

I dati vengono passati tramite props. Le props consentono ai componenti di ricevere informazioni dall'esterno.

Vero o falso: I componenti possono contenere altri componenti.

Vero. Questa pratica è nota come composizione dei componenti.

Cosa significa 'composizione dei componenti'?

Significa combinare più componenti per creare interfacce utente più complesse e modulari.

Qual è la differenza tra un componente e una funzione?

Un componente restituisce markup e gestisce stato, mentre una funzione può solo eseguire calcoli o operazioni senza interfaccia.

Quali sono i cicli di vita di un componente?

I cicli di vita includono montaggio, aggiornamento e smontaggio, gestendo come e quando un componente viene creato o distrutto.

Cosa sono le chiavi nei componenti?

Le chiavi sono proprietà uniche assegnate agli elementi per aiutare React a identificare quali elementi sono cambiati, aggiunti o rimossi.

Qual è il ruolo del rendering condizionale?

Permette di mostrare o nascondere componenti in base a condizioni, migliorando l'interattività dell'applicazione.

Cosa fa il metodo 'render'?

Il metodo 'render' restituisce l'output di un componente, definendo cosa deve essere visualizzato nell'interfaccia utente.

Vero o falso: I componenti possono avere metodi.

Vero. I metodi possono gestire eventi o manipolare lo stato interno del componente.

Qual è l'importanza della modularità nei componenti?

La modularità consente una migliore organizzazione del codice, facilita il riutilizzo e semplifica la manutenzione.

Cosa significa 'props drilling'?

È il processo di passaggio delle props attraverso più livelli di componenti, il che può rendere il codice complesso.

Come si gestisce la comunicazione tra componenti?

Si utilizzano callback o gestione dello stato globale come Redux, per comunicare tra componenti non direttamente correlati.

Cosa rappresenta lo stato in un componente?

Lo stato rappresenta i dati interni di un componente che possono cambiare nel tempo.

Vero o falso: Gli stati sono immutabili.

Falso. Gli stati sono mutabili e possono essere aggiornati tramite funzioni apposite.

Qual è il ciclo di vita principale di un componente?

Montaggio, aggiornamento e smontaggio.

Come si aggiorna lo stato in React?

Utilizzando la funzione `setState()` che modifica lo stato e causa un nuovo rendering.

Cosa succede durante il montaggio di un componente?

Il componente viene creato e inserito nel DOM. Vengono eseguiti i metodi `componentDidMount`.

Cosa causa un re-render di un componente?

Modifiche allo stato o alle props inviate al componente.

Vero o falso: Il metodo `componentWillUnmount` è eseguito prima del montaggio.

Falso. Viene eseguito prima che il componente venga smontato dal DOM.

Qual è la differenza tra stato e props?

Lo stato è gestito internamente, mentre le props sono passate dall'esterno e immutabili.

Riempire il vuoto: `useEffect` è usato per _______.

gestire effetti collaterali e cicli di vita nei componenti funzionali.

Quando si usa `componentDidUpdate`?

Si usa per eseguire codice dopo che il componente è stato aggiornato.

Qual è il risultato di chiamare `setState` in un ciclo?

Può causare un comportamento imprevisto, poiché gli aggiornamenti sono asincroni.

Cosa restituisce `useState`?

Un array con lo stato attuale e una funzione per aggiornarlo.

Vero o falso: Gli effetti possono essere eseguiti solo dopo il montaggio.

Falso. Possono essere eseguiti anche in risposta a cambiamenti nello stato.

Cosa fa il metodo `shouldComponentUpdate`?

Determina se un componente deve essere aggiornato o meno.

Esempio di stato iniziale in un componente: `this.state = { contatore: 0 };`

Imposta il valore iniziale di un contatore a 0 nel costruttore.

Cosa significa 'smontaggio'?

Significa rimuovere un componente dal DOM, liberando risorse associate.

Cosa si intende per stilizzazione?

È il processo di definizione dell'aspetto visivo dei componenti, utilizzando CSS o pre-processori.

Vero o falso: il design responsivo è importante.

Vero. Garantisce che i componenti si adattino a diverse dimensioni dello schermo.

Quali sono i principali metodi di stilizzazione?

1. CSS tradizionale 2. CSS-in-JS 3. Pre-processori (Sass, LESS) 4. Componenti stilizzati

CSS-in-JS è utilizzato per...

Scrivere stili direttamente nei file JavaScript, migliorando la modularità dei componenti.

Cosa sono i CSS Modules?

Un modo per scrivere CSS che sia locale al componente, evitando conflitti di nomi.

Vero o falso: i pre-processori CSS non supportano variabili.

Falso. I pre-processori come Sass permettono di usare variabili per semplificare la stilizzazione.

Vantaggi di utilizzare un design sistematico:

- Coerenza visiva - Riutilizzabilità dei componenti - Facilità di manutenzione

Cosa fa il Flexbox?

Permette di creare layout flessibili e reattivi, distribuendo lo spazio tra i componenti.

Qual è la differenza tra Flexbox e Grid?

Flexbox è per layout unidimensionali, mentre Grid gestisce layout bidimensionali.

Completa: Un tema scuro riduce ...

... l'affaticamento visivo in ambienti a bassa luminosità.

Cosa sono i design tokens?

Unità di design che rappresentano valori stilistici come colori, spaziature e tipografie.

Vero o falso: i componenti stilizzati non possono essere riutilizzati.

Falso. Possono essere riutilizzati e personalizzati in base alle esigenze.

Qual è l'importanza dei breakpoint?

Permettono di definire stili specifici per diversi dispositivi e dimensioni dello schermo.

Esempio di mixin in Sass:

@mixin rounded-corners { border-radius: 5px; } Usalo con @include rounded-corners;

Cosa sono le media queries?

Strumenti CSS per applicare stili specifici in base a caratteristiche del dispositivo, come la larghezza dello schermo.

Cause ed effetti: l'uso di spaziatura uniforme ...

... migliora la leggibilità e l'estetica del design.