É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 !)