React:Hooks

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [message, setMessage] = useState('');

  // Utilisation de useEffect pour afficher un message lorsque le composant est monté
  useEffect(() => {
    setMessage('Le composant est monté !');
  }, []); // Le tableau vide [] signifie que cette fonction s'exécutera uniquement après le montage initial du composant

  return (
    <div>
      <h2>Exemple d'utilisation de useEffect</h2>
      <p>{message}</p>
    </div>
  );
}

export default ExampleComponent;

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // Utilisation de useEffect pour incrémenter le compteur de secondes chaque seconde
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // La fonction de nettoyage arrête l'incrémentation lorsque le composant est démonté
    return () => clearInterval(interval);
  }, []); // Le tableau vide [] signifie que cette fonction s'exécutera uniquement après le montage initial du composant

  return (
  <div>
      <h2>Compteur de secondes</h2>
      <p>{seconds} secondes</p>
    </div>
  );
}

export default Timer;

import React, { useState, useEffect } from 'react';

function LocalStorageExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Utilisation de useEffect pour récupérer la valeur de "count" depuis le localStorage lors du montage du composant
    const storedCount = localStorage.getItem('count');
    if (storedCount) {
      setCount(Number(storedCount));
    }
  }, []); // Le tableau vide [] signifie que cette fonction s'exécutera uniquement après le montage initial du composant

  useEffect(() => {
    // Utilisation de useEffect pour mettre à jour le localStorage à chaque changement de "count"
    localStorage.setItem('count', count.toString());
  }, [count]);

  const increment = () => {
    setCount(count + 1);
  };

  return (
     <div>
      <h2>Exemple d'utilisation de useEffect avec localStorage</h2>
      <p>Count : {count}</p>
      <button onClick={increment}>Incrémenter Count</button>
    </div>
  );
}

export default LocalStorageExample;

import React, { useState } from 'react';

function ContactList() {
  const [contacts, setContacts] = useState([]);
  const [newContact, setNewContact] = useState('');
  const [filter, setFilter] = useState('');

  const addContact = () => {
    if (newContact.trim() !== '') {
      setContacts([...contacts, newContact]);
      setNewContact('');
    }
  };

  const deleteContact = (index) => {
    const updatedContacts = [...contacts];
    updatedContacts.splice(index, 1);
    setContacts(updatedContacts);
  };

  return (
    <div>
      <h2>Liste de contacts</h2>
      <div>
        <input
          type="text"
          placeholder="Nouveau contact"
          value={newContact}
          onChange={(e) => setNewContact(e.target.value)}
        />
        <button onClick={addContact}>Ajouter</button>
      </div>
      <div>
        <input
          type="text"
          placeholder="Filtrer par nom"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        />
      </div>
      <ul>
        {contacts
          .filter((contact) => contact.includes(filter))
          .map((contact, index) => (
            <li key={index}>
              {contact}
              <button onClick={() => deleteContact(index)}>Supprimer</button>
            </li>
          ))}
      </ul>
    </div>
  );
}

export default ContactList;

import React, { useState } from 'react';

function SignupForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitted(true);
  };

  return (
   <div>
      <h2>Formulaire de création de compte</h2>
      {isSubmitted ? (
        <p>Compte créé !</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <label>
            Nom d'utilisateur:
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </label>
          <label>
            Adresse e-mail:
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </label>
          <label>
            Mot de passe:
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </label>
          <button type="submit">Créer un compte</button>
        </form>
      )}
    </div>
  );
}

export default SignupForm;