React¶

Générer un projet en React¶

Pour la première partie du cours, nous allons utiliser Vite comme moteur de nos applications React.

Voici comment générer l’application :

1. Dans le dossier où vous désirez créer l’application, exécutez la commande de création d’application :
   console

   npm create vite@latest
   

2. Entrez le nom de votre projet :
   console

   > npx
   > "create-vite"
   │
   ◆  Project name:
   │  votre-nom-de-projet
   

3. Choisir React :
   console

   ◆  Select a framework:
   │  ○ Vanilla
   │  ○ Vue
   │  ● React
   │  ○ Preact
   │  ○ Lit
   │  ○ Svelte
   │  ○ Solid
   │  ○ Qwik
   │  ○ Angular
   │  ○ Marko
   │  ○ Others
   └
   

4. Choisir Typescript :
   console

   ◆  Select a variant:
   │  ● TypeScript
   │  ○ TypeScript + React Compiler
   │  ○ TypeScript + SWC
   │  ○ JavaScript
   │  ○ JavaScript + React Compiler
   │  ○ JavaScript + SWC
   │  ○ React Router v7 ↗
   │  ○ TanStack Router ↗
   │  ○ RedwoodSDK ↗
   │  ○ RSC ↗
   └
   

5. Choisir No :
   console

   ◆  Use rolldown-vite (Experimental)?:
   │  ○ Yes
   │  ● No
   └
   

6. Choisir Yes :
   console

   ◆  Install with npm and start now?
   │  ● Yes / ○ No
   └
   

React Developer Tools¶

React Developer Tools est un plugiciel dans Chrome pour aider au débogage de vos applications React.

Pour l'installer : React Developer Tools pour Chrome

Le JSX¶

Les développeurs de React ont développé un language qui permet combiner le JavaScript et le HTML en un.

function Exemple() {
  return (
    <div>
      <h1>Bonjour!</h1>
      <p>Ceci est du JSX.</p>
    </div>
  );
}

Expressions JavaScript dans le JSX¶

Les accolades {} permettent d'insérer n'importe quelle expression JavaScript dans le JSX.

function Exemple() {
  const nom = "Alice";
  const age = 30;

  return (
    <div>
      <p>Nom : {nom}</p>
      <p>Âge : {age}</p>
      <p>Année de naissance : {2025 - age}</p>
    </div>
  );
}

Différences entre JSX et HTML¶

function Exemple() {
  return (
    <div className="conteneur">
      <label htmlFor="prenom">Prénom :</label>
      <input id="prenom" type="text" />
    </div>
  );
}

Notez que le <div> utilise la variable className au lieu de class comme dans le HTML ordinaire. C'est une limitation du JSX, car class est un mot clé réservé à JavaScript.

Un seul élément racine¶

Une composante React doit retourner un seul élément racine. Si vous avez besoin de regrouper plusieurs éléments sans ajouter un nœud HTML supplémentaire, utilisez un Fragment (<>).

function Exemple() {
  return (
    <>
      <h1>Titre</h1>
      <p>Paragraphe</p>
    </>
  );
}

Le rendu conditionnel¶

Le rendu conditionnel permet d'afficher ou de masquer des éléments selon une condition, comme un if en JavaScript.

Avec un if¶

La manière la plus simple est d'utiliser un if classique pour retourner du JSX différent selon la condition.

function Message({ estConnecte }: { estConnecte: boolean }) {
  if (estConnecte) {
    return <p>Bienvenue, vous êtes connecté!</p>;
  }
  return <p>Veuillez vous connecter.</p>;
}

Avec l'opérateur ternaire¶

L'opérateur ternaire ? : permet d'écrire la condition directement dans le JSX.

function Message({ estConnecte }: { estConnecte: boolean }) {
  return (
    <p>
      {estConnecte ? "Bienvenue, vous êtes connecté!" : "Veuillez vous connecter."}
    </p>
  );
}

Avec l'opérateur &&¶

L'opérateur && est utile pour afficher un élément uniquement si la condition est vraie, sans avoir de cas alternatif.

function Notification({ nombreMessages }: { nombreMessages: number }) {
  return (
    <div>
      <h1>Boîte de réception</h1>
      {nombreMessages > 0 && (
        <p>Vous avez {nombreMessages} nouveau(x) message(s).</p>
      )}
    </div>
  );
}

Le rendu de listes¶

Pour afficher une liste d'éléments, on utilise la méthode .map() de JavaScript pour transformer un tableau de données en tableau d'éléments JSX.

function ListeFruits() {
  const fruits = ["Pomme", "Banane", "Orange"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

La prop key¶

Chaque élément d'une liste doit avoir une prop key unique. Elle permet à React d'identifier les éléments et d'optimiser les mises à jour de l'interface.

interface Produit {
  id: number;
  nom: string;
  prix: number;
}

function ListeProduits({ produits }: { produits: Produit[] }) {
  return (
    <ul>
      {produits.map((produit) => (
        <li key={produit.id}>
          {produit.nom} — {produit.prix} $
        </li>
      ))}
    </ul>
  );
}

Filtrer une liste¶

On peut combiner .filter() et .map() pour n'afficher que les éléments qui correspondent à une condition.

function ListeProduitsEnSolde({ produits }: { produits: Produit[] }) {
  return (
    <ul>
      {produits
        .filter((produit) => produit.prix < 10)
        .map((produit) => (
          <li key={produit.id}>
            {produit.nom} — {produit.prix} $
          </li>
        ))}
    </ul>
  );
}

Programmer React avec des fonctions¶

Utiliser des fonctions au lieu des classes en React est la manière officielle de programmer dans cet environnement.

import './Personnage.css';

const Personnage = () => {
  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placecats.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <div className="container">
      <div className="photo">
        <img src={photoDuPersonnage} />
      </div>
      <div className="info">
        <p>{nomDuPersonnage}</p>
        <p className="addresse">{adresseDuPersonnage}</p>
      </div>
    </div>
  );
};

export default Personnage;

.container {
  max-width: 600px;
  width: 400px;
  margin: 0 auto;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo {
  text-align: center;
  margin-bottom: 20px;
}

.photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.info {
  margin-bottom: 20px;
}

.address {
  font-style: italic;
}

import './App.css';
import Personnage from '../Personnage';

function App() {
  return (
    <>
      <Personnage />
    </>
  );
}

export default App;

Passage de paramètres avec les props¶

1. Définir la liste des paramètres dans une interface
2. L’ajouter comme props à la fonction de la composante
3. Utiliser les paramètres lors de l’instanciation de la composante

import "./Personnage.css";

interface IPersonnageProps {
  nom: string;
  photo: string;
  adresse: string;
}

const Personnage = (props: IPersonnageProps) => {
  return (
    <div className="container">
      <div className="photo">
        <img src={props.photo} />
      </div>
      <div className="info">
        <p>{props.nom}</p>
        <p className="addresse">{props.adresse}</p>
      </div>
    </div>
  );
};

export default Personnage;

import "./App.css";
import Personnage from "../Personnage";

function App() {
  const personnage = {
    nom: "Fluffy McChat",
    photo: "https://placecats.com/300/300",
    adresse: "123 Ave Des Félins",
  };

  const nomDuPersonnage = "Fanta le Chat";
  const photoDuPersonnage = "https://placecats.com/300/300";
  const adresseDuPersonnage = "12123 Ave Des Félins";

  return (
    <>
      <Personnage {...personnage} key={1} />
      <Personnage
        nom={nomDuPersonnage}
        photo={photoDuPersonnage}
        adresse={adresseDuPersonnage}
        key={2}
      />
    </>
  );
}

export default App;