■ Projet fil rouge : JTaskMa
JavaScript ES6+ DOM API Fetch / Async Modules LocalStorage Projet Final
Ce document n'est pas un cours théorique. C'est un atelier de construction. Chaque notion est
expliquée simplement, puis appliquée immédiatement sur JTaskManager, une vraie application
de gestion de tâches. À la fin, tu peux aborder React sans blocage.
JavaScript — De Zéro à React-Ready Page 1
■ Table des matières
Module 0 Le terrain de jeu — Setup & premier JS
→ 0.1 Installer l'environnement (VS Code, Node, extensions)
→ 0.2 Comment fonctionne JS dans le navigateur
→ 0.3 Présentation du projet JTaskManager
Module 1 Les variables et les types
→ 1.1 var, let, const — les différences qui comptent
→ 1.2 Les types de données en JS
→ 1.3 Les opérateurs essentiels
Module 2 Fonctions et portée
→ 2.1 Fonctions classiques vs fléchées
→ 2.2 Portée (scope) et closures
→ 2.3 Paramètres par défaut et rest/spread
Module 3 Tableaux et objets — le coeur de JS
→ 3.1 Les tableaux et leurs méthodes (map, filter, reduce, find)
→ 3.2 Les objets — création, accès, modification
→ 3.3 Destructuring et spread operator
Module 4 Manipuler le DOM
→ 4.1 Sélectionner des éléments
→ 4.2 Modifier le contenu et les styles
→ 4.3 Les événements (click, submit, input)
→ 4.4 Créer et supprimer des éléments dynamiquement
Module 5 Fetch et les données asynchrones
→ 5.1 Synchrone vs asynchrone — l'analogie du restaurant
→ 5.2 Promesses (Promise) — comprendre le concept
→ 5.3 async / await — la syntaxe moderne
→ 5.4 fetch() — appeler une vraie API
Module 6 LocalStorage et état de l'application
→ 6.1 Qu'est-ce que le localStorage
→ 6.2 Sauvegarder et récupérer des données
→ 6.3 Gérer l'état de l'application sans framework
Module 7 Modules ES6 et organisation du code
→ 7.1 import / export — pourquoi séparer son code
→ 7.2 Structure d'un vrai projet JS
→ 7.3 Ce que React va changer (et pourquoi tu es prêt)
Module 8 Projets autonomes
→ Projet A — Calculatrice scientifique
→ Projet B — App météo avec OpenWeatherMap
JavaScript — De Zéro à React-Ready Page 2
→ Projet C — Mini réseau social local (stretch goal)
JavaScript — De Zéro à React-Ready Page 3
MODU
LE 0 Module 0 — Le terrain de jeu
Avant de coder, on installe l'environnement et on comprend comment JavaScript s'exécute. C'est
court, mais indispensable.
Leçon 0.1 — Installer l'environnement
Tu as besoin de trois choses :
• VS Code — l'éditeur de code. Télécharge sur [Link].
• [Link] (LTS) — pour exécuter JS en dehors du navigateur. [Link]
• Extensions VS Code : Prettier (formatage auto), ESLint (détection d'erreurs), Live Server (voir
ton HTML en direct).
■ Vérifier l'installation
Ouvre un terminal et tape : node --version et npm --version. Si tu vois des numéros (ex: v20.11.0),
c'est bon.
Leçon 0.2 — Comment JS s'exécute dans le navigateur
Le navigateur lit ton fichier HTML de haut en bas. Quand il rencontre une balise <script> , il
exécute le JavaScript. Retiens deux choses importantes :
<!-- [Link] -->
<html>
<body>
<h1 id='titre'>Bonjour</h1>
<!-- TOUJOURS mettre le script en bas du body -->
<!-- pour que le HTML soit chargé avant le JS -->
<script src='[Link]'></script>
</body>
</html>
■■ Le script AVANT le HTML = erreur classique
Si tu mets ton script AVANT les éléments HTML, ton JS ne trouvera pas les éléments et tu auras des
erreurs 'null'. Mets toujours le script juste avant .
Leçon 0.3 — Présentation du projet fil rouge : JTaskManager
Tout au long de ce cours, on construit JTaskManager — une application de gestion de tâches en
JavaScript pur. Pas de framework, pas de bibliothèque externe. Juste du HTML, CSS et JS.
JavaScript — De Zéro à React-Ready Page 4
■ Ce que JTaskManager fera au final
• Ajouter, modifier et supprimer des tâches
• Marquer une tâche comme terminée
• Filtrer les tâches (toutes / actives / terminées)
• Sauvegarder les tâches dans le navigateur (localStorage)
• Charger des tâches depuis une API publique au démarrage
• Code organisé en modules (import/export)
Structure du projet qu'on va construire :
jtaskmanager/
■■■ [Link] ← la page principale
■■■ [Link] ← les styles
■■■ src/
■■■ [Link] ← point d'entrée (comme [Link] en React)
■■■ [Link] ← logique des tâches (comme un composant React)
■■■ [Link] ← manipulation du DOM
■■■ [Link] ← appels fetch vers l'API
■■■ [Link] ← localStorage
■ Pourquoi cette structure ?
Cette organisation ressemble exactement à ce que tu verras dans React : un fichier d'entrée ([Link]),
des fichiers séparés par responsabilité (comme des composants). Tu vas comprendre React
naturellement car tu auras déjà fait la même chose à la main.
■■ Exercice 0 — Mettre en place le projet
1. Crée un dossier jtaskmanager/ sur ton bureau.
2. Ouvre-le dans VS Code (File > Open Folder).
3. Crée les fichiers : [Link], [Link], src/[Link]
4. Dans [Link], écris la structure HTML de base (html:5 + Tab dans VS Code).
5. Ajoute avant .
6. Dans [Link], écris : [Link]('JTaskManager démarré !') et ouvre avec Live Server.
7. Vérifie dans la console du navigateur (F12) que le message s'affiche.
JavaScript — De Zéro à React-Ready Page 5
MODU
LE 1 Module 1 — Variables et types
Les variables sont les boîtes qui stockent tes données. En JavaScript, il y a trois façons de les
déclarer — et deux d'entre elles sont modernes et correctes.
Leçon 1.1 — var, let, const
Oublie var — c'est l'ancienne façon, elle a des comportements imprévisibles. Utilise toujours :
// const : pour une valeur qui ne change PAS
const appName = 'JTaskManager';
const MAX_TASKS = 100;
// let : pour une valeur qui PEUT changer
let taskCount = 0;
let currentFilter = 'all';
// Erreur : on ne peut pas réassigner une const
appName = 'autre nom'; // ■ TypeError !
// Par contre, on PEUT modifier le contenu d'un objet const
const task = { title: 'Apprendre JS', done: false };
[Link] = true; // ■ OK — on modifie la propriété, pas la variable
■ La règle simple
Commence TOUJOURS par const. Si tu réalises que la valeur doit changer, change en let. N'utilise
jamais var.
Leçon 1.2 — Les types de données
JavaScript est dynamiquement typé : une variable peut changer de type. Connais les 5 types
essentiels :
JavaScript — De Zéro à React-Ready Page 6
// 1. String (texte) — guillemets simples, doubles, ou backticks
const name = 'Mario';
const message = `Bonjour ${name}, tu as ${taskCount} tâches`; // template literal
// 2. Number (nombre — pas de distinction int/float en JS)
const age = 20;
const price = 4500.50;
// 3. Boolean (vrai/faux)
const isDone = false;
const isLoggedIn = true;
// 4. null — absence de valeur (intentionnelle)
const selectedTask = null; // aucune tâche sélectionnée
// 5. undefined — valeur pas encore assignée
let userId; // undefined car on n'a pas donné de valeur
// 6. Array (tableau) et Object — on les voit au Module 3
const tasks = [];
const user = {};
Vérifier le type avec typeof :
[Link](typeof 'bonjour'); // 'string'
[Link](typeof 42); // 'number'
[Link](typeof true); // 'boolean'
[Link](typeof null); // 'object' ← bug historique de JS !
[Link](typeof undefined); // 'undefined'
[Link](typeof []); // 'object' ← tableau = objet en JS
■■ Comparaison : == vs ===
Toujours utiliser === (triple égal) en JS. Le double == fait des conversions de type imprévues : 0 ==
false donne true, mais 0 === false donne false. Utilise === et !== systématiquement.
Leçon 1.3 — Les opérateurs essentiels
JavaScript — De Zéro à React-Ready Page 7
// Arithmétique
const total = 5 + 3; // 8
const reste = 10 % 3; // 1 (modulo — utile pour pair/impair)
// Comparaison (toujours ===)
const isAdult = age >= 18; // true
const isEmpty = [Link] === 0;
// Logique
const canPost = isLoggedIn && !isEmpty; // ET
const showMenu = isAdmin || isModerator; // OU
// Nullish coalescing ?? (très utile !)
const username = [Link] ?? 'Anonyme';
// Si [Link] est null ou undefined → 'Anonyme'
// Optional chaining ?. (encore plus utile !)
const city = user?.address?.city;
// Si user ou [Link] n'existe pas → undefined (pas d'erreur)
■ Application sur JTaskManager
Voici les premières vraies lignes de notre projet. Ouvre src/[Link] :
// src/[Link]
// Constantes de l'application
const APP_NAME = 'JTaskManager';
const VERSION = '1.0.0';
// État de l'application
let tasks = []; // la liste des tâches (vide au départ)
let currentFilter = 'all'; // filtre actif
// Afficher dans la console pour vérifier
[Link](`${APP_NAME} v${VERSION} — ${[Link]} tâches chargées`);
■■ Exercice 1 — Variables dans JTaskManager
1. Dans [Link], déclare les constantes APP_NAME et VERSION.
2. Déclare les variables tasks (tableau vide) et currentFilter ('all').
3. Ajoute un [Link] qui affiche 'Bienvenue dans [APP_NAME]'.
4. Essaie de réassigner APP_NAME = 'autre' et observe l'erreur dans la console.
5. Utilise typeof pour vérifier le type de tasks, currentFilter et 0.
JavaScript — De Zéro à React-Ready Page 8
MODU
LE 2 Module 2 — Fonctions et portée
Les fonctions sont les briques de base de tout programme JavaScript. En React, tout est fonction (les
composants sont des fonctions). Ce module est donc doublement important.
Leçon 2.1 — Fonctions classiques vs fléchées
// Syntaxe classique
function addTask(title) {
return { id: [Link](), title: title, done: false };
}
// Syntaxe fléchée (arrow function) — la plus utilisée aujourd'hui
const addTask = (title) => {
return { id: [Link](), title: title, done: false };
};
// Raccourci : si une seule ligne et un seul return
const getTaskTitle = (task) => [Link];
// Sans paramètre
const clearTasks = () => { tasks = []; };
// Utilisation identique
const newTask = addTask('Apprendre JS');
[Link](newTask); // { id: 1703..., title: 'Apprendre JS', done: false }
■ Arrow functions en React
Dans React, tu écriras TOUT le temps des arrow functions. const MonComposant = () => { return ... }.
C'est exactement la même syntaxe.
Leçon 2.2 — Portée (scope)
La portée détermine depuis où une variable est accessible. C'est crucial pour comprendre pourquoi
certains bugs apparaissent.
JavaScript — De Zéro à React-Ready Page 9
// Portée globale — accessible partout
let tasks = [];
function addTask(title) {
// Portée locale — accessible seulement dans cette fonction
const newTask = { id: [Link](), title, done: false };
[Link](newTask); // ■ on peut accéder à tasks (portée globale)
return newTask;
}
// [Link](newTask); // ■ Erreur ! newTask n'existe que dans addTask
// Closures — une fonction 'se souvient' de son environnement
function createCounter() {
let count = 0; // cette variable est 'capturée' par la closure
return () => {
count++;
return count;
};
}
const counter = createCounter();
[Link](counter()); // 1
[Link](counter()); // 2 ← count est mémorisé !
Leçon 2.3 — Paramètres par défaut et rest/spread
// Paramètre par défaut
const addTask = (title, priority = 'normal', done = false) => ({
id: [Link](),
title, // raccourci ES6 : title: title
priority,
done
});
addTask('Lire docs React'); // priority='normal', done=false
addTask('Deployer le site', 'high'); // priority='high'
// Spread operator ... — copier/étendre un objet
const task = { id: 1, title: 'Apprendre', done: false };
const updatedTask = { ...task, done: true }; // copie + modifie done
// updatedTask = { id: 1, title: 'Apprendre', done: true }
// task est INCHANGÉ (très important !)
// Rest parameters — capturer plusieurs arguments
const logAll = (...messages) => {
[Link](msg => [Link](msg));
};
logAll('Tâche ajoutée', 'ID: 42', 'Priorité: high');
JavaScript — De Zéro à React-Ready Page 10
■ Application sur JTaskManager
// src/[Link] — toutes les fonctions liées aux tâches
let tasks = [];
// Créer une tâche
export const createTask = (title, priority = 'normal') => ({
id: [Link](),
title,
priority,
done: false,
createdAt: new Date().toISOString()
});
// Ajouter une tâche à la liste
export const addTask = (title, priority) => {
const task = createTask(title, priority);
tasks = [...tasks, task]; // spread : crée un NOUVEAU tableau
return tasks;
};
// Marquer comme terminée
export const toggleTask = (id) => {
tasks = [Link](task =>
[Link] === id ? { ...task, done: ![Link] } : task
);
return tasks;
};
// Supprimer une tâche
export const deleteTask = (id) => {
tasks = [Link](task => [Link] !== id);
return tasks;
};
export const getTasks = () => tasks;
■■ Exercice 2 — Fonctions dans [Link]
1. Crée le fichier src/[Link] et copie les fonctions ci-dessus.
2. Dans [Link], importe addTask et teste : addTask('Lire ce cours').
3. Appelle addTask trois fois avec des tâches différentes.
4. Appelle getTasks() et affiche le résultat dans la console.
5. Bonus : ajoute une fonction editTask(id, newTitle) qui modifie le titre.
JavaScript — De Zéro à React-Ready Page 11
MODU
LE 3 Module 3 — Tableaux et objets
Les tableaux et objets sont le coeur de JavaScript. En React, tu manipuleras constamment des
tableaux de données (liste de tâches, liste d'articles, liste d'utilisateurs). Ce module est peut-être le
plus important.
Leçon 3.1 — Les méthodes de tableau essentielles
Oublie les boucles for classiques pour traiter des données. Ces 5 méthodes remplacent 90% des cas
:
const tasks = [
{ id: 1, title: 'Apprendre JS', done: false, priority: 'high' },
{ id: 2, title: 'Faire du sport', done: true, priority: 'normal' },
{ id: 3, title: 'Lire un article', done: false, priority: 'low' },
{ id: 4, title: 'Coder un projet', done: true, priority: 'high' },
];
// MAP — transformer chaque élément (retourne un nouveau tableau)
const titles = [Link](task => [Link]);
// ['Apprendre JS', 'Faire du sport', 'Lire un article', 'Coder un projet']
// FILTER — garder les éléments qui passent le test
const activeTasks = [Link](task => ![Link]);
// [{ id:1, ... }, { id:3, ... }]
const highPriority = [Link](task => [Link] === 'high');
// [{ id:1 }, { id:4 }]
// FIND — trouver le PREMIER élément qui correspond
const task = [Link](task => [Link] === 3);
// { id: 3, title: 'Lire un article', ... }
// REDUCE — accumuler une valeur
const doneCount = [Link]((count, task) => {
return [Link] ? count + 1 : count;
}, 0);
// 2 (deux tâches terminées)
// FOREACH — exécuter une action (pas de retour)
[Link](task => [Link]([Link]));
■ La règle map / filter / find
map = transformer. filter = sélectionner. find = chercher. Ces trois méthodes créent toujours un
NOUVEAU tableau ou objet — elles ne modifient jamais l'original. C'est exactement ce que React
attend.
JavaScript — De Zéro à React-Ready Page 12
Leçon 3.2 — Les objets
// Créer un objet
const task = {
id: 1,
title: 'Apprendre JS',
done: false,
tags: ['education', 'code'],
};
// Accéder aux propriétés
[Link]([Link]); // 'Apprendre JS'
[Link](task['title']); // identique — utile si le nom est dynamique
const prop = 'done';
[Link](task[prop]); // false — accès dynamique
// Modifier une propriété
[Link] = true;
// Ajouter une propriété
[Link] = new Date().toISOString();
// Vérifier si une propriété existe
[Link]('title' in task); // true
[Link]('author' in task); // false
// [Link](), [Link](), [Link]()
const keys = [Link](task); // ['id', 'title', 'done', 'tags', ...]
const values = [Link](task); // [1, 'Apprendre JS', true, ...]
Leçon 3.3 — Destructuring et spread
Le destructuring permet d'extraire des valeurs d'un objet ou tableau en une seule ligne. C'est
PARTOUT en React.
JavaScript — De Zéro à React-Ready Page 13
// Destructuring d'objet
const { id, title, done } = task;
// Équivalent à :
// const id = [Link];
// const title = [Link];
// const done = [Link];
// Renommer au passage
const { title: taskTitle, done: isCompleted } = task;
// Valeur par défaut
const { priority = 'normal' } = task; // 'normal' si priority absent
// Destructuring de tableau
const [first, second, ...rest] = tasks;
// first = premier élément, second = deuxième, rest = le reste
// Dans les paramètres de fonction (très courant en React !)
const renderTask = ({ id, title, done }) => {
return `<li class='${done ? 'done' : ''}'>${title}</li>`;
};
// Spread pour copier sans modifier
const tasksCopy = [...tasks]; // copie du tableau
const taskUpdated = { ...task, done: true }; // copie + modification
■ Application sur JTaskManager
// Utilisation des méthodes tableau dans [Link]
// Filtrer les tâches selon le filtre actif
export const getFilteredTasks = (filter) => {
switch (filter) {
case 'active': return [Link](({ done }) => !done);
case 'done': return [Link](({ done }) => done);
default: return tasks; // 'all'
}
};
// Statistiques
export const getStats = () => ({
total: [Link],
done: [Link](t => [Link]).length,
active: [Link](t => ![Link]).length,
});
// Chercher une tâche par titre
export const searchTasks = (query) =>
[Link](({ title }) =>
[Link]().includes([Link]())
);
JavaScript — De Zéro à React-Ready Page 14
■■ Exercice 3 — Tableaux et objets dans JTaskManager
1. Ajoute getFilteredTasks() et getStats() dans [Link].
2. Dans [Link] : ajoute 5 tâches (certaines done, certaines pas).
3. Appelle getFilteredTasks('active') et affiche le résultat.
4. Utilise map() pour afficher juste les titres des tâches actives.
5. Utilise reduce() pour calculer le nombre de tâches haute priorité.
6. Teste searchTasks('apprendre') et vérifie que ça retourne les bons résultats.
JavaScript — De Zéro à React-Ready Page 15
MODU
LE 4 Module 4 — Manipuler le DOM
Le DOM (Document Object Model) est la représentation de ta page HTML en objets JavaScript. En
manipulant le DOM, tu peux changer ce que l'utilisateur voit sans recharger la page. React fait
exactement ça — mais de façon automatique. Comprendre le DOM te fera comprendre pourquoi
React existe.
Leçon 4.1 — Sélectionner des éléments
// [Link] — structure de base de JTaskManager
<div id='app'>
<input id='task-input' type='text' placeholder='Nouvelle tâche...'>
<button id='add-btn'>Ajouter</button>
<ul id='task-list'></ul>
<div class='filters'>
<button class='filter-btn active' data-filter='all'>Toutes</button>
<button class='filter-btn' data-filter='active'>Actives</button>
<button class='filter-btn' data-filter='done'>Terminées</button>
</div>
</div>
// src/[Link] — sélection des éléments
// querySelector — sélectionne le PREMIER élément correspondant
const taskInput = [Link]('#task-input');
const addBtn = [Link]('#add-btn');
const taskList = [Link]('#task-list');
// querySelectorAll — sélectionne TOUS les éléments (retourne NodeList)
const filterBtns = [Link]('.filter-btn');
// getElementById — plus rapide pour les IDs
const app = [Link]('app');
// Accéder à la valeur d'un input
const inputValue = [Link];
const trimmed = [Link](); // enlever les espaces
Leçon 4.2 — Modifier le contenu et les styles
JavaScript — De Zéro à React-Ready Page 16
// Modifier le texte
const counter = [Link]('#counter');
[Link] = '5 tâches'; // texte brut (sécurisé)
[Link] = '<b>5</b> tâches'; // HTML (attention aux injections !)
// Modifier les attributs
const btn = [Link]('#add-btn');
[Link] = true;
[Link]('aria-label', 'Ajouter une tâche');
// Modifier les classes CSS
const taskItem = [Link]('.task-item');
[Link]('done'); // ajouter une classe
[Link]('active'); // supprimer une classe
[Link]('done'); // ajouter si absent, enlever si présent
[Link]('done'); // vérifier
// Modifier les styles directement (éviter si possible, préférer les classes)
[Link] = '0.5';
[Link] = '#e2e8f0';
Leçon 4.3 — Les événements
Les événements permettent de réagir aux actions de l'utilisateur : clic, saisie de texte, soumission de
formulaire, etc.
JavaScript — De Zéro à React-Ready Page 17
// addEventListener — la façon moderne
[Link]('click', () => {
const title = [Link]();
if (!title) return; // stopper si vide
addTask(title);
[Link] = ''; // vider l'input
[Link](); // remettre le focus
render(); // re-afficher les tâches
});
// Touche Entrée dans l'input
[Link]('keydown', (event) => {
if ([Link] === 'Enter') {
[Link](); // simuler un clic sur le bouton
}
});
// Délégation d'événements — technique avancée importante
// Au lieu d'écouter chaque bouton, on écoute le parent
[Link]('click', (event) => {
// [Link] = l'élément cliqué
if ([Link]('.delete-btn')) {
const id = parseInt([Link]);
deleteTask(id);
render();
}
if ([Link]('.toggle-btn')) {
const id = parseInt([Link]);
toggleTask(id);
render();
}
});
■ Délégation d'événements
Ne jamais ajouter un addEventListener à chaque élément d'une liste dynamique. Écoute le parent et
utilise [Link] pour identifier quel enfant a été cliqué. C'est plus performant et ça fonctionne même
pour les éléments ajoutés après coup.
Leçon 4.4 — Créer et afficher des éléments dynamiquement
JavaScript — De Zéro à React-Ready Page 18
// src/[Link] — fonction de rendu principale
import { getFilteredTasks, getStats } from './[Link]';
// Créer le HTML d'une tâche
const createTaskHTML = (task) => {
return `
<li class='task-item ${[Link] ? 'done' : ''}' data-id='${[Link]}'>
<button class='toggle-btn' data-id='${[Link]}'>
${[Link] ? '■' : '■'}
</button>
<span class='task-title'>${[Link]}</span>
<span class='task-priority ${[Link]}'>${[Link]}</span>
<button class='delete-btn' data-id='${[Link]}'>■■</button>
</li>
`;
};
// Fonction de rendu principale
export const render = (filter = 'all') => {
const filtered = getFilteredTasks(filter);
// Vider et re-remplir la liste
[Link] = filtered
.map(task => createTaskHTML(task))
.join('');
// Mettre à jour le compteur
const { total, done, active } = getStats();
[Link]('#stats').textContent =
`${total} tâches — ${done} terminées — ${active} actives`;
};
■■ Exercice 4 — Construire l'interface JTaskManager
1. Crée le HTML complet dans [Link] (input, bouton, liste, filtres, stats).
2. Crée src/[Link] avec les sélections DOM et la fonction render().
3. Dans [Link] : importe render et appelle-la au démarrage.
4. Ajoute le addEventListener sur le bouton 'Ajouter'.
5. Ajoute la délégation d'événements sur taskList pour toggle et delete.
6. Teste : ajouter, cocher et supprimer des tâches.
7. Bonus : ajouter un input de recherche qui filtre les tâches en temps réel.
JavaScript — De Zéro à React-Ready Page 19
MODU
LE 5 Module 5 — Fetch et l'asynchrone
L'asynchronisme est le concept le plus difficile à comprendre pour les débutants. Ce module prend le
temps de l'expliquer avec une analogie, avant de passer au code.
Leçon 5.1 — L'analogie du restaurant
■■ Synchrone vs Asynchrone
• SYNCHRONE : Le garçon prend ta commande, va en cuisine, attend que le plat soit prêt, revient le
servir, puis va prendre la commande de la table suivante. Toute la salle attend pendant qu'il fait une
seule chose.
•
• ASYNCHRONE : Le garçon prend ta commande, la passe en cuisine, puis va prendre la commande
de la table suivante. Quand la cuisine crie 'commande prête !', il revient la servir. Tout continue en
parallèle.
•
• JavaScript est asynchrone : il ne bloque pas en attendant une réponse réseau.
// Le PROBLÈME : fetch est asynchrone
// Ce code NE FONCTIONNE PAS comme tu l'attends
const tasks = fetch('[Link] // promesse, pas les données !
[Link](tasks); // Promise { <pending> } ← pas les données !
// Il faut 'attendre' la réponse avec .then() ou async/await
Leçon 5.2 — Promesses (.then)
JavaScript — De Zéro à React-Ready Page 20
// Une Promesse représente une valeur future
// Elle peut être : pending, fulfilled, ou rejected
fetch('[Link]
.then(response => {
// La réponse est arrivée, mais c'est juste les headers
// Il faut encore parser le JSON
return [Link]();
})
.then(data => {
// Maintenant on a les vraies données
[Link](data); // tableau de tâches
})
.catch(error => {
// Une erreur s'est produite (réseau, serveur...)
[Link]('Erreur:', error);
});
[Link]('Ce message s affiche AVANT les données !');
// ← JS n'attend pas fetch, il continue
Leçon 5.3 — async / await (la syntaxe moderne)
async/await est du 'sucre syntaxique' sur les Promesses — c'est plus lisible et c'est ce que tu
utiliseras en React avec useEffect.
JavaScript — De Zéro à React-Ready Page 21
// async/await — beaucoup plus lisible
const fetchTasks = async () => {
try {
const response = await fetch('[Link]
if (![Link]) {
throw new Error(`Erreur serveur: ${[Link]}`);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Impossible de charger les tâches:', error);
return []; // retourner un tableau vide en cas d'erreur
}
};
// Appeler une fonction async
const tasks = await fetchTasks(); // seulement dans un contexte async !
// Ou avec .then()
fetchTasks().then(tasks => {
[Link](tasks);
render();
});
■■ await seulement dans async
Tu ne peux utiliser await que dans une fonction marquée async. Si tu essaies await en dehors, tu
auras une SyntaxError.
Leçon 5.4 — Appeler une vraie API
On utilise [Link] — une fausse API gratuite parfaite pour s'entraîner.
Elle renvoie des todos, des users, des posts.
JavaScript — De Zéro à React-Ready Page 22
// src/[Link]
const BASE_URL = '[Link]
// Charger les tâches depuis l'API
export const fetchTasksFromAPI = async () => {
try {
const response = await fetch(`${BASE_URL}/todos?_limit=10`);
if (![Link]) throw new Error('Erreur réseau');
const apiTasks = await [Link]();
// Adapter le format de l'API à notre format
return [Link](item => ({
id: [Link],
title: [Link],
done: [Link],
priority: 'normal',
}));
} catch (error) {
[Link]('Erreur API:', [Link]);
return [];
}
};
// Dans [Link] — charger au démarrage
import { fetchTasksFromAPI } from './[Link]';
import { addTask } from './[Link]';
const init = async () => {
const apiTasks = await fetchTasksFromAPI();
[Link](task => addTask([Link], [Link]));
render();
};
init(); // démarrer l'application
■■ Exercice 5 — Fetch dans JTaskManager
1. Crée src/[Link] avec la fonction fetchTasksFromAPI().
2. Dans [Link], crée une fonction init() async qui charge les tâches depuis l'API.
3. Affiche un message 'Chargement...' pendant que les données arrivent.
4. Une fois les données reçues, cache le message et affiche les tâches.
5. Teste avec network throttling dans Chrome DevTools (onglet Network > Slow 3G).
6. Bonus : affiche un message d'erreur si l'API ne répond pas (coupe internet et teste).
JavaScript — De Zéro à React-Ready Page 23
MODU
LE 6 Module 6 — LocalStorage et état
Le localStorage permet de sauvegarder des données dans le navigateur — elles persistent même
après fermeture de l'onglet. C'est ce qui va rendre notre JTaskManager vraiment utilisable.
Leçon 6.1 — localStorage : l'API complète
// localStorage stocke des STRINGS uniquement
// Pour les objets, il faut [Link]() et [Link]()
// Sauvegarder
[Link]('username', 'Mario');
[Link]('tasks', [Link](tasks));
// Lire
const username = [Link]('username'); // 'Mario'
const savedTasks = [Link]([Link]('tasks')); // tableau
// Gérer le cas où la clé n'existe pas
const raw = [Link]('tasks');
const tasks = raw ? [Link](raw) : []; // tableau vide si rien
// Supprimer
[Link]('username');
// Tout effacer
[Link]();
Leçon 6.2 — Intégrer le localStorage dans JTaskManager
// src/[Link]
const STORAGE_KEY = 'jtaskmanager_tasks';
export const saveTasks = (tasks) => {
[Link](STORAGE_KEY, [Link](tasks));
};
export const loadTasks = () => {
const raw = [Link](STORAGE_KEY);
return raw ? [Link](raw) : [];
};
export const clearStorage = () => {
[Link](STORAGE_KEY);
};
JavaScript — De Zéro à React-Ready Page 24
// src/[Link] — modifier pour sauvegarder à chaque changement
import { saveTasks, loadTasks } from './[Link]';
// Charger les tâches sauvegardées au démarrage
let tasks = loadTasks();
export const addTask = (title, priority = 'normal') => {
const task = createTask(title, priority);
tasks = [...tasks, task];
saveTasks(tasks); // ← sauvegarder à chaque modification
return tasks;
};
export const toggleTask = (id) => {
tasks = [Link](task =>
[Link] === id ? { ...task, done: ![Link] } : task
);
saveTasks(tasks); // ← sauvegarder
return tasks;
};
export const deleteTask = (id) => {
tasks = [Link](task => [Link] !== id);
saveTasks(tasks); // ← sauvegarder
return tasks;
};
Leçon 6.3 — Gérer l'état global de l'application
L'état (state) d'une application, c'est l'ensemble des données qui déterminent ce que l'utilisateur voit.
Dans React, c'est géré avec useState. Ici, on le fait à la main — et ça va tout t'expliquer.
JavaScript — De Zéro à React-Ready Page 25
// src/[Link] — gestionnaire d'état global
import { addTask, toggleTask, deleteTask, getFilteredTasks } from './[Link]';
import { render } from './[Link]';
import { fetchTasksFromAPI } from './[Link]';
// État global de l'application
let appState = {
filter: 'all',
isLoading: false,
error: null,
};
// Mettre à jour l'état et re-rendre — c'est exactement ce que fait React !
const setState = (newState) => {
appState = { ...appState, ...newState };
render(appState); // re-afficher à chaque changement d'état
};
// Initialisation
const init = async () => {
setState({ isLoading: true });
const apiTasks = await fetchTasksFromAPI();
if ([Link] > 0) {
[Link](t => addTask([Link], [Link]));
}
setState({ isLoading: false });
};
init();
■ Tu viens de réinventer React (sans le savoir)
La fonction setState() qui met à jour l'état et appelle render() — c'est EXACTEMENT ce que fait
useState + le cycle de rendu de React. La différence : React le fait automatiquement, efficacement, et
pour chaque composant séparément.
■■ Exercice 6 — localStorage dans JTaskManager
1. Crée src/[Link] avec saveTasks() et loadTasks().
2. Modifie [Link] pour appeler saveTasks() après chaque mutation.
3. Ajoute tasks = loadTasks() au démarrage de l'app.
4. Teste : ajoute des tâches, ferme l'onglet, rouvre — les tâches doivent persister.
5. Ajoute un bouton 'Tout effacer' qui appelle clearStorage() et recharge.
6. Bonus : sauvegarde aussi le filtre actif dans localStorage.
JavaScript — De Zéro à React-Ready Page 26
MODU
LE 7 Module 7 — Modules ES6 et vers React
Tu as déjà utilisé import/export dans les modules précédents. Ce module formalise les concepts et
fait le pont complet vers React.
Leçon 7.1 — import / export
// Export nommé — on peut en avoir plusieurs par fichier
export const addTask = () => {};
export const deleteTask = () => {};
export const STORAGE_KEY = 'jtaskmanager';
// Export par défaut — un seul par fichier
export default function TaskManager() {}
// Import nommé — accolades obligatoires
import { addTask, deleteTask } from './[Link]';
// Import par défaut — pas d'accolades, nom libre
import TaskManager from './[Link]';
// Importer tout dans un namespace
import * as TaskUtils from './[Link]';
[Link]('Apprendre');
// Renommer à l'import
import { addTask as createNewTask } from './[Link]';
Leçon 7.2 — Structure finale du projet JTaskManager
jtaskmanager/
■■■ [Link]
■■■ [Link]
■■■ src/
■■■ [Link] // point d'entrée — orchestre tout
■■■ [Link] // logique métier — CRUD des tâches
■■■ [Link] // DOM — affichage et événements
■■■ [Link] // fetch — communication avec l'API
■■■ [Link] // localStorage — persistance
Chaque fichier a une responsabilité unique. C'est le principe de séparation des responsabilités — et
c'est exactement ce que React applique avec les composants.
Leçon 7.3 — De JS à React : le pont
JavaScript — De Zéro à React-Ready Page 27
Ce que tu fais en JS vanilla Ce que React fait à ta place
[Link] = [Link](...).join("") return [Link](t => <TaskItem key={[Link]} {...t} />)
let state = {}; const setState = (s) => { render()
const [state,
} setState] = useState({})
fetchTasks().then(data => render()) useEffect(() => { fetchTasks().then(setData) }, [])
saveTasks(tasks) dans chaque fonction useEffect(() => { saveTasks(tasks) }, [tasks])
import { fn } from "./[Link]" import { fn } from "./[Link]" (identique !)
[Link](".btn").addEventListener("click",
<button onClick={handleClick}>
...)
src/[Link], src/[Link], src/[Link] [Link], [Link], [Link]
■ Tu es prêt pour React
Si tu as construit JTaskManager jusqu'ici, tu comprends déjà : l'état (state), le rendu (render), les
événements, les appels API, la persistance, et l'organisation du code. React ne fait pas de magie — il
automatise ce que tu viens de faire à la main.
■■ Exercice 7 — Finaliser JTaskManager
1. Vérifie que tous les fichiers s'importent correctement sans erreur.
2. L'application doit charger depuis l'API au premier lancement.
3. Les tâches doivent persister dans localStorage après rechargement.
4. Les filtres (all/active/done) doivent fonctionner.
5. Ajoute un thème sombre/clair avec un bouton toggle (sauvegardé en localStorage).
6. Mets le projet sur GitHub avec un README qui explique comment le lancer.
JavaScript — De Zéro à React-Ready Page 28
MODU
LE 8 Module 8 — Projets autonomes
Tu as maintenant tous les outils. Ces trois projets te donnent carte blanche pour consolider et
montrer ce que tu sais faire. Pas de solution fournie — c'est ton épreuve.
Niveau :
■ Projet A — Calculatrice scientifique Intermédiaire
Objectif
Construire une calculatrice avec les 4 opérations de base + des fonctions scientifiques (sin, cos, sqrt,
puissance). Zéro bibliothèque externe.
Fonctionnalités requises :
• Affichage de l'expression en cours et du résultat
• Opérations : +, -, ×, ÷, % (modulo)
• Fonctions : sin(), cos(), tan(), sqrt(), x²
• Historique des 5 derniers calculs (localStorage)
• Gestion des erreurs : division par zéro, expression invalide
• Support clavier (touches numériques + Entrée + Backspace)
Concepts à maîtriser :
→ Manipulation du DOM (affichage dynamique)
→ Événements clavier et clic
→ Gestion d'état (l'expression en cours)
→ eval() ou un parser d'expression fait maison
→ localStorage pour l'historique
Niveau :
■■ Projet B — App météo Intermédiaire+
Objectif
Appeler une vraie API météo et afficher les données pour n'importe quelle ville. API recommandée :
Open-Meteo (gratuite, sans clé API).
JavaScript — De Zéro à React-Ready Page 29
// API Open-Meteo (gratuite, pas besoin de clé)
// 1. Obtenir les coordonnées d'une ville
GET [Link]
// 2. Obtenir la météo avec les coordonnées
GET [Link]
?latitude=6.36&longitude=2.42
¤t=temperature_2m,weathercode,windspeed_10m
&daily=temperature_2m_max,temperature_2m_min,precipitation_sum
&forecast_days=7
Fonctionnalités requises :
• Champ de recherche de ville
• Affichage de la météo actuelle (température, vent, condition)
• Prévisions sur 7 jours
• Gérer les états : loading, error, success
• Sauvegarder les 3 dernières villes recherchées (localStorage)
• Icônes météo selon le weathercode (tableau de correspondance)
■ Projet C — Mini réseau social (stretch goal) Niveau : Avancé
Objectif
Construire un mini réseau social local — les données sont dans localStorage, pas de backend. Un
utilisateur peut créer un compte, publier des posts, liker et commenter. Défi ultime avant React.
Fonctionnalités requises :
• Inscription / connexion (localStorage, pas de vrai auth)
• Fil d'actualité avec les posts de tous les 'utilisateurs'
• Publier un post (texte + optionnel : image URL)
• Liker un post (compteur, état mémorisé)
• Commenter un post
• Profil utilisateur avec ses posts
• Navigation entre pages sans rechargement (router maison)
■ Conseil pour le projet C
Construis d'abord les données (structure des objets user, post, comment en localStorage), puis les
fonctions CRUD, puis l'interface. C'est l'ordre que React va t'imposer aussi.
JavaScript — De Zéro à React-Ready Page 30
■
BILAN Checklist avant de passer à React
JS
■ Variables et types Tu utilises const/let naturellement et tu comprends les types
■ Fonctions Tu écris des arrow functions et tu comprends le scope
■ Tableaux Tu utilises map, filter, find, reduce sans hésiter
■ Objets Tu destructures et tu utilises le spread operator
Tu sélectionnes, modifies, crées des éléments et gères les
■ DOM événements
■ Fetch / async Tu appelles une API avec async/await et tu gères loading/error
■ localStorage Tu sauvegardes et récupères des données du navigateur
■ Modules Tu organises ton code en fichiers avec import/export
■ JTaskManager L'application complète fonctionne
■ Projet autonome Tu as réalisé au moins le Projet A ou B seul
■ Tu es prêt pour React.
Ce cours t'a donné les fondations que 80% des gens qui "apprennent React" n'ont pas. Tu
comprends l'état, le rendu, les événements, les APIs et les modules. React va juste
automatiser et structurer ce que tu fais déjà.
JavaScript — De Zéro à React-Ready Page 31