• 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 23/02/2024

Évoluer dans l'écosystème React

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>
          )
        }
      }
      
Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous