FrançaisGet started

Front-end framework: components

Splitting an interface into a component tree, passing data down through props and events up, composing components, rendering a list with a key per item.

  • 25 cards
  • 5 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios
  5. Understand

A few cards from the deck

  • Front-end framework: what is it?

    Show the answer

    A library that builds the interface from components and updates it when the data changes, instead of editing the DOM by hand.

    You describe what the screen must show for given data; the framework compares with the current screen and applies the difference.

  • What HTML does this component produce for the usage below?

    ```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>
    Show the answer

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

    The framework replaces Carte with what it returns: {titre} becomes the received text, {children} the paragraph placed between the tags. The name Carte never shows up in the final HTML.

  • A child receives data through … and tells its parent about a click through an …, often a function passed as a prop.

    Show the answer

    A child receives data through props and tells its parent about a click through an event, often a function passed as a prop.

    <Bouton onClic={ajouter} />: the parent gives the function, the child calls it, and it is the parent that changes its data.

  • Component: what is it?

    Show the answer

    A reusable piece of interface, written as a function that receives data and returns what to display.

    Components nest: the whole application is a tree where each node is a component containing others.

  • The console shows “Each child in a list should have a unique "key" prop” for produits.map((p) => <Produit nom={p.nom} />). Which fix works?

    • Add key={p.id} on <Produit>
    • Add key={p.id} on the <ul> holding the list
    • Pass id={p.id} as a prop of <Produit>
    • Replace map with a for loop that builds an array
    Show the answer

    Add key={p.id} on <Produit>

    The key goes on the repeated element, inside the map. An ordinary id prop is not read by the framework; a for loop would produce the same array of elements, hence the same warning.

Study this deck