EnglishCommencer

Framework front : les composants

Découper une interface en arbre de composants, faire descendre les données par les propriétés et remonter les événements, composer des composants, afficher une liste avec une clé par élément.

  • 25 cartes
  • 5 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation
  5. Comprendre

Quelques cartes du deck

  • Framework front : de quoi s'agit-il ?

    Voir la réponse

    Bibliothèque qui construit l'interface à partir de composants et la met à jour quand les données changent, au lieu de modifier le DOM à la main.

    On décrit ce que l'écran doit montrer pour des données données ; le framework se charge de comparer avec l'écran actuel et d'appliquer la différence.

  • Quel HTML ce composant produit-il pour l'usage ci-dessous ?

    ```jsx
    function Carte({ titre, children }) {
    return (
    <section>
    <h2>{titre}</h2>
    {children}
    </section>
    );
    }

    <Carte titre="Salut">
    <p>Bonjour</p>
    </Carte>
    `

    • <section><h2>Salut</h2><p>Bonjour</p></section>
    • <Carte><h2>Salut</h2><p>Bonjour</p></Carte>
    • <section><h2>titre</h2><p>Bonjour</p></section>
    • <section><h2>Salut</h2></section>
    Voir la réponse

    <section><h2>Salut</h2><p>Bonjour</p></section>

    Le framework remplace Carte par ce qu'elle renvoie : {titre} devient le texte reçu, {children} le paragraphe placé entre les balises. Le nom Carte n'apparaît jamais dans le HTML final.

  • Un enfant reçoit des données par des … et prévient son parent d'un clic par un …, souvent une fonction passée en propriété.

    Voir la réponse

    Un enfant reçoit des données par des propriétés et prévient son parent d'un clic par un événement, souvent une fonction passée en propriété.

    <Bouton onClic={ajouter} /> : le parent donne la fonction, l'enfant l'appelle, et c'est le parent qui change ses données.

  • Composant : de quoi s'agit-il ?

    Voir la réponse

    Morceau d'interface réutilisable, écrit comme une fonction qui reçoit des données et renvoie ce qu'il faut afficher.

    Les composants s'emboîtent : l'application entière est un arbre dont chaque nœud est un composant qui en contient d'autres.

  • La console affiche « Each child in a list should have a unique "key" prop » pour produits.map((p) => <Produit nom={p.nom} />). Quelle réparation convient ?

    • Ajouter key={p.id} sur <Produit>
    • Ajouter key={p.id} sur le <ul> qui contient la liste
    • Passer id={p.id} en propriété de <Produit>
    • Remplacer map par une boucle for qui construit un tableau
    Voir la réponse

    Ajouter key={p.id} sur <Produit>

    La clé se pose sur l'élément répété, à l'intérieur du map. Une propriété id ordinaire n'est pas lue par le framework ; la boucle for produirait le même tableau d'éléments, donc le même avertissement.

Réviser ce deck