Introduction

Jusqu'à présent, nous avons créé des composants fonctionnels. Ces composants sont souvent appelés composants "stupides" car ils ne présentent qu'un composant visuellement, sans aucune interactivité.

Dans ce cours, nous allons examiner les composants à base de classes et pourquoi ils sont souvent appelés composants "intelligents". Nous examinerons également quand utiliser ces composants plutôt que des composants fonctionnels.

🤓 À la fin de cette quête, tu seras en mesure de

✅ Comprendre ce qu'est un composant à base de classe. ✅ Comprendre les différences entre un composant à base de classe et un composant fonctionnel. ✅ Comprendre les termes de composants "intelligents" et "stupides".

Introduction aux composants à base de classes

Examinons un composant à base de classe avec toute la syntaxe qui l'entoure.

// User.js
import React from "react";

class User extends React.Component {
  render() {
    return (
      <div>Mon composant utilisateur.</div>
    );
  }
}

export default User;

Dans l'exemple ci-dessus, nous pouvons déjà voir quelques différences entre ce composant à base de classe et un composant fonctionnel.

Définition

class User extends React.Component

• Dans un composant à base de classe, le mot class est toujours requis avant le nom du composant, comme dans l'exemple "class User"
• Ensuite, il y a "React.Component" qui étend toutes les propriétés du composant ("Component") intégré de la bibliothèque React.

Méthode render

render() {
  return (
    <div>Mon composant utilisateur.</div>
  ) ;
}

• La méthode render est la seule méthode obligatoire au sein d'un composant à base de classe.
• Elle est également responsable de renvoyer l'élément JSX lorsque le composant est initialement rendu.
• Elle est responsable du rendu de tout changement qui se produira dans le composant.
• Ceci est fait par un processus appelé state, que nous verrons dans les prochaines quêtes.

Props dans les composants à base de classes

// App.js
<User name="Jason" />

// User.js
import react from "React";

class User extends React.Component {
  render() {
    return (
      <div>{this.props.name}</div>
    ) ;
  }
}
export default User;

L'utilisation des props au sein d'un composant à base de classe se fait un peu différemment que dans un composant fonctionnel. Dans les composants à base de classe, la valeur de this fait référence à l'emplacement et à la définition des méthodes et des attributs de classe tels que les props et les states.

Composants intelligents et stupides

Composants intelligents (Classe)

Un composant à base de classe est souvent appelé composant "intelligent". Il est réactif et se modifie en fonction des interactions avec l'utilisateur, d'un événement ou lors des manipulations du DOM.

Composants stupides (Fonctionnels)

Un composant fonctionnel est souvent qualifié de composant "stupide". Il reçoit principalement des props et présente ces données visuellement, mais n'est pas capable de les changer ou de les manipuler via une interaction utilisateur.

💪 Challenge

Ton objectif est de créer un composant à base de classe qui reçoit des props.

Voici les étapes, mais lis toutes les instructions du défi avant de commencer

• Utilise ce template pour commencer (tu peux utiliser ce template pour tous tes futurs projets React)
• Assure-toi d'être connecté au CodeSandbox.
• Change le nom du projet en "counter-app".
• Crée un dossier "components" dans le dossier "src".
• Crée un composant "Counter" (src/components/Counter.js).
• Importe le composant "Counter" dans le composant "App".
• Maintenant que tu l'as importé dans le composant "App", passe une prop title dont la valeur est "Counter App" au composant "Counter".
• Fais le rendu de la prop dans le composant "Counter".
• Affiche ce composant à partir du composant "App".

🧐 Critères de validation

• [ ] Il y a un composant Counter qui reçoit une prop title et fait le rendu du titre
• [ ] Le code est disponible sur CodeSandbox.