Vous avez une idée d’application en tête, mais le mot « React » vous évoque surtout une montagne de fichiers et de termes mystérieux ? Bonne nouvelle : on peut commencer petit. Dans ce tutoriel, nous allons créer pas à pas une liste de tâches avec React, depuis la préparation du projet jusqu’à l’ajout d’une nouvelle tâche. À la fin, vous saurez comment afficher des éléments, réagir aux actions de l’utilisateur et mettre à jour l’écran sans tout reconstruire à la main.
React est une bibliothèque JavaScript conçue pour créer des interfaces interactives. Elle découpe une page en petits blocs réutilisables, appelés composants. Pensez à une interface comme à un jeu de construction : un bloc pour l’en-tête, un autre pour le formulaire, un autre pour chaque tâche. Si votre site était une vitrine, React vous aiderait à changer rapidement les produits exposés sans refaire toute la boutique.
Préparer son environnement
Pour suivre ce tutoriel, vous avez besoin de Node.js, qui permet notamment d’exécuter des outils JavaScript sur votre ordinateur. Téléchargez sa version stable depuis son site officiel, puis vérifiez l’installation en ouvrant un terminal et en lançant :
node -vnpm -vLes deux commandes doivent afficher un numéro de version. Si ce n’est pas le cas, vérifiez l’installation avant de poursuivre : les fondations sont moins visibles que la façade, mais elles évitent bien des surprises.
Nous allons utiliser Vite, un outil qui prépare rapidement un projet React et lance un serveur de développement. Dans votre terminal, saisissez :
npm create vite@latest ma-liste -- --template reactcd ma-listenpm installnpm run devVite vous indiquera une adresse locale, souvent http://localhost:5173. Ouvrez-la dans votre navigateur. Vous devriez voir la page de départ du projet. Voilà, votre environnement React est en marche. Pas encore une application révolutionnaire, certes, mais les grands projets commencent rarement avec des feux d’artifice.
Repérer les fichiers importants
Dans le dossier créé, quelques fichiers méritent votre attention :
src/main.jsxdémarre l’application et l’affiche dans la page.src/App.jsxcontient le composant principal, que nous allons modifier.src/index.csscontient les styles généraux.package.jsondécrit le projet et ses commandes.
Un composant React est généralement une fonction JavaScript qui renvoie une partie de l’interface. Son nom commence par une majuscule : App, par exemple. Le langage d’écriture utilisé dans nos fichiers, appelé JSX, permet de mêler du JavaScript et une syntaxe proche du HTML. « Proche » est le mot important : certaines règles diffèrent, mais vous retrouverez vite vos repères.
Créer le premier composant
Ouvrez src/App.jsx et remplacez son contenu par ce code :
function App() { return ( <main> <h1>Ma liste de tâches</h1> <p>Une petite étape à la fois.</p> </main> );}export default App;Enregistrez le fichier et regardez le navigateur : Vite actualise l’affichage dès que vous modifiez votre code. Le composant App renvoie un élément main, un titre et un paragraphe. En JSX, un composant doit renvoyer un seul élément parent. Vous pouvez donc entourer plusieurs éléments avec main, ou utiliser un groupe vide écrit <>...</>.
Vous voyez aussi export default App. Cette instruction permet à un autre fichier d’importer le composant. Ce n’est pas une décoration : sans elle, le point de départ de l’application ne saurait pas quoi afficher.
Afficher une liste avec des données
Une liste de tâches doit d’abord avoir… des tâches. Déclarons-les sous forme de tableau, puis affichons-les avec la méthode map. Remplacez le contenu de App.jsx par :
function App() { const taches = [ { id: 1, texte: "Préparer le café" }, { id: 2, texte: "Créer mon application" }, { id: 3, texte: "Fêter la première étape" } ]; return ( <main> <h1>Ma liste de tâches</h1> <ul> {taches.map((tache) => ( <li key={tache.id}>{tache.texte}</li> ))} </ul> </main> );}export default App;map parcourt le tableau et transforme chaque élément en ligne d’interface. Les accolades permettent d’insérer une expression JavaScript dans le JSX. Quant à la propriété key, elle donne à React un repère stable pour reconnaître chaque élément lorsque la liste change. Ici, nous utilisons un identifiant unique. Évitez de choisir le texte comme identifiant : deux tâches pourraient porter le même nom, comme deux réunions qui auraient toutes les deux pour titre « Point rapide ».
Comprendre l’état de l’application
Pour l’instant, le tableau est figé dans le code. Si vous souhaitez ajouter ou supprimer une tâche, il faut un moyen de mémoriser les changements. React propose pour cela l’état, c’est-à-dire une donnée suivie par le composant. Quand cet état change, React actualise l’interface correspondante.
Nous allons utiliser le crochet useState. Un crochet est une fonction fournie par React qui ajoute une capacité à un composant fonctionnel. Modifiez le début du fichier ainsi :
import { useState } from "react";function App() { const [taches, setTaches] = useState([ { id: 1, texte: "Préparer le café" }, { id: 2, texte: "Créer mon application" } ]);taches contient la valeur actuelle et setTaches permet de la modifier. Le tableau passé à useState sert de valeur initiale. Ne modifiez pas directement le tableau avec une méthode comme push : créez plutôt un nouveau tableau, puis transmettez-le à setTaches. React repère ainsi clairement le changement.
Ajouter une tâche avec un formulaire
Ajoutons un champ de saisie et un bouton. Nous allons aussi stocker le texte en cours dans un second état. Voici une version complète du composant :
import { useState } from "react";function App() { const [taches, setTaches] = useState([ { id: 1, texte: "Préparer le café" }, { id: 2, texte: "Créer mon application" } ]); const [nouvelleTache, setNouvelleTache] = useState(""); function ajouterTache(evenement) { evenement.preventDefault(); const texte = nouvelleTache.trim(); if (texte === "") return; const tache = { id: Date.now(), texte: texte }; setTaches([...taches, tache]); setNouvelleTache(""); } return ( <main> <h1>Ma liste de tâches</h1> <form onSubmit={ajouterTache}> <label htmlFor="nouvelle-tache">Nouvelle tâche</label> <input id="nouvelle-tache" value={nouvelleTache} onChange={(evenement) => setNouvelleTache(evenement.target.value)} placeholder="Exemple : tester mon application" /> <button type="submit">Ajouter</button> </form> <ul> {taches.map((tache) => ( <li key={tache.id}>{tache.texte}</li> ))} </ul> </main> );}export default App;Décortiquons ce qui se passe. L’événement onChange se déclenche lorsque l’utilisateur modifie le champ. Il met à jour nouvelleTache, qui devient la valeur affichée dans le champ. On appelle cela un champ contrôlé : React connaît sa valeur et peut la gérer.
Lors de l’envoi, preventDefault empêche le navigateur de recharger la page, comportement habituel d’un formulaire. trim retire les espaces superflus, puis une vérification écarte les saisies vides. Enfin, [...taches, tache] fabrique un nouveau tableau contenant les anciennes tâches et la nouvelle. Le champ est ensuite remis à zéro. Essayez d’ajouter une tâche : elle apparaît sans rechargement complet de la page.
Vous remarquerez aussi htmlFor et non for pour relier l’étiquette au champ. En JSX, certains noms d’attributs diffèrent de ceux du HTML. Cette association améliore l’accessibilité et facilite l’utilisation du formulaire, notamment avec un lecteur d’écran.
Ajouter un peu de style
Une application fonctionnelle, c’est bien. Une application agréable à regarder, c’est mieux. Remplacez le contenu de src/index.css par ces règles simples :
body { margin: 0; font-family: Arial, sans-serif; background: #f3f5f8; color: #202633;}main { width: min(90%, 620px); margin: 60px auto; padding: 28px; background: white; border-radius: 16px; box-shadow: 0 8px 30px #20263318;}form { display: flex; gap: 10px; margin: 24px 0;}label { position: absolute; left: -9999px;}input { flex: 1; padding: 12px; border: 1px solid #ccd2dc; border-radius: 8px;}button { padding: 12px 18px; border: 0; border-radius: 8px; background: #5a56e9; color: white; cursor: pointer;}li { margin: 12px 0;}Le formulaire s’adapte à la largeur disponible, tandis que min limite la taille du bloc principal sur les grands écrans. L’étiquette reste accessible même si elle est déplacée hors de la zone visible. Petit détail, grand bénéfice : l’accessibilité ne se résume pas à une option ajoutée à la fin du projet.
Les erreurs courantes à repérer
Un écran vide ne signifie pas forcément que React vous en veut personnellement. Commencez par consulter la console du navigateur et le terminal : ils indiquent souvent le fichier et la ligne concernés. Voici quelques pièges fréquents :
- Oublier d’importer
useStateavant de l’utiliser. - Omettre une propriété
keysur les éléments créés avecmap. - Modifier directement un tableau d’état au lieu d’en créer un nouveau.
- Écrire le nom d’un composant avec une minuscule : React pourrait le prendre pour une balise HTML.
- Oublier les accolades autour d’une expression JavaScript insérée dans le JSX.
Une bonne méthode consiste à avancer par petites étapes : affichez d’abord le titre, puis les données, puis le formulaire. Si vous ajoutez dix nouveautés avant de tester, trouver l’origine d’un problème devient un jeu de piste — sans la carte au trésor.
Faire évoluer votre application
Vous avez maintenant une application qui affiche des tâches et en ajoute à la volée. Pour progresser, vous pourriez permettre de marquer une tâche comme terminée, ajouter un bouton de suppression ou enregistrer les données dans le navigateur. Vous pouvez aussi extraire chaque ligne dans un composant séparé, par exemple ElementTache, afin de rendre le code plus facile à entretenir.
Le principe reste le même : les composants organisent l’interface, l’état mémorise les données qui changent et les événements relient les actions de l’utilisateur à ces changements. C’est cette combinaison qui fait de React un outil pratique pour bâtir des interfaces vivantes. Commencez par une petite idée, testez-la, puis enrichissez-la progressivement. Votre première application n’a pas besoin de conquérir le monde : si elle vous aide à comprendre comment le monde de React fonctionne, elle a déjà rempli sa mission.
