Apprendre React et TypeScript en 30 jours au Maroc : un plan concret

Définir un résultat mesurable à atteindre

Avant de commencer, décrivez ce que vous voulez pouvoir faire à la fin du mois. Un objectif comme « apprendre React » est trop large pour guider le travail quotidien. Préférez une formulation observable : « créer une petite application en React, organiser l’interface en composants et utiliser TypeScript pour typer les propriétés et les données principales ». Vous saurez alors quoi pratiquer et comment vérifier vos progrès.

Le parcours proposé suppose que vous avez déjà des repères en HTML, CSS et JavaScript. Vous devriez notamment pouvoir lire une fonction, manipuler un tableau d’objets et comprendre une condition. Si ces bases sont encore nouvelles, consacrez quelques séances à JavaScript avant de commencer React : sinon, vous risquez de confondre les difficultés du langage avec celles des outils.

Prévoyez environ une heure de pratique, cinq jours par semaine, soit approximativement vingt heures d’exercices sur quatre semaines. Ajoutez du temps si vous découvrez l’environnement de développement ou si vous devez consolider JavaScript. La régularité compte davantage qu’une longue séance isolée. Gardez une trace quotidienne de ce que vous avez construit et des erreurs que vous avez résolues.

Fixez aussi des critères de réussite simples : l’application s’affiche, ses principales interactions fonctionnent, les composants sont lisibles et les données importantes ont des types explicites. Le but n’est pas d’éviter toute erreur. Il est de pouvoir expliquer ce que fait votre code et de corriger un problème en sachant où chercher.

• Résultat visé : une application React fonctionnelle, structurée en composants et écrite avec TypeScript.
• Temps indicatif : cinq séances d’environ une heure par semaine.
• À vérifier avant le départ : bases de JavaScript, HTML et CSS.

Semaine 1 : découvrir l’environnement

La première semaine sert à prendre en main le projet et à comprendre comment une interface React est assemblée. Choisissez une ressource de référence et suivez un seul fil conducteur plutôt que de multiplier les tutoriels. La documentation officielle de React propose un parcours d’apprentissage ; le manuel TypeScript peut servir de complément lorsque vous rencontrez une notion de typage.

Commencez par ouvrir ou créer un petit projet, lancer l’application et repérer les fichiers principaux. Votre premier exercice consiste à afficher un titre, un court texte et une liste d’éléments. Découpez ensuite l’écran en composants simples, par exemple un en-tête, une zone de contenu et un élément de liste. Passez quelques minutes à comprendre comment un composant reçoit des données.

Introduisez TypeScript par petites étapes. Ajoutez un type à un objet représentant un élément de la liste, puis définissez les propriétés attendues par un composant. L’objectif n’est pas d’apprendre tous les types en une semaine, mais de comprendre que les annotations décrivent les formes de données et aident à repérer certaines incohérences.

À la fin de la semaine, refaites un petit écran sans recopier ligne par ligne votre exercice précédent. Le jalon est atteint si vous pouvez créer plusieurs composants, leur transmettre des données et expliquer au moins une erreur de type que vous avez rencontrée. Si vous bloquez, notez la question précise avant de chercher une réponse.

• Exercice 1 : afficher une liste de quelques éléments à partir d’un tableau.
• Exercice 2 : déplacer l’affichage d’un élément dans un composant réutilisable.
• Exercice 3 : typer les données de la liste et les propriétés du composant.
• Auto-évaluation : pouvez-vous expliquer le rôle des composants et des propriétés sans relire tout le tutoriel ?

Semaine 2 : maîtriser les opérations de base

La deuxième semaine transforme l’affichage statique en interface interactive. Travaillez le rendu conditionnel et la mise à jour de l’état avec un exemple réduit : une liste de tâches ou une liste de produits. Ajoutez une interaction à la fois. Si vous essayez d’implémenter plusieurs fonctionnalités simultanément, il devient plus difficile d’identifier l’origine d’un problème.

Construisez un formulaire qui permet d’ajouter un élément. Affichez ensuite les éléments dans une liste, et permettez de marquer l’un d’eux comme terminé. Pour chaque étape, commencez par vérifier le comportement sans ajouter de complexité : une saisie valide crée-t-elle bien un élément ? Le changement d’état est-il visible ?

Côté TypeScript, donnez une forme claire aux données manipulées. Distinguez les propriétés nécessaires de celles qui peuvent être absentes, et vérifiez les types utilisés dans les fonctions de mise à jour. Un exercice utile consiste à tenter de transmettre une propriété qui n’existe pas dans le type défini, puis à lire le message produit et à corriger votre code.

Faites une courte revue en fin de semaine. L’application doit permettre d’ajouter un élément et de modifier son état, même si le style reste sommaire. Reprenez les erreurs qui vous ont pris le plus de temps et écrivez une phrase sur chacune : ce que vous observiez, ce qui causait le problème et comment vous l’avez résolu.

• Exercice 1 : ajouter un élément depuis un formulaire.
• Exercice 2 : afficher un état vide quand la liste ne contient aucun élément.
• Exercice 3 : marquer un élément comme terminé, puis le supprimer.
• Auto-évaluation : pouvez-vous décrire où l’état est conservé et quelles données circulent entre les composants ?

Semaine 3 : appliquer les acquis à un cas réel

En troisième semaine, choisissez le périmètre du projet final et cessez d’enchaîner les exercices indépendants. Une liste de tâches convient aux débutants : elle permet de combiner composants, formulaires, état et types sans imposer une interface trop vaste. Vous pouvez aussi choisir un catalogue simple ou un suivi d’habitudes, mais gardez un objectif réalisable en quelques séances.

Écrivez d’abord une courte liste de besoins. Pour une liste de tâches, elle peut inclure l’ajout d’une tâche, son marquage comme terminée, sa suppression et un filtre pour afficher toutes les tâches ou seulement celles qui restent à faire. Dessinez ensuite les principales zones de l’interface et identifiez les composants possibles. N’ajoutez une fonctionnalité que lorsque les précédentes sont stables.

Créez un type représentant une tâche, puis utilisez-le aux endroits où les données sont affichées ou modifiées. Séparez les responsabilités : un composant peut gérer le formulaire, un autre afficher une ligne et un autre présenter les filtres. Cette organisation doit rester proportionnée au projet ; créer beaucoup de petits fichiers n’est pas une fin en soi.

Si vous avancez plus vite, vous pouvez ajouter une intégration avec une API comme exercice complémentaire, en prévoyant les états de chargement et d’erreur. Si ce sujet vous ralentit, gardez des données locales : la réalisation finale doit d’abord montrer que vous savez produire une interface claire et interactive. Notez les choix que vous avez faits et les points restant à améliorer.

• Exercice 1 : écrire les besoins et dessiner les zones de l’application avant de coder.
• Exercice 2 : définir un type pour les données et créer les composants nécessaires.
• Exercice 3 : implémenter les fonctionnalités une par une, puis tester chaque interaction.
• Jalon : une personne qui découvre le projet doit comprendre ce qu’il permet de faire.

Semaine 4 : finaliser et vérifier son résultat

La quatrième semaine est consacrée à la stabilisation, pas à l’ajout d’un grand nombre de nouveautés. Reprenez vos critères de départ : l’application s’affiche-t-elle correctement ? Les actions prévues fonctionnent-elles ? Les types décrivent-ils les données réellement utilisées ? Les noms des composants et des variables sont-ils compréhensibles ?

Testez plusieurs situations : liste vide, formulaire soumis sans contenu, ajout de plusieurs éléments, filtre sans résultat et suppression. Corrigez les défauts rencontrés avant de consacrer du temps aux détails visuels. Vérifiez également que votre code ne contient pas de répétitions faciles à éviter et que les responsabilités des composants restent compréhensibles.

Terminez par une courte présentation écrite du projet : son but, ses fonctionnalités, la manière dont vous avez structuré les composants et une difficulté que vous avez résolue. C’est un exercice utile pour consolider les notions et rendre votre travail plus facile à expliquer dans un parcours de formation ou un échange professionnel.

Votre réalisation finale est considérée comme aboutie pour ce parcours si elle est exécutable, si les fonctionnalités retenues sont testées et si vous pouvez commenter vos choix. Elle n’a pas besoin d’être une application complète destinée à la production. L’important est de montrer un cheminement cohérent entre les bases étudiées et un usage concret.

• Exercice 1 : tester chaque fonctionnalité avec des cas normaux et des cas limites simples.
• Exercice 2 : relire les types, les noms et la séparation des composants.
• Exercice 3 : rédiger un bilan de projet et noter les prochaines notions à apprendre.
• Auto-évaluation finale : pouvez-vous modifier une fonctionnalité sans dépendre d’un tutoriel pas à pas ?

Adapter le rythme et poursuivre après 30 jours

Si vous disposez de moins de temps, conservez les quatre jalons mais étalez les séances. Deux ou trois séances hebdomadaires restent utiles si vous privilégiez la pratique et reprenez le projet à chaque fois. Si vous avez davantage de disponibilité, ne remplissez pas automatiquement chaque heure par de nouvelles notions : utilisez plutôt ce temps pour tester, relire et expliquer votre code.

Après le mois, choisissez la suite à partir des difficultés réellement rencontrées. Si les composants et les propriétés restent confus, réalisez un second petit projet sans ajouter d’API. Si le typage vous pose problème, approfondissez les objets, les fonctions et les types utilisés par votre application. Si l’ensemble est solide, explorez une intégration de données distante, la gestion des erreurs ou les tests, un sujet à la fois.

Pour apprendre en autonomie, les ressources officielles peuvent compléter les exercices. Une formation structurée peut être utile si vous avez besoin d’un cadre, de retours sur votre code ou d’un projet accompagné. Au Maroc, comparez le contenu, le niveau demandé, les exercices proposés, le format et le temps de pratique avant de choisir. Les programmes d’upskilling et de reskilling constituent aussi un contexte utile pour réfléchir à l’évolution ou à la reconversion professionnelle, sans remplacer un plan adapté à votre niveau.

• Pour consolider : refaire le projet sans suivre les étapes d’un tutoriel.
• Pour progresser : choisir une seule nouvelle difficulté, comme les tests ou l’intégration d’API.
• Pour être accompagné : vérifier que la formation propose de la pratique et des retours adaptés à vos objectifs.

Le parcours, étape par étape

1. 1Jours 1 à 7 — prendre ses repères — Environ cinq heures de pratique. Lancer un projet, repérer ses principaux fichiers, afficher une liste et créer des composants simples. Ajouter les premiers types pour les données et les propriétés. Jalons : pouvoir décrire le rôle d’un composant et transmettre des données typées.
2. 2Jours 8 à 14 — rendre l’interface interactive — Environ cinq heures de pratique. Construire un formulaire, ajouter des éléments à une liste, modifier leur état et gérer l’affichage d’une liste vide. Jalons : vérifier que chaque interaction fonctionne et comprendre où l’état de l’interface est géré.
3. 3Jours 15 à 21 — construire le projet — Environ cinq heures de pratique. Choisir le périmètre d’une application simple, écrire ses besoins, organiser les composants et implémenter les fonctionnalités essentielles. Jalons : afficher un parcours d’utilisation complet et pouvoir expliquer la structure du projet.
4. 4Jours 22 à 30 — finaliser et faire le bilan — Environ cinq heures de pratique. Tester les cas prévus, corriger les défauts, clarifier le code et rédiger une présentation du projet. Réserver les dernières séances à une auto-évaluation : ce que vous maîtrisez, les erreurs que vous savez résoudre et les sujets à reprendre.

Formations et programmes au Maroc

Compétences clés

Questions fréquentes

Sources

1. Formation React et TypeScript — FormaGroup formagroup.ma
2. Guide de parcours React au Maroc — FormaGroup formagroup.ma
3. React — Learn react.dev
4. TypeScript Handbook typescriptlang.org
5. JobInTech jobintech.academy
6. Upskilling et reskilling — Ministère de la Transition Numérique et de la Réforme de l’Administration mmsp.gov.ma