• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 11/10/2022

Évoluer dans l'écosystème React

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Compétences évaluées

  • Évoluer dans l'écosystème React
  • Question 1

    On veut écrire un composant MyComponent  . Quelles syntaxes sont des syntaxes valables ?

    Attention, plusieurs réponses sont possibles.
    • React.createClass({
      displayName: "MyComponent",
      render() {
      return (
      <div>
      <h1>{this.props.title}</h1>
      </div>
      )
      }
      })
    • class MyComponent extends React.Component {
      return (<div>
      <h1>My component</h1>
      <p>This is my component text content ✨</p>
      </div>)
      }

       

    • const MyComponent = () => (
      <div>
      <h1>My component</h1>
      <p>This is my component text content ✨</p>
      </div>
      )
    • class MyComponent extends React.Component {
      render() {
      return (<div>
      <h1>My component</h1>
      <p>This is my component text content ✨</p>
      </div>)
      }
      }

       

  • Question 2

    On a un composant parent MyParentComponent qui utilise un composant enfant  <ChildComponent />  . 

    On souhaite passer un booléen isConnected  d'un composant parent à un composant enfant, de sorte à avoir :

    function myParentComponent() {
    return (
    <div>
    <ChildComponent isConnected={isConnected} />
    </div>
    )
    }

     Le composant enfant <ChildComponent /> est défini comme un composant classe. Comment faire pour récupérer isConnected  dans ChildComponent  et l'utiliser dans le render()  ?

    • En le récupérant en paramètre du constructor

    • Avec this.props

    • On ne peut pas

    • Avec this.state

  • Question 3

    Nous voulons créer un composant qui affiche un bouton qui, lorsqu'on clique dessus, déclenche une alerte. Quel(s) snippet(s) de code fonctionne(nt) bien ici ? (N'hésitez pas à les tester !)

    Attention, plusieurs réponses sont possibles.
    • class MyComponent extends Component {
      displayAlert() {
      alert(`L'alerte a été déclenchée`)
      }
      render() {
      return (
      <div>
      <button onClick={() => displayAlert()}>👉 Cliquer ici 👈</button>
      </div>
      )
      }
      }
    • class MyComponent extends Component {
      render() {
      return (
      <div>
      <button onClick={() => this.alert(`L'alerte a été déclenchée`)}>
      👉 Cliquer ici 👈
      </button>
      </div>
      )
      }
      }
    • class MyComponent extends Component {
      displayAlert() {
      alert(`L'alerte a été déclenchée`)
      }
      render() {
      return (
      <div>
      <button onClick={this.displayAlert}>👉 Cliquer ici 👈</button>
      </div>
      )
      }
      }
    • class MyComponent extends Component {
      displayAlert() {
      alert(`L'alerte a été déclenchée`)
      }
      render() {
      return (
      <div>
      <button onClick={() => this.displayAlert()}>👉 Cliquer ici 👈</button>
      </div>
      )
      }
      }