React · Router · Markdown · Filtrage

Liste & Détail

Leçons, exercices, Markdown et navigation

Le pattern liste → détail est le plus courant du web. Aujourd'hui on le maîtrise de A à Z.

Objectifs de la leçon

1. Pattern liste / détail

Page liste avec filtres → page détail avec contenu complet via React Router.

2. Grouper les données

Transformer un tableau plat en structure hiérarchique (semaine / jour).

3. Rendu Markdown

Afficher du contenu Markdown en React avec react-markdown.

4. Breadcrumbs & navigation

Se repérer dans l'arborescence avec des fils d'Ariane.

5. Filtrage et recherche côté client

Filtrer une liste en temps réel sans appel API supplémentaire.

Plan du cours

1

Pattern liste / détail

Page liste avec filtres → page détail avec contenu complet.

2

Grouper par semaine / jour

Transformer un tableau plat en structure hiérarchique avec reduce().

3

Rendu Markdown côté client

react-markdown — afficher, styler, sécuriser.

4

Navigation : breadcrumbs & URL paramétrées

/lessons/:id, retour à la liste, fil d'Ariane.

5

Filtrage et recherche côté client

Recherche live, filtre par catégorie, état vide.

Le pattern Liste / Détail

Le plus courant du web — le maîtriser est essentiel

📋

Page Liste

Toutes les leçons, avec filtres et recherche.

→

clic sur un élément

📄

Page Détail

Contenu complet de la leçon sélectionnée.

Architecture des routes React Router

// main.tsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([

{

path: '/',

element: <Layout />,

children: [

{ path: 'lessons', element: <LessonList /> },

{ path: 'lessons/:id', element: <LessonDetail /> },

{ path: 'exercises', element: <ExerciseList /> },

{ path: 'exercises/:id', element: <ExerciseDetail /> },

],

},

]);

💡 :id est un paramètre dynamique — React Router le met dans useParams().

Page Liste — structure de base

function LessonList() {

const { data: lessons, isLoading } = useQuery({

queryKey: ['lessons'],

queryFn: fetchLessons,

});

if (isLoading) return <Skeleton />;

return (

<ul>

{lessons.map(lesson => (

{lesson.title}

</Link>

</li>

))}

</ul>

);

}

Page Détail — useParams + React Query

function LessonDetail() {

const { id } = useParams<{ id: string }>();

const { data: lesson } = useQuery({

queryKey: ['lessons', id],

queryFn: () => fetchLesson(id!),

});

return (

<div>

<h1>{lesson?.title}</h1>

<p>{lesson?.content}</p>

</div>

);

}

💡 React Query met en cache la leçon — si elle était déjà dans la liste, pas de second appel réseau.

Grouper les données

Tableau plat → structure hiérarchique

Avant — tableau plat

{ id: 1, week: 1, title: "Variables" }

{ id: 2, week: 1, title: "Fonctions" }

{ id: 3, week: 2, title: "Classes" }

{ id: 4, week: 2, title: "OOP" }

Après — groupé par semaine

Semaine 1

→ Variables, Fonctions

Semaine 2

→ Classes, OOP

Grouper avec reduce()

function groupBy<T>(

items: T[],

key: keyof T

): Record<string, T[]> {

return items.reduce((acc, item) => {

const groupKey = String(item[key]);

if (!acc[groupKey]) acc[groupKey] = [];

acc[groupKey].push(item);

return acc;

}, {} as Record<string, T[]>);

}

const grouped = groupBy(lessons, 'week');

// { "1": [...], "2": [...] }

💡 Object.entries(grouped) pour itérer sur chaque groupe dans le rendu.

Rendu de la liste groupée

const grouped = useMemo(

() => groupBy(lessons ?? [], 'week'),

[lessons]

);

return (

<div>

{Object.entries(grouped).map(([week, items]) => (

<h2>Semaine {week}</h2>

{items.map(lesson => (

))}

</section>

))}

</div>

);

⚡ useMemo évite de recalculer le groupement à chaque rendu — indispensable si la liste est grande.

Rendu Markdown en React

Le format standard pour les contenus pédagogiques

Source Markdown

# Les variables

En JS, on déclare avec

`let` ou `const`.

```js

const x = 42;

```

Rendu HTML

Les variables

En JS, on déclare avec let ou const.

const x = 42;

Installer et utiliser react-markdown

1️⃣ Installation

npm install react-markdown

2️⃣ Utilisation de base

import Markdown from 'react-markdown';

function LessonContent({ content }: { content: string }) {

return <Markdown>{content}</Markdown>;

}

✅ react-markdown convertit la string Markdown en éléments React — pas de dangerouslySetInnerHTML.

Styler le Markdown avec des composants

<Markdown

components={{

h1: ({ children }) => (

{children}

</h1>

),

code: ({ children }) => (

{children}

</code>

),

}}

>

{content}

</Markdown>

💡 Chaque balise HTML peut être remplacée par un composant React — contrôle total du style.

⚠️ Sécurité : le Markdown non sanitisé est une faille XSS

Si le contenu Markdown vient d'un utilisateur, il peut contenir du HTML malveillant.

❌ Dangereux

// Du HTML brut dans le Markdown

✅ Sécurisé avec rehype-sanitize

import rehypeSanitize from 'rehype-sanitize';

<Markdown

rehypePlugins={[rehypeSanitize]}

>{content}</Markdown>

🔒 Règle : si le contenu vient d'une API ou d'un utilisateur, toujours utiliser rehype-sanitize.

Navigation : Breadcrumbs

Aider l'utilisateur à se repérer dans l'arborescence

Accueil / Leçons / Les Variables

L'utilisateur sait exactement où il est, et peut naviguer en un clic.

Implémenter les breadcrumbs

interface BreadcrumbItem {

label: string;

to?: string;

}

function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {

return (

{items.map((item, i) => (

{i > 0 && <span>/</span>}

{item.to ? <Link to={item.to}>{item.label}</Link>

: <span>{item.label}</span>}

</span>

))}

</nav>

);

}

Breadcrumbs dans la page Détail

function LessonDetail() {

const { id } = useParams();

const { data: lesson } = useQuery(...);

return (

<div>

<Breadcrumb items={[

{ label: 'Accueil', to: '/' },

{ label: 'Leçons', to: '/lessons' },

{ label: lesson?.title ?? '...' },

]} />

<h1>{lesson?.title}</h1>

<Markdown>{lesson?.content}</Markdown>

</div>

);

}

Filtrage & Recherche côté client

Réactif, immédiat, sans appel réseau

🔍

Recherche textuelle

Filtrer par titre ou contenu.

🏷️

Filtre par catégorie

Semaine, type, difficulté.

📭

État vide

"Aucune leçon trouvée."

Implémenter le filtrage

function LessonList() {

const [search, setSearch] = useState('');

const [week, setWeek] = useState<number | null>(null);

const { data: lessons } = useQuery(...);

const filtered = useMemo(() => {

return (lessons ?? []).filter(l => {

const matchSearch = l.title.toLowerCase()

.includes(search.toLowerCase());

const matchWeek = week === null || l.week === week;

return matchSearch && matchWeek;

});

}, [lessons, search, week]);

// ...

}

UI : barre de recherche + filtres

return (

<div>

<input

type="text"

placeholder="Rechercher une leçon..."

value={search}

onChange={e => setSearch(e.target.value)}

/>

{filtered.length === 0

? <p>Aucune leçon trouvée.</p>

: filtered.map(l => <LessonCard key={l.id} lesson={l} />)}

</div>

);

✅ L'état vide est obligatoire — toujours prévoir le cas "aucun résultat".

Côté client vs côté serveur

Côté client ✅

OK pour < 1 000 éléments

✅ Instantané, pas de latence réseau

✅ Simple à implémenter

✅ Fonctionne hors ligne

❌ Toutes les données sont chargées

Côté serveur 🚀

Nécessaire au-delà de 1 000 éléments

✅ Seules les données filtrées sont envoyées

✅ Scalable

❌ Un appel API par recherche

❌ Plus complexe (debounce, états)

💡 Pour les leçons d'un bootcamp (< 200 éléments), le filtrage côté client est parfait.

Pièges courants à éviter

❌ Dupliquer les données entre liste et détail

→ Utiliser le cache React Query : queryKey: ['lessons', id] réutilise les données déjà chargées.

❌ Oublier les états vides et les erreurs

if (isLoading) return <Skeleton />;

if (isError) return <ErrorMessage />;

if (!lessons?.length) return <EmptyState />;

❌ Markdown non sanitisé = faille XSS

→ Toujours ajouter rehypePlugins={[rehypeSanitize]} si le contenu vient d'une API ou d'un utilisateur.

Vue d'ensemble : architecture complète

/lessons

React Query fetch → groupBy(week) → rendu des sections → barre de recherche + filtre semaine

/lessons/:id

useParams(id) → React Query fetch → Breadcrumb → <Markdown> + rehype-sanitize → bouton retour

React Router

Navigation & params

React Query

Cache & états

react-markdown

Contenu riche

Points clés à retenir

🗺️ Le pattern liste/détail est le plus courant du web

URL paramétrée /lessons/:id + useParams() + React Query — c'est la base.

📦 Grouper côté client est simple avec reduce()

Plus simple que de demander une API différente — et useMemo évite les recalculs.

📝 Markdown = format standard pour les contenus pédagogiques

react-markdown + rehype-sanitize pour un rendu sûr et stylé.

🔍 Filtrage côté client OK pour < 1 000 éléments

Au-delà, déléguer au serveur avec une query paramétrée.

À retenir !

useParams()

Récupérer l':id depuis l'URL

groupBy + reduce()

Tableau plat → structure hiérarchique

Rendu sûr avec rehype-sanitize

Breadcrumb

Composant de navigation contextuelle

Toujours prévoir : loading · erreur · état vide

Exercices pratiques

1. Page liste de leçons

Implémenter LessonList : fetch via React Query, rendu des cartes, lien vers la page détail.

2. Grouper par semaine

Écrire la fonction groupBy() et l'utiliser pour afficher les leçons section par section.

3. Page détail avec Markdown

Afficher le contenu d'une leçon avec react-markdown + breadcrumbs + bouton retour.

4. Recherche et filtres

Ajouter une barre de recherche par titre et un filtre par semaine avec état vide.

Questions ?

Liste · Détail · Markdown · Breadcrumbs · Filtrage

Le pattern liste/détail est partout.

Maîtrisez-le une fois, et vous pouvez construire n'importe quelle application de contenu.