ReactJS est une bibliothèque JavaScript open-source et gratuite développée par Facebook, utilisée pour construire des interfaces utilisateurs dynamiques et interactives.

ReactJS est utilisé pour le front-end.

ReactJS est conçu pour simplifier le développement d’applications web interactives.

React utilise un DOM virtuel pour optimiser le rendu des éléments sur la page et rend l’affichage des modifications des éléments de la page plus rapides. Plutôt que de mettre à jour directement le DOM réel (ce qui est coûteux), React met à jour d’abord une version virtuelle et synchronise les changements nécessaires, rendant les applications plus rapides.

De plus les commandes de modifications en Javacript sont longues (par ex : Document.getElementsByClassName). C’est une des raisons pour lesquelles des bibliothèques de commandes ont été créées, comme la plus populaire qui a été jQuery.

React repose sur une philosophie fondamentale qui définit sa conception et son fonctionnement. Cette philosophie a été soigneusement pensée pour offrir une expérience de développement fluide, favoriser la réutilisabilité du code et améliorer les performances des applications web. Dans cette section, nous explorerons les principes-clés qui font la puissance de React.

a. Composants : l’unité de base

Ce sont les éléments fondamentaux qui définissent l’interface utilisateur. Chaque composant encapsule à la fois la logique et la vue de sa partie spécifique de l’interface. Cette approche modulaire permet de diviser une application en blocs réutilisables.

L’utilisation de composants rend également le code plus lisible et compréhensible, car chaque composant est une abstraction autonome qui peut être aisément manipulée et testée indépendamment. Les composants peuvent être imbriqués les uns dans les autres pour former des interfaces complexes, favorisant ainsi une conception déclarative de l’interface utilisateur.

b. Réactivité : mise à jour efficace de l’interface utilisateur

Un autre principe essentiel de React est sa réactivité. Lorsque l’état d’un composant change, React met automatiquement à jour l’interface utilisateur pour refléter ces modifications. Avant de mettre à jour directement le DOM avec les méthodes proposées par le navigateur, React utilise le DOM virtuel.

Lorsqu’un composant doit être mis à jour, React compare cette version avec l’ancienne. En analysant les différences entre les deux versions, React détermine les changements réels à appliquer dans le DOM du navigateur, en minimisant ainsi les manipulations du DOM réel. Dans les faits, nous avons besoin d’une partie spécifique de React : ReactDOM.

c. Composition : assemblage de composants réutilisables

React encourage la composition plutôt que l’héritage. Cela signifie que plutôt que de chercher à hériter des fonctionnalités d’autres composants, nous devrions les assembler en utilisant des compositions.

Nous allons donc principalement assembler des composants et React ne se soucie pas de la manière dont nous allons découper notre code. Il y a tout de même des bonnes pratiques et nous allons les aborder dans les chapitres suivants.

d. Une approche déclarative

Au lieu de manipuler directement le DOM pour mettre à jour l’interface utilisateur, nous décrivons simplement le « quoi » et React se charge du « comment ».

En utilisant JSX, une syntaxe de balisage similaire à l’HTML, nous pouvons décrire la structure de l’interface utilisateur de manière déclarative. React prend ensuite en charge la création et la mise à jour du DOM en fonction des changements d’état.

Cette approche déclarative rend le code plus lisible, maintenable et prévisible. Elle facilite également la recherche d’erreurs et le débogage, car la logique et la vue sont clairement séparées.

Ce sont les principes fondamentaux de React qui guident sa conception et son fonctionnement. En mettant l’accent sur les composants, la réactivité, la composition et l’approche déclarative, React offre une démarche puissante et intuitive pour la création d’interfaces utilisateur.

React ne vient pas tout seul, il a besoin d’une plateforme et d’autre bibliothèques pour fonctionner

• Webpack est un outil de construction de modules JavaScript open-source. Il sert à regrouper les fichiers et les ressources d’une application (HTML, CSS, JavaScript, images, etc.) en un ou plusieurs fichiers optimisés pour le déploiement.
  Il transforme également des fichiers SCSS ou TypeScript en CSS ou JavaScript standard. Et aussi : Minification (réduction de la taille des fichiers), Compression des images.
  

• Babel Transpile le JavaScript moderne (ES6+) en une version compatible avec les anciens navigateurs.

• ESLint Un outil de linting pour détecter et corriger automatiquement les erreurs et les mauvaises pratiques dans le code

• PostCSS Permet de transformer et d’optimiser le CSS avec des plugins comme Autoprefixer (ajout automatique de préfixes pour la compatibilité entre navigateurs).

• Environment Variables Prise en charge intégrée des fichiers .env pour gérer les variables d’environnement.

• Fast Refresh Fournit une expérience de rechargement rapide et fluide pendant le développement.

• Des modules à ajouter manuellement :
  • React Router : Pour la gestion de la navigation.
  • Redux ou Context API : Pour la gestion de l’état global.
  • Axios ou Fetch API : Pour les requêtes HTTP.

Comment installer plusieurs versions sur un système

Outils de développement React (React Developer Tools)

Pour aider les développeurs à déboguer les applications React, Facebook a créé une extension de navigateur appelée React Developer Tools. Cette extension est actuellement disponible uniquement pour Chrome et Firefox. Une fois installée, elle ajoute deux nouveaux onglets dans les outils de développement du navigateur : Components et Profiler.

Voici comment l’installer et l’utiliser.

Installation des React Developer Tools

Sur Chrome :

1. Ouvrez votre navigateur Chrome et rendez-vous sur le Chrome Web Store : https://chrome.google.com/webstore.

2. Recherchez React Developer Tools dans la barre de recherche.

3. Dans les résultats, sélectionnez l'extension React Developer Tools développée par Facebook.

4. Cliquez sur le bouton Ajouter à Chrome. L’extension sera installée dans votre navigateur.

Premiers pas avec React Developer Tools

1. Ouvrez les Chrome DevTools
   • Si la page que vous visualisez n'utilise pas React, vous ne verrez aucun changement dans les outils.

2. Rendez-vous sur https://reactjs.org dans votre navigateur.
   • Les onglets Components et Profiler apparaîtront dans les outils de développement.

3. Cliquez sur l’onglet Components :
   • Vous verrez une vue en arborescence des composants React utilisés pour créer l'interface utilisateur.

Comprendre la vue Components

• Chaque élément affiché dans l'onglet Components représente un composant React de l'application.

• Composants en production vs en développement :
  • Dans les applications React en production :
    • Les noms des composants sont minifiés pour réduire la taille du fichier.
    • La plupart des fonctionnalités de débogage sont désactivées pour améliorer les performances.
  • Les outils React Developer Tools fonctionnent mieux avec les versions de développement de React, car elles incluent des noms lisibles et toutes les options de débogage.

Exploration et utilisation de React Developer Tools

1. Navigation dans les composants :
   • Cliquez sur un composant dans la vue Components pour voir ses props, son state, et d'autres informations.
   • Utilisez l'outil d’inspection d’éléments (icône en haut à gauche) pour mettre en évidence les composants React directement dans la page.

2. Différence avec l'inspecteur d'éléments du navigateur :
   • L’inspecteur d’éléments du navigateur montre le HTML et les styles du DOM dans le navigateur.
   • L’inspecteur des React Developer Tools montre les composants React qui ont produit ces nœuds DOM.

3. Vue d'ensemble :
   • Pensez à l’onglet Components comme une vue de haut niveau des composants React, tandis que l’inspecteur du navigateur se concentre sur les éléments HTML finaux.

Le Profiler : Analyse des performances

• Fonctionnalité :
  • L'onglet Profiler fournit des informations sur les performances de votre application React.
  • Il montre comment chaque composant React a été rendu et combien de temps cela a pris.
  • Utile pour optimiser les applications React.

• Limitation :
  • Le profiling est désactivé dans la version de production de React. Cela signifie que cet onglet ne sera pas fonctionnel lorsque vous visiterez une page publique utilisant React.

Pour travailler efficacement avec React dans Visual Studio Code, plusieurs extensions peuvent grandement améliorer votre expérience de développement. Voici une liste des extensions incontournables pour React :

1. ES7+ React/Redux/React-Native Snippets

📌 Description :

• Fournit des snippets de code pour React, Redux et React-Native.

• Vous pouvez générer rapidement des composants, des hooks, ou des fonctions avec des raccourcis.

• Exemple : Tapez rafce pour générer un composant fonctionnel avec export.

Installation : Recherchez ES7+ React/Redux/React-Native Snippets dans le Marketplace.

Lien : ES7+ Snippets

2. React Developer Tools

📌 Description :

• Intégration de React DevTools directement dans VS Code.

• Permet de déboguer et d’inspecter l’arbre des composants React.

Installation : Recherchez React Developer Tools dans le Marketplace.

Lien : React Developer Tools

3. Prettier - Code Formatter

📌 Description :

• Formate automatiquement votre code React pour le rendre propre et lisible.

• Compatible avec JSX, CSS-in-JS, et autres fichiers liés à React.

Installation : Recherchez Prettier - Code Formatter.

Lien : Prettier

4. ESLint

📌 Description :

• Analyse le code pour détecter des erreurs de syntaxe ou des mauvaises pratiques.

• Fonctionne parfaitement avec React et aide à maintenir un code de haute qualité.

Installation : Recherchez ESLint.

Lien : ESLint

5. React PropTypes Intellisense

📌 Description :

• Ajoute l’autocomplétion et les suggestions pour les propriétés d’un composant React basé sur ses PropTypes.

Installation : Recherchez React PropTypes Intellisense.

Lien : React PropTypes Intellisense

6. Auto Rename Tag

📌 Description :

• Modifie automatiquement l’étiquette fermante d’un élément JSX si vous changez l’étiquette ouvrante.

Installation : Recherchez Auto Rename Tag.

Lien : Auto Rename Tag

7. Bracket Pair Colorizer

📌 Description :

• Colore les paires d’accolades et de parenthèses pour faciliter la lecture et la compréhension du JSX imbriqué.

Installation : Recherchez Bracket Pair Colorizer.

Lien : Bracket Pair Colorizer

8. Code Spell Checker

📌 Description :

• Vérifie l’orthographe dans les fichiers JSX, utile pour éviter les fautes dans les noms de variables, commentaires ou textes.

Installation : Recherchez Code Spell Checker.

Lien : Code Spell Checker

11. Path IntelliSense

📌 Description :

• Fournit l’autocomplétion pour les chemins d’importation dans vos fichiers React.

Installation : Recherchez Path IntelliSense.

Lien : Path IntelliSense

Dans le dossier du projet

npm install sass --save-dev

• AJOUTER LE CSS

  • créer une arborescence vierge de fichier react et css

Exemple de structure typique d’un projet React

src/
├── components/      # Contient les composants React
├── hooks/           # Contient les hooks personnalisés
│   ├── useAuth.js   # Exemple : gestion de l'authentification
│   ├── useFetch.js  # Exemple : abstrait les appels API
│   ├── useForm.js   # Exemple : gestion des formulaires
│   ├── useTheme.js  # Exemple : gestion des thèmes
├── pages/           # Composants spécifiques à une page
├── utils/           # Fonctions utilitaires réutilisables
├── services/        # Appels API ou logique de backend
└── App.jsx          # Point d'entrée principal

Nous allons réorganiser les fichiers de code pour créer des fichiers par composants pour rendre le projet plus modulaire.

Reprenons la page Home.js

src/
├── hooks/
│   ├── usePersonName.js
│   ├── useColor.js
│   ├── useBoxes.js
├── components/
│   ├── Bonjour.jsx
│   ├── FormCouleur.jsx
│   ├── FormPrenom.jsx
│   ├── CarreList.jsx
│   ├── AjouterCarre.jsx
├── Home.jsx

1. Déclarations des variables et des constantes
   • Placez les variables ou constantes nécessaires pour le composant en haut de la fonction
   • Cela inclut les variables locales, les destructurations des props, et les calculs initiaux.

2. Déclarations des hooks React
   • Placez les hooks comme useState, useEffect, et autres après les variables.
   • Ces hooks doivent être définis dans le corps principal du composant et dans le même ordre à chaque rendu, conformément aux règles des hooks.

3. Fonctions utilitaires ou internes
   • Déclarez les fonctions utilisées dans le composant (ex. : gestionnaires d’événements, transformations de données, etc.).
   • Placez-les après les hooks, mais avant le return.

4. Contenu HTML/JSX
   • Le contenu JSX que le composant retourne doit être placé à la fin dans la section return.

• expliquer ce que font les instructions et que sont les variables

Exemple : On demande à une personne de saisir son nom. Au fur et à mesure qu’elle écrit les lettres, les lettres écrites s’affichent à l’écran. Ici le changement d’état se produit dans le <input> de saisie à chaque saisie (sans qu’il est besoin de faire un bouton “valider” pour récupérer le contenu de l’input).

• Home() = c’est le composant

• ici le “set” setPersonName modifie la valeur de personName quand l'utilisateur modifie le champ input texte.

• onChange={handleInputChange} : Appelle `handleInputChange` lorsque l'utilisateur tape. handleInputChange va activer le “set” setPersonName

function Home() {
	const [personName,setPersonName] = useState('');
	
	const handleInputChange = (event) => {
	  setPersonName(event.target.value);
	};
	
	homeContent = (
		<div className="bonjour">
		
			{/* On a un champ texte et on écoute la modification de ce champ par l'utilisateur */}
		  <div className="formBonjour_prenom">
         <input type="text" onChange={handleInputChange} placeholder="Entrer votre prénom"/>
      </div>
	
			{/* ici one affiche le champ personName mis à jour par le set (setPersonName) */}
		  <div>
		    <h1>Bonjour <span style={{ color: color }}>{personName}</span></h1>
		  </div>
		  

		</div>
	);
	
	return homeContent;
}
export default Home;

Dans notre exemple, nous allons utiliser une valeur qui contient un tableau avec 2 valeurs au lieu d’une simple valeur “nom”. Nous allons récupérer la saisie du nom toujours pareil, mais pour l’affichage au lieu de dire bonjour dans la balise <h1> nous allons définir une variable pour personnaliser cette salutation. Cette salutation sera donnée dans le fichier Home.js. Elle sera mise en variable dans le hook useState pour avoir la possibilité de la modifier plus tard si besoin. Donc maintenant on aura un tableau avec 2 valeurs, le texte de la salutation et le nom de la personne. Le hook ne va modifier dynamiquement que le texte de la personne puisque la salutation est donné dans le fichier Home.js.

• on peut mettre des objets comme valeurs dans le useState

• Pour la modification du tableau, attention en react un changement doit créer une nouvelle version complète de la données : on ne peut pas faire de mutation (prendre un élément et le changer directement comme count++, ou ajouter des éléments avec par exemple numbers.push(4)).
  Ce qui veut dire, dans notre exemple, que l’on ne peut pas demander de modifier uniquement le nom, il faut récupérer le tableau en entier (avec les 2 valeurs salutation et nom) pour mettre à jour le nom. Pour faire cela on utilise la syntaxe
  …nomvaleur qui est le spread operator (...numbers) qui crée un nouveau tableau en récupérant les valeurs initiales du tableau.

• ...personNamepersonalise veut dire : “récupère toutes les propriétés de personName avant la modification

• nom : event.target.value : et change la valeur de nom

const [personName,setPersonName] = useState('');
const [personNamepersonalise,setPersonNamepersonalise] = useState({
	salutation : 'Ave', nom : ''
});

const handleInputChange = (event) =>
  //setPersonNamepersonalise(({nom : event.target.value})); // ne fonctionne pas car efface le contenu du tableau
  setPersonNamepersonalise(() => ({...personNamepersonalise, nom : event.target.value}));
};
homeContent = (
  <div className="bonjour">
  
	  <div className="formBonjour_prenom">
       <input type="text" onChange={handleInputChange} placeholder="Entrer votre prénom"/>
    </div>
  
    <div>
      <h1>Bonjour <span style={{ color: color }}>{personName}</span></h1>
      <h1>{personNamepersonalise.salutation} <span style={{ color: color }}> {personNamepersonalise.nom}</span></h1>
    </div>
    
  </div>
);

return homeContent;

• un composant peut avoir plusieurs hook

• Reprendre le code du projet des couleurs et architecturer la page Home.js avec des fichiers distincts pour le template de la page (Home.js), le hook (usePerson.js) et le composant (Bonjour.js)

• Attention les valeurs initiales sont données dans le template de la page d’accueil, et non dans le hook ou le composant, pour plus de modularité

• Création des 3 fichiers :

useEffect est un Hook de React qui permet d'exécuter du code après le rendu du composant. Il est utilisé pour gérer des effets de bord comme :

• Écouter des événements (scroll, resize, etc.)

• Récupérer des données (API)

• Manipuler le DOM

• Mettre à jour un état en fonction d'une dépendance

Syntaxe de base

useEffect(() => {
  // Code exécuté après le rendu du composant
});

⚠ Problème : Si on l’utilise ainsi, il s'exécutera à chaque rendu, ce qui n'est pas optimal.

Syntaxe de useEffect avec dépendances

useEffect(() => {
    // Code à exécuter
}, [dépendances]);

Les dépendances sont les variables qui déclenchent l'exécution de useEffect

• Quand dépendances change, le code à l’intérieur de useEffect() est ré-exécuté.

• Si dépendances est vide [], l'effet ne s'exécute qu'une seule fois après le premier rendu.

Exemples d'utilisation :

✅ Exécuter du code une seule fois (au montage du composant)

Si on met un tableau vide [] comme dépendance, le useEffect ne s’exécute qu’une seule fois (au componentDidMount en React Classique).

useEffect(() => {
  console.log("Composant monté !");
}, []); // [] = Exécuté une seule fois

💡 Utilisation typique : Charger des données depuis une API.

Exécution unique ([]) pour une requête API

useEffect(() => {
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => console.log(data));
}, [])

Fait la requête API une seule fois après le premier rendu.

Différences entre JS Pur et Reac

✅ Exécuter du code à chaque fois qu'une variable change

Si on met une variable dans le tableau de dépendances, useEffect s'exécutera à chaque changement de cette variable.

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

useEffect(() => {
  console.log(`Le compteur est maintenant à ${count}`);
}, [count]); // Exécuté chaque fois que count change

💡 Utilisation typique : Mettre à jour une donnée quand une autre change.

• L'effet ne s'exécute que si count change.

• Si count ne change pas, useEffect ne s'exécute pas.

✅ Exécuter un effet avec nettoyage (cleanup)

Si l'effet ajoute un événement, il est important de le nettoyer pour éviter des problèmes de performance.

useEffect(() => {
  const handleScroll = () => {
    console.log("L'utilisateur fait défiler la page !");
  };

  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

💡 Pourquoi le return () => {...} ?

👉 Nettoie l'effet quand le composant est démonté pour éviter des fuites de mémoire.

🔴 Mauvaise utilisation : Sans tableau de dépendances

Si on ne met pas de tableau [], useEffect s'exécutera à chaque rendu, ce qui peut causer des ralentissements.

useEffect(() => {
  console.log("Je me lance à chaque rendu !");
});

❌ À éviter si on ne veut pas de re-rendu infini.

Un bloc où l’on scroll horizontalement pour faire défiler le contenu, ici des images. Les images qui n’apparaissent pas entièrement (ou à 90%) sont opacifié pour inciter l’internaute à avoir le geste du scroll pour aller voir.

On peut faire aussi un défilement horizontale avec uniquement du CSS, ou du CSS et du Javascript (si besoin de Drag Scroll)

Explication du code

1️⃣ Affiche un slider horizontal d’images.

2️⃣ Détecte quelles images sont partiellement visibles (moins de 90%).

3️⃣ Applique une classe .faded sur ces images pour ajouter une transparence progressive

4️⃣ Anime le défilement horizontal avec framer-motion

useState → Gère l’état des images partiellement visibles.

useRef → Référence le conteneur du défilement.

useEffect → Exécute du code lorsqu’un composant est monté (ici, pour gérer la détection de visibilité)

motion (de framer-motion) → Permet d’animer le conteneur.

import React, { useState, Fragment, useRef, useEffect } from "react";
import { motion } from "framer-motion";

Charge les 7 images depuis le dossier assets/images/ et les stocke dans un tableau images.

import image1 from "./../assets/images/image1.webp";
import image2 from "./../assets/images/image2.webp";
import image3 from "./../assets/images/image3.webp";
import image4 from "./../assets/images/image4.webp";
import image5 from "./../assets/images/image5.webp";
import image6 from "./../assets/images/image6.webp";
import image7 from "./../assets/images/image7.webp";

const images = [
    image1, image2, image3, image4, image5, image6, image7
];

Déclaration du composant Exercice5

function Exercice5() {

✅ scrollRef :

• Stocke une référence vers le conteneur du défilement horizontal.

• useRef permet d'accéder directement à un élément du DOM sans avoir à re-render le composant. Évite des re-renders inutiles, car useRef ne déclenche pas de mise à jour du composant.

• <motion.div ref={scrollRef} className="horizontal-scroll-content"> associe scrollRef au conteneur <motion.div>.

• scrollRef.current contiendra une référence directe à cet élément DOM

• Sans useRef, il faudrait utiliser document.querySelector, ce qui n'est pas optimal en React

fadedIndexes → Un tableau d’index des images qui doivent être transparentes.

// déclaration des hook
const scrollRef = useRef(null);
const [fadedIndexes, setFadedIndexes] = useState([]);

useEffect pour détecter la visibilité des images

✅ handleScroll :

• Récupère les dimensions des images par rapport au conteneur visible.

• Calcule le pourcentage visible de chaque image (visibilityRatio).

• Ajoute à newFadedIndexes toutes les images qui sont visibles à moins de 90%.

✅ useEffect :

• Déclenche handleScroll au montage du composant.

• Ajoute un écouteur scroll sur le conteneur.

• Nettoie l'écouteur lors du démontage.

const container = scrollRef.current; // accès au DOM direct ici scrollRef contient la référence de motion.div
const children = Array.from(container.children);

• container.children retourne une HTMLCollection, soit les div

<motion.div class="horizontal-scroll-content">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
</motion.div>

getBoundingClientRect()

Cette méthode Javascript retourne la position et la taille d'un élément par rapport à la fenêtre (viewport).

📌 getBoundingClientRect() renvoie un objet contenant ces propriétés :

• rect.top → Distance entre le haut de l'élément et le haut de la fenêtre.

• rect.left → Distance entre la gauche de l'élément et la gauche de la fenêtre.

• rect.right → Distance entre la droite de l'élément et la gauche de la fenêtre.

• rect.bottom → Distance entre le bas de l'élément et le haut de la fenêtre.

• rect.width → Largeur de l'élément.

• rect.height → Hauteur de l'élément.

const rect = child.getBoundingClientRect();

💡 IntersectionObserver peut-etre utilisé à la place de getBoundingClientRect

rect.right : distance entre la droite de l’image et le bord de la fenêtre

rect.left : distance entre la gauche de l’image et le bord de la fenêtre

Ce code permet d'écouter l'événement scroll sur un élément spécifique et de le nettoyer correctement lors du démontage du composant.

À chaque défilement horizontal, la fonction handleScroll() est appelée.

Le return est une fonction de nettoyage qui s'exécute quand le composant est démonté.

Si on ne retire pas l’écouteur, il restera actif même si le composant n'existe plus, ce qui peut causer :

• Des bugs (exécuter du code sur un élément non monté).

• Des fuites mémoire (le composant garde en mémoire une référence inutile).

      scrollRef.current.addEventListener("scroll", handleScroll);
      return () =>
        scrollRef.current.removeEventListener("scroll", handleScroll);

useEffect(() => {
  const handleScroll = () => {
  
    const container = scrollRef.current; // accès au DOM direct ici scrollRef contient la référence de motion.div
    const children = Array.from(container.children);

    let newFadedIndexes = [];

    children.forEach((child, index) => {
      const rect = child.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();

      const visibleWidth =
        Math.min(rect.right, containerRect.right) -
        Math.max(rect.left, containerRect.left);
      const cardWidth = rect.width;
      const visibilityRatio = visibleWidth / cardWidth;

      // Appliquer la transparence uniquement si moins de 90% de la carte est visible
      if (visibilityRatio < 0.9) {
        newFadedIndexes.push(index);
      }
    });

    setFadedIndexes(newFadedIndexes);
  };

  handleScroll();
  scrollRef.current.addEventListener("scroll", handleScroll);
  return () => scrollRef.current.removeEventListener("scroll", handleScroll);
}, []);

Rendu du composant

motion.div → Gère l’animation du défilement horizontal.

Parcourt images et affiche chaque image dans une carte (<div className="card">).

Ajoute la classe .faded aux images qui sont dans fadedIndexes, ce qui applique une transparence CSS.

Animer l'apparition d'un div

Ajout d’un identifiant unique à chaque carré et un état d'animation.

Utilisation de l'index comme identifiant au lieu d'un Date.now(), mais avec précaution parce que l'index change si des éléments sont supprimés ou réorganisés, ce qui peut casser l'animation. Mais on ne modifie pas l'ordre des carrés, l'index reste une solution acceptable.

Hook react_app_test/src/hooks/useBoxes.js

• on récupère l’état de boxes : setBoxes((prevBoxes) => { car boxes pourrait ne pas être à jour au moment de l'exécution. React ne met pas immédiatement à jour l’état (setState est asynchrone).

javascript
CopierModifier
let boxes = ["red", "blue"];
boxes.push("green");
console.log(boxes); // ["red", "blue", "green"] ✅ La mise à jour est immédiate.

javascript
CopierModifier
const [boxes, setBoxes] = useState(["red", "blue"]);

setBoxes([...boxes, "green"]);
console.log(boxes); // ["red", "blue"] ❌ PAS À JOUR immédiatement !

javascript
CopierModifier
useEffect(() => {
    console.log("Nouveau state:", boxes);
}, [boxes]);

• calcule l’index de la box dans le hook pour modifier dans le composant la class de la box qui a cet index

const useBoxes = (color) => {

	const [animateBoxes, setAnimateBoxes] = useState([]); // Gère l'animation des carrés
	    const addBox = () => {
        setBoxes((prevBoxes) => {
            const newBoxes = [...prevBoxes, color];
            const newIndex = newBoxes.length - 1; // On prend l'index du dernier élément ajouté
            setAnimateBoxes([...animateBoxes, newIndex]);

            setTimeout(() => {
                setAnimateBoxes((prev) => prev.filter(index => index !== newIndex));
            }, 500); // Retire l'effet après l'animation (500ms)

            return newBoxes;
        });
        setShowMessage(true); 
    };

Composant react_app_test/src/components/CarreList.js

<div className={`carreList`}>
                {boxes.map((boxColor, index) => (
                    <div className="carre" key={index}>
                        <div className={`carre ${animateBoxes.includes(index) ? 'fade-in' : ''}`} style={{backgroundColor: boxColor,}} onClick={() => document.getElementById(`color-picker-${index}`).click()}></div>
                        <input id={`color-picker-${index}`} type="color" value={boxColor} onChange={(event) => changeBoxColor(index, event.target.value)} style={{display: 'none'}}/>
                    </div>
                ))}
            </div>

Icone lucide

// pour installer
npm install lucide-react

// import de l'icone dans le composant
import { Menu, X } from "lucide-react";

react_app_test/src/components/HamburgerMenu.js

  const [isOpen, setIsOpen] = useState(false);
  
  // Fonction pour fermer le menu
  const closeMenu = () => setIsOpen(false);

• bouton pour ouvrir ou fermer le menu
  • sur le clic on inverse le statut (à la manière d’un toggle)
  • <X size={24} /> ajout de l’icone Lucide

<button className="menu-button" onClick={() => setIsOpen(!isOpen)}>
    {isOpen ? <X size={24} /> : <Menu size={24} />}
</button>

• si statut “isOpen” est à true on écrit le div dans le DOM. Et si statut est false, le div ne sera pas présent dans le DOM

{isOpen && (
    <div className="menu-dropdown">
    <ul>
        <li><Link to="/" onClick={closeMenu}>Accueil</Link></li>
        <li><Link to="/mentions-legales" onClick={closeMenu}>Mentions légales</Link></li>
        <li><Link to="/exercice-1" onClick={closeMenu}>Exercice 1</Link></li>
        <li><Link to="/exercice-2" onClick={closeMenu}>Exercice 2</Link></li>
        <li><Link to="/exercice-3" onClick={closeMenu}>Exercice 3</Link></li>
        <li><Link to="/exercice-4" onClick={closeMenu}>Exercice 4</Link></li>
        <li><Link to="/exercice-5" onClick={closeMenu}>Exercice 5</Link></li>
        <li><Link to="/exercice-6" onClick={closeMenu}>Exercice 6</Link></li>
    </ul>
    </div>
)}

• Dans le menu on met une action qui ferme le menu si l’internaute clique sur un lien

<li><Link to="/" onClick={closeMenu}>Accueil</Link></li>

• backdrop
  • Quand le menu est ouvert, c’est “couvrir” le reste de la page avec une couche au-dessous du menu hamburger ouvert pour avoir ce div qui sert de couverture et agir dessus : ici si on clique dessus cela ferme le menu hamburger

  {isOpen && <div className="menu-backdrop" onClick={closeMenu}></div>}

• Il faut installer React Router
  • React Router utilise un routage côté client (Single Page Application - SPA).
    • React Router associe chaque URL à un composant React défini dans vos routes.
    • Les routes (par exemple, / ou /mentions-legales) ne correspondent pas directement à des fichiers comme dans un serveur traditionnel.
  • npm install react-router-dom

• Configurez les routes dans un fichier pour les routes (AppRoutes.js)

Les fichiers Home.js et Legal.js sont importés dans le fichier où les routes sont définies. Ces fichiers ne sont pas “retrouvés” directement à partir des liens, mais sont rendus dynamiquement lorsque l’URL correspond à une route.

///////////////////////////
// VERSION 1 (de base)
///////////////////////////

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import Legal from '../pages/Legal';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} /> {/* Page d'accueil */}
      <Route path="/mentions-legales" element={<Legal />} />
    </Routes>
  );
}

export default AppRoutes;

///////////////////////////
// VERSION 2 (optimisé)
///////////////////////////

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import Legal from '../pages/Legal';

function AppRoutes() {

		// tableau contenant les objets routes
    const routesConfig = [
        { path: "/", element: <Home /> },
        { path: "/mentions-legales", element: <Legal /> },
    ];


    const routes = (
    <Routes>
        {routesConfig.map((route, index) => (
            <Route key={index} path={route.path} element={route.element} />
        ))}
    </Routes>
    );

    return routes;
}

export default AppRoutes;

• Ajoutez des liens pour naviguer entre les pages
  • Dans le composant Header, ajoutez des liens vers vos différentes pages.

  import React from 'react';
  import { Link } from 'react-router-dom';
  
  function Header() {
    return (
      <header>
        <nav>
          <ul>
            <li><Link to="/">Accueil</Link></li>
            <li><Link to="/mentions-legales">Mentions légales</Link></li>
          </ul>
        </nav>
      </header>
    );
  }
  
  export default Header;

Les routes protégées (ou protected routes) sont des routes dans une application web qui ne sont accessibles qu’à des utilisateurs authentifiés ou ayant les permissions requises. Si un utilisateur tente d’accéder à une route protégée sans les autorisations nécessaires, il est généralement redirigé vers une autre page, comme une page de connexion.

Dans une application React classique tout le site est chargé d’un coup dans le navigateur:

• Lorsque vous déployez une application React, des outils comme Webpack ou Vite regroupent tout le code (JavaScript, CSS, images) en fichiers optimisés.

• Ces fichiers sont généralement chargés au départ, ce qui peut inclure tous les composants de l’application, même ceux qui ne sont pas immédiatement visibles.

• Le navigateur charge une seule page HTML (souvent index.html) au départ.

• Ensuite, toute la logique et l’interface utilisateur sont gérées par React côté client.

• React Router ne recharge pas la page entière lorsque vous naviguez, mais met à jour l’URL et rend dynamiquement les composants associés à la nouvelle route.

Premier chargement plus long :

• Si tout le site est chargé dans un gros bundle, le temps de chargement initial peut être plus long.
  • Cela peut être résolu avec le lazy loading et la division du code (code splitting)

SEO moins efficace par défaut :

• Dans une SPA, tout le contenu est généré côté client, ce qui peut poser problème pour les moteurs de recherche.
  • Solution : Utiliser un rendu côté serveur (SSR) avec un framework comme Next.js.

• Si vous configurez le “code splitting” ou le “lazy loading”, React ne charge que les composants nécessaires pour la route actuelle.

• Les autres composants seront chargés à la demande, uniquement lorsque l’utilisateur navigue vers une route qui les nécessite.

• Pour optimiser le chargement, vous pouvez charger les composants uniquement lorsque leur route est visitée.

• React.lazy charge les composants Home et About seulement quand ils sont nécessaires.

• Si l’utilisateur ne visite jamais /about, le fichier JavaScript correspondant ne sera jamais chargé.

• La balise <Suspense> affiche un indicateur de chargement (Chargement...) pendant le téléchargement des composants.

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// Lazy loading des composants
const Home = React.lazy(() => import('./pages/Home'));
const Legal = React.lazy(() => import('./pages/Legal'));

function AppRoutes() {
  return (
    <Router>
      <Suspense fallback={<div>Chargement...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/mentions-legales" element={<Legal />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default AppRoutes;