R

Introduction — Séance 5

Bienvenue à la dernière séance ! Vous allez finaliser votre application Kana tout en découvrant des outils et patterns qui vous seront utiles tout au long de votre carrière.

Vue d'ensemble

Cette séance est différente des précédentes :

  • Moins de nouveaux concepts théiques
  • Plus de pratique sur votre propre projet
  • Focus sur le workflow avec l'IA
  • Finalisation et déploiement de l'application Kana

Objectif de la séance

À la fin de cette séance, vous aurez amélioré votre application Kana avec des custom hooks, optimisé certains rendus, et déployé l'app en production sur Vercel.

Récapitulatif du cours

Avant de commencer, récapitulons ce que vous avez appris :

Séance 1 : JavaScript ES6+

  • Variables et fonctions (const, let, arrow functions)
  • Méthodes de tableaux (.map(), .filter(), .reduce())
  • Destructuration et spread operator
  • Async/await et Promises

Séance 2 : Introduction à React

  • JSX et composants
  • Props et composition
  • Listes avec .map() et rendu conditionnel
  • Projet Kana : affichage des tables hiragana et katakana

Séance 3 : Interactivité

  • useState pour la gestion d'état
  • Événements et handlers
  • Formulaires contrôlés
  • Projet Kana : quiz interactif avec score

Séance 4 : Effets et Routing

  • useEffect pour les side effects
  • React Router pour la navigation
  • Gestion du cycle de vie
  • Projet Kana : navigation entre mode étude et mode quiz

Ce que vous allez apprendre aujourd'hui

1. Workflow avec l'IA

  • Utiliser l'IA comme assistant de développement
  • Écrire des prompts efficaces avec contexte et code existant
  • Valider et comprendre le code généré

2. Custom Hooks

  • Créer des hooks pour réutiliser la logique stateful
  • Exemples : useQuiz, useLocalStorage

3. Autres Hooks

  • useRef pour accéder au DOM (auto-focus sur l'input du quiz)
  • useMemo et useCallback — notions essentielles à connaître

4. Débogage

  • React DevTools
  • Erreurs courantes et solutions

5. Déploiement

  • Build de production
  • Déploiement sur Vercel

6. Projet Fil Rouge — Séance 5

  • Finalisation de l'application Kana
  • Rendu final sur Moodle

Format de la séance

Partie 1 : Théorie (1h40)

  • Workflow avec l'IA (40 min)
  • Custom hooks (40 min)
  • Pause (15 min)
  • useRef, useMemo, useCallback (25 min)

Partie 2 : Pratique (1h35)

  • Débogage (20 min)
  • Déploiement (20 min)
  • Exercices — Projet Kana (50 min)

Prérequis

Vérifications avant de commencer

  • Node.js installé (version 16+)
  • Un éditeur de code (VS Code recommandé)
  • Git installé et configuré
  • Un compte GitHub
  • Un compte Vercel (gratuit)
  • L'application Kana de la Séance 4 fonctionnelle

L'IA comme outil, pas comme remplaçant

L'objectif de cette séance n'est pas de vous apprendre à copier-coller du code d'IA sans comprendre.

C'est de vous montrer comment :

  • Utiliser l'IA pour accélérer votre développement
  • Comprendre ce que fait le code généré
  • Adapter les solutions à votre application Kana
  • Déboguer quand quelque chose ne va pas

Vous pilotez, l'IA exécute.