React:Constructeur et propriétés

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();

    // Initialisation de propriétés 
    this.message = 'Bonjour, monde!';
  }

  render() {
    // Utilisation de la propriété sans état dans le rendu
    return (
      <div>
        <p>{this.message}</p>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();

    // Initialisation de propriétés
    this.message = 'Cliquez sur le bouton!';
  }

  f = () => {
    // Méthode de classe utilisée lorsqu'un bouton est cliqué
    alert('Bouton cliqué!');
  };

  render() {
    // Utilisation de la propriété sans état dans le rendu
    return (
      <div>
        <p>{this.message}</p>
        <button onClick={this.f}>Cliquez-moi</button>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();

    // Utilisation d'un tableau d'objets comme propriété
    this.personnes = [
      { id: 1, nom: 'Alice', age: 25 },
      { id: 2, nom: 'Bob', age: 30 },
      { id: 3, nom: 'Charlie', age: 22 },
    ];
  }

  render() {
    // Utilisation du tableau d'objets dans le rendu
    return (
      <div>
        <h2>Liste de personnes :</h2>
        <ul>
          {this.personnes.map(personne => (
            <li key={personne.id}>
              {personne.nom} - {personne.age} ans
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();

    // Utilisation d'un tableau d'objets comme propriété
    this.personnes = [
      { id: 1, nom: 'Alice', age: 25 },
      { id: 2, nom: 'Bob', age: 30 },
      { id: 3, nom: 'Charlie', age: 22 },
    ];
  }

  f = (personne) => {
    // Méthode de classe utilisée lorsqu'un élément de la liste est cliqué
    alert(`Cliqué sur ${personne.nom}`);
  };

  render() {
    // Utilisation du tableau d'objets dans le rendu
    return (
      <div>
        <h2>Liste de personnes :</h2>
        <ul>
          {this.personnes.map(personne => (
            <li key={personne.id} onClick={() => this.f(personne)}>
              {personne.nom} - {personne.age} ans
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;