Q1. Se vuoi importare solo il Component dalla libreria React, quale sintassi utilizzi?

• import React.Component from 'react'
• import [ Component ] from 'react'
• import Component from 'react'
• import { Component } from 'react'

Q2. Se un componente di funzione dovrebbe sempre renderizzare allo stesso modo date le stesse props, quale semplice ottimizzazione delle prestazioni è disponibile per esso?

• Incapsularlo nell'higher-order component React.memo.
• Implementare il Hook useReducer.
• Implementare il Hook useMemo.
• Implementare il metodo del ciclo di vita shouldComponentUpdate.

Q3. Come si corregge l'errore di sintassi che si verifica eseguendo questo codice?

const person = (firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

• Incapsulare l'oggetto tra parentesi.
• Chiamare la funzione da un altro file.
• Aggiungere una dichiarazione di ritorno prima della prima graffa.
• Sostituire l'oggetto con un array.

Q4. Se vedi l'importazione seguente in un file, cosa viene utilizzato per la gestione dello stato nel componente?

import React, {useState} from 'react';

• React Hooks
• componenti con stato
• matematica
• componenti di classe

Q5. Utilizzando il miglioramento letterale degli oggetti, è possibile reinserire i valori in un oggetto. Quando si registra person sulla console, qual è l'output?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

• {{name: "Rachel", age: 31}}
• {name: "Rachel", age: 31}
• {person: "Rachel", person: 31}}
• {person: {name: "Rachel", age: 31}}

Q6. Con quale libreria di testing è più spesso associata React?

• Mocha
• Chai
• Sinon
• Jest

Riferimento

Q7. Per ottenere il primo elemento dall'array ("cooking") utilizzando la destrutturazione dell'array, come si modifica questa riga?

const topics = ['cooking', 'art', 'history'];

• const first = ["cooking", "art", "history"]
• const [] = ["cooking", "art", "history"]
• const [, first]["cooking", "art", "history"]
• const [first] = ["cooking", "art", "history"]

Q8. Come si gestisce il passaggio attraverso l'albero dei componenti senza dover passare manualmente le props a ogni livello?

• React Send
• React Pinpoint
• React Router
• React Context

Riferimento

Q9. Cosa dovrebbe leggere la console quando viene eseguito il seguente codice?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

• Horse
• Cat
• Mouse
• undefined

Q10. Qual è il nome dello strumento utilizzato per prendere JSX e trasformarlo in chiamate createElement?

• JSX Editor
• ReactDOM
• Browser Buddy
• Babel

Q11. Perché potresti utilizzare useReducer invece di useState in un componente React?

• quando vuoi sostituire Redux
• quando è necessario gestire uno stato più complesso in un'app
• quando si desidera migliorare le prestazioni
• quando si desidera interrompere l'app di produzione

Q12. Quali props dell'oggetto props sono disponibili al componente con la seguente sintassi?

<Message {...props} />

• qualsiasi che non è cambiato
• tutti loro
• props figlio
• qualsiasi che è cambiato

Q13. Considera il seguente codice da React Router. Come chiameresti :id nella prop path?

<Route path="/:id" />

• Questo è un modal di route
• Questo è un parametro di route
• Questo è uno splitter di route
• Questo è un link di route

Q14. Se hai creato un componente chiamato Dish e lo hai renderizzato nel DOM, che tipo di elemento verrebbe renderizzato?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

• div
• sezione
• componente
• h1

Q15. Come appare questo elemento React dato il seguente codice? (Alternativa: Dato il seguente codice, come appare questo elemento React?)

React.createElement('h1', null, "What's happening?");

• <h1 props={null}>What's happening?</h1>
• <h1>What's happening?</h1>
• <h1 id="component">What's happening?</h1>
• <h1 id="element">What's happening?</h1>

Riferimento

Q16. Quale proprietà devi aggiungere al componente Suspense per visualizzare uno spinner o uno stato di caricamento?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

• lazy
• loading
• fallback
• spinner

Riferimento

Q17. Come descriveresti la variabile di messaggio avvolta tra parentesi graffe di seguito?

const message = 'Hi there';
const element = <p>{message}</p>;

• %OPTION% una funzione JS

• %OPTION% un elemento JS

• %OPTION% un'espressione JS

• %OPTION% un wrapper JSX

Q18. Cosa puoi usare per gestire la suddivisione del codice?

• React.memo
• React.split
• React.lazy
• React.fallback

Q19. Quando usi useLayoutEffect?

• per ottimizzare per tutti i dispositivi
• per completare l'aggiornamento
• per cambiare il layout dello schermo
• quando hai bisogno che il browser dipinga prima che venga eseguito l'effetto

Fonte "useLayoutEffect è una versione di useEffect che si attiva prima che il browser ridipiatti lo schermo."

Q20. Qual è la differenza tra i comportamenti di clic di questi due pulsanti (supponendo che handleClick sia correttamente vincolato)?

A. <button onClick={this.handleClick}>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>

• Il pulsante A non avrà accesso all'oggetto evento al clic del pulsante.
• Il pulsante B non attiverà con successo l'handler this.handleClick.
• Il pulsante A non attiverà con successo l'handler this.handleClick.
• Non c'è differenza.