Introduction à React - Séance 2
Bienvenue dans la Séance 2 ! Maintenant que vous maîtrisez les fondamentaux JavaScript, il est temps de les mettre en pratique avec React, la bibliothèque frontend la plus populaire au monde.
De JavaScript à React
En Séance 1, vous avez appris les fondamentaux JavaScript. React s'appuie sur ces bases pour créer des interfaces utilisateur interactives.
Vous êtes prêt !
Les concepts JavaScript de la Séance 1 (.map(), destructuration, spread operator, arrow functions, TypeScript) sont directement utilisés dans React.
Ce que vous allez apprendre
Cette séance se concentre sur les fondamentaux de React :
Objectifs de la Séance 2
À la fin de cette séance, vous serez capable de :
- Comprendre React : Architecture à composants, Virtual DOM, programmation déclarative
- Créer un projet : Installer Node.js/npm, créer un projet avec Vite
- Écrire du JSX : Syntaxe JSX, différences avec HTML
- Créer des composants : Composants fonctionnels réutilisables
- Passer des données : Props, destructuration, validation
- Afficher des listes : Utiliser
.map()et gérer les keys - Rendu conditionnel : if/else, ternaire, && dans JSX
- TypeScript avec React : Typer les props de composants
- Composer des interfaces : Assembler des composants pour créer des applications complexes
Comment cette séance fonctionne
Structure du parcours
Cette séance suit une progression logique :
- Concepts de base : Qu'est-ce que React, pourquoi l'utiliser
- Environnement : Installation et configuration des outils
- Syntaxe JSX : Apprendre à écrire du JSX
- Composants : Créer vos propres composants
- Props : Faire communiquer les composants
- Listes et conditions : Affichage dynamique
- TypeScript : Ajouter le typage à vos composants
- Pratique : Exercices et quiz de validation
Même philosophie qu'en Séance 1
Comprendre, pas mémoriser
L'objectif n'est toujours PAS de tout mémoriser !
Votre vrai objectif reste de :
- Lire et comprendre du code React
- Valider le code généré par l'IA
- Adapter et corriger le code quand nécessaire
- Reconnaître les patterns pour savoir quoi chercher
Avec l'IA, vous allez générer du code React rapidement. Mais vous devez comprendre ce code pour le valider et l'adapter à vos besoins.
Ce que React apporte
Pourquoi apprendre React ?
React n'est pas juste une bibliothèque - c'est une façon de penser la construction d'interfaces.
Avant React (vanilla JavaScript)
// Manipulation impérative du DOM
const button = document.createElement('button');
button.textContent = 'Cliquer';
button.onclick = () => {
const counter = document.getElementById('counter');
counter.textContent = parseInt(counter.textContent) + 1;
};
document.body.appendChild(button);
Avec React
// Approche déclarative
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Cliqué {count} fois
</button>
);
}
React vous permet de décrire ce que vous voulez, pas comment le faire. C'est plus simple, plus lisible, et plus maintenable.
Applications réelles
React est utilisé par les plus grandes entreprises du monde :
- Facebook/Instagram - Créateur de React
- Netflix - Interface de streaming
- Airbnb - Plateforme de réservation
- Discord - Application de messagerie
- Uber - Applications web
- Et des milliers d'autres...
C'est une compétence très recherchée sur le marché du travail !
Architecture de la séance
Cette séance est divisée en pages thématiques. Chaque page se concentre sur un concept spécifique avec :
- Explications claires - Pourquoi et comment
- Exemples de code - Code commenté et testé
- QuickCheck - Questions pour valider votre compréhension
- Callouts - Points importants et pièges à éviter
- Ressources - Liens pour aller plus loin
Pages principales
Voici le parcours recommandé :
Débuter avec React
Qu'est-ce que React et comment créer son premier projet
JSX
La syntaxe pour écrire des composants React
Composants
Créer des composants fonctionnels réutilisables
Props
Passer des données entre composants
Prérequis
Avant de commencer
Assurez-vous d'avoir validé la Séance 1 !
Cette séance suppose que vous maîtrisez :
- Les variables (
let,const) - Les fonctions (arrow functions)
- Les tableaux (
.map(),.filter()) - Les objets (création, manipulation)
- La destructuration
- Le spread operator
- Les bases de TypeScript
Si ces concepts ne sont pas clairs, retournez en Séance 1 ! React utilise tous ces concepts quotidiennement.
Outils et environnement
Pour suivre cette séance, vous aurez besoin de :
- Node.js et npm - Déjà installés sur les machines de l'IUT
- Un éditeur de code - WebStorm (IUT) ou autre éditeur de votre choix
- Un navigateur récent - Chrome, Firefox ou Edge
Optionnel : React DevTools (extension navigateur pour déboguer React)
À l'IUT : Tout est déjà configuré sur les postes. Si vous travaillez sur votre machine personnelle, consultez la section Node.js & npm pour l'installation.