Q1. Si vous voulez importer seulement le Component de la bibliothèque React, quelle syntaxe utilisez-vous?

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

Q2. Si un composant de fonction doit toujours se rendre de la même manière en fonction des mêmes props, quelle est une optimisation de performance simple disponible pour cela?

• Enveloppez-le dans le composant supérieur React.memo.
• Implémentez le Hook useReducer.
• Implémentez le Hook useMemo.
• Implémentez la méthode de cycle de vie shouldComponentUpdate.

Q3. Comment corrigez-vous l'erreur de syntaxe qui résulte de l'exécution de ce code?

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

• Enveloppez l'objet entre parenthèses.
• Appelez la fonction depuis un autre fichier.
• Ajoutez une instruction de retour avant la première accolade.
• Remplacez l'objet par un tableau.

Q4. Si vous voyez l'importation suivante dans un fichier, quel est utilisé pour la gestion d'état dans le composant?

import React, {useState} from 'react';

• React Hooks
• composants étatiques
• mathématiques
• composants de classe

Q5. En utilisant l'amélioration littérale d'objet, vous pouvez remettre des valeurs dans un objet. Lorsque vous connectez person à la console, quelle est la sortie?

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. Quelle est la bibliothèque de test le plus souvent associée à React?

• Mocha
• Chai
• Sinon
• Jest

Référence

Q7. Pour obtenir le premier élément du tableau ("cooking") en utilisant la déstructuration du tableau, comment ajustez-vous cette ligne?

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. Comment gérez-vous le passage à travers l'arbre de composants sans avoir à transmettre manuellement des props à chaque niveau?

• React Envoyer
• React Pinpoint
• React Router
• React Context

Référence

Q9. Que devrait afficher la console lorsque le code suivant est exécuté?

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

• Horse
• Cat
• Mouse
• undefined

Q10. Quel est le nom de l'outil utilisé pour prendre JSX et le transformer en appels createElement?

• Éditeur JSX
• ReactDOM
• Copain de navigateur
• Babel

Q11. Pourquoi pourriez-vous utiliser useReducer plutôt que useState dans un composant React?

• lorsque vous voulez remplacer Redux
• lorsque vous avez besoin de gérer un état plus complexe dans une application
• lorsque vous voulez améliorer les performances
• lorsque vous voulez casser votre application de production

Q12. Quelles props de l'objet props sont disponibles pour le composant avec la syntaxe suivante?

<Message {...props} />

• celles qui n'ont pas changé
• toutes
• les props enfants
• celles qui ont changé

Q13. Considérez le code suivant de React Router. Comment appelez-vous :id dans la propriété de chemin?

<Route path="/:id" />

• C'est un modèle de route
• C'est un paramètre de route
• C'est un séparateur de route
• C'est un lien de route

Q14. Si vous avez créé un composant appelé Dish et l'avez rendu dans le DOM, quel type d'élément serait rendu?

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

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

• div
• section
• composant
• h1

Q15. À quoi ressemble cet élément React étant donné le code suivant? (Alternative: Étant donné le code suivant, à quoi ressemble cet élément 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>

Référence

Q16. Quelle propriété devez-vous ajouter au composant Suspense pour afficher un spinner ou un état de chargement?

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

• paresseux
• chargement
• fallback
• spinner

Référence

Q17. Comment décririez-vous la variable message enveloppée entre accolades ci-dessous?

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

• une fonction JS
• un élément JS
• une expression JS
• un wrapper JSX

Q18. Que pouvez-vous utiliser pour gérer la division de code?

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

Q19. Quand utilisez-vous useLayoutEffect?

• pour optimiser pour tous les appareils
• pour terminer la mise à jour
• pour changer la disposition de l'écran
• lorsque vous avez besoin que le navigateur peigne avant que l'effet ne s'exécute

[Source] (https://react.dev/reference/react/useLayoutEffect) "useLayoutEffect est une version de useEffect qui se déclenche avant que le navigateur ne redessine l'écran."

Q20. Quelle est la différence entre les comportements de clic de ces deux boutons (en supposant que handleClick est lié correctement)?

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

• Le bouton A n'aura pas accès à l'objet event lors du clic sur le bouton.
• Le bouton B ne déclenchera pas le gestionnaire this.handleClick avec succès.
• Le bouton A ne déclenchera pas le gestionnaire this.handleClick avec succès.
• Il n'y a pas de différence.