Tu veux apprendre à créer une application avec React ?
Tu es débutant et tu ne sais pas par où commencer ?
Pas de panique ! Ce guide est fait pour toi. On va apprendre ensemble à créer une To-Do List React débutant, étape par étape.

C’est un projet simple, mais très utile pour comprendre les bases de React.
À la fin de ce tuto, tu seras capable de créer ta propre appli avec du texte, des boutons, et même une sauvegarde automatique.

Pourquoi créer une To-Do List React débutant ?

Une To-Do List, c’est une application où tu peux noter tes tâches à faire (comme “sortir la poubelle” ou “réviser le code”).
C’est très simple, mais parfait pour apprendre :

  • comment fonctionne React
  • comment utiliser les composants
  • comment gérer les données avec useState
  • comment enregistrer les infos dans ton navigateur (avec localStorage)
  • comment styliser une interface propre

Étapes pour réussir ta To-Do List React débutant

  1. Comment installer React
  2. Comment créer le fichier principal
  3. Comment ajouter une tâche et l’afficher
  4. Comment supprimer une tâche
  5. Comment sauvegarder les tâches dans le navigateur
  6. Comment ajouter un peu de style CSS
  7. Et quelques idées pour aller plus loin

Étape 1 – Installer ta To-Do List React débutant

On commence par installer un projet React sur ton ordinateur.
Tu ouvres ton terminal (ou PowerShell si tu es sur Windows) et tu tapes :

npx create-react-app todo-app
cd todo-app
npm start

Ton application s’ouvre dans ton navigateur avec une page blanche : bravo ! Tu es prêt pour la suite.

Étape 2 – Créer ton fichier principal

Dans le fichier src/App.js, supprime tout et colle ce code :

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [taches, setTaches] = useState([]);
  const [nouvelleTache, setNouvelleTache] = useState('');

  useEffect(() => {
    const saved = JSON.parse(localStorage.getItem('taches')) || [];
    setTaches(saved);
  }, []);

  useEffect(() => {
    localStorage.setItem('taches', JSON.stringify(taches));
  }, [taches]);

  const ajouterTache = () => {
    if (nouvelleTache.trim() === '') return;
    setTaches([...taches, nouvelleTache]);
    setNouvelleTache('');
  };

  const supprimerTache = (index) => {
    const nouvelles = [...taches];
    nouvelles.splice(index, 1);
    setTaches(nouvelles);
  };

  return (
    <div className="container">
      <h1>Ma To-Do List React 📝</h1>
      <div className="ajout-zone">
        <input
          type="text"
          placeholder="Ajouter une tâche"
          value={nouvelleTache}
          onChange={(e) => setNouvelleTache(e.target.value)}
        />
        <button onClick={ajouterTache}>Ajouter</button>
      </div>
      <ul>
        {taches.map((tache, index) => (
          <li key={index}>
            <span>{tache}</span>
            <button onClick={() => supprimerTache(index)}>❌</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Étape 3 – Ajouter un peu de style CSS

Dans le fichier src/App.css, ajoute ce code pour améliorer le style de ton application :

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.ajout-zone {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background-color: #fafafa;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

Maintenant, ton app est plus jolie et plus facile à utiliser !

Étape 4 – Sauvegarde automatique avec localStorage

Grâce au code useEffect, toutes les tâches que tu ajoutes sont enregistrées dans ton navigateur.

Même si tu fermes la page, les tâches seront encore là la prochaine fois. C’est magique !

Étape 5 – Améliorations possibles

Tu veux aller encore plus loin ? Voici quelques idées simples :

  • Ajouter une case à cocher pour dire qu’une tâche est terminée
  • Ajouter une date limite pour chaque tâche
  • Afficher le nombre de tâches restantes
  • Changer les couleurs avec un mode sombre
  • Trier les tâches (par ordre alphabétique, par date…)
  • Utiliser TypeScript
  • Connecter ton app à une base de données (ex : Node.js + MongoDB)
To-Do List React Débutant

Ressources utiles

Voici quelques liens très utiles si tu veux en apprendre encore plus sur React JS :

Cours React sur FreeCodeCamp (en anglais) – Plein d’exercices pour s’entraîner gratuitement.

Documentation officielle de React – Le site officiel avec des exemples clairs et à jour.

React sur W3Schools – Des tutos simples avec des explications étape par étape.

Guide débutant React sur MDN Web Docs – Un article complet pour comprendre les bases.

FAQ

Est-ce que ça marche sur mobile ?
Oui ! Avec un peu de CSS responsive, ton app peut s’adapter aux petits écrans.

Puis-je utiliser TypeScript ?
Oui. Pour cela, tape :

npx create-react-app todo-app --template typescript

Peut-on ajouter une base de données ?
Oui, tu peux utiliser une API en Node.js ou Firebase pour enregistrer les tâches à distance.

Conclusion

Félicitations ! Tu viens de créer une To-Do List React débutant complète, simple et stylée.

Grâce à ce projet, tu sais maintenant :

  • Installer un projet React avec Create React App
  • Créer des composants
  • Gérer les tâches avec useState
  • Sauvegarder les données avec localStorage
  • Ajouter du style avec du CSS
  • Améliorer ton application en ajoutant de nouvelles fonctionnalités

N’hésite pas à partager cet article avec tes amis développeurs débutants !
Et retrouve d’autres tutoriels faciles sur CWRIO.com pour continuer à progresser