React et TypeScript au Maroc : évaluer son niveau avant de commencer

À qui s’adresse ce guide ?

Ce guide s’adresse aux personnes au Maroc qui envisagent une formation en développement front-end, souhaitent compléter leurs compétences ou se reconvertir vers la création d’interfaces web. Il peut aussi servir à un développeur JavaScript qui veut vérifier s’il est prêt à aborder React et TypeScript.

Le niveau de départ peut varier : vous avez peut-être déjà créé quelques pages en HTML et CSS, suivi un cours de programmation ou travaillé avec JavaScript. Vous pouvez aussi être débutant et vouloir savoir dans quel ordre apprendre. Dans ce dernier cas, apprendre React et TypeScript sans expérience est possible, mais il est généralement plus efficace de consolider d’abord les bases du web et de JavaScript.

L’objectif du diagnostic n’est pas de vous attribuer une note définitive. Il sert à repérer les compétences déjà acquises, les lacunes qui risquent de vous ralentir et le bon premier objectif. Une démarche structurée d’analyse des besoins aide justement à ajuster un parcours de formation aux acquis et aux objectifs du participant.

• Débutant en programmation : vérifiez d’abord vos bases HTML, CSS et JavaScript.
• Développeur JavaScript : testez votre capacité à organiser une interface en composants et à typer les données.
• Professionnel ou étudiant : reliez l’apprentissage à un projet concret, comme un tableau de bord ou un formulaire métier.

Les prérequis selon l’usage visé

Pour découvrir React, vous n’avez pas besoin d’avoir déjà construit une application complète. En revanche, il est important de reconnaître les éléments d’une page HTML, de comprendre les règles CSS les plus courantes et de lire du JavaScript simple. Vous devez pouvoir suivre ce que font une variable, une condition, une fonction et une boucle, même si vous ne connaissez pas encore toutes les subtilités du langage.

Les bases JavaScript indispensables comprennent les variables, les fonctions, les tableaux et leurs méthodes usuelles, les objets, les conditions, les modules import/export et les événements du navigateur. Les promesses et async/await deviennent rapidement nécessaires lorsqu’une interface récupère des données auprès d’un service web. Les notions de portée, de valeur de retour et de paramètres aident également à comprendre les composants et leurs propriétés.

TypeScript ajoute une vérification de types à JavaScript. Pour commencer, il suffit de comprendre qu’une variable ou une fonction peut recevoir des valeurs de formes définies, et qu’un type permet de détecter certaines incohérences avant l’exécution. Vous pourrez ensuite apprendre les types d’objets, les unions, les types de fonctions et les interfaces au fil des exercices. Il n’est pas nécessaire de maîtriser tout le système de types avant de découvrir React.

Pour un objectif professionnel, les attentes montent d’un cran. Il faut être capable de découper une interface en composants cohérents, de transmettre des données entre composants, de gérer un état simple, de traiter la saisie d’un formulaire et d’afficher une liste à partir de données. Il faut également savoir lancer un projet local, lire un message d’erreur et corriger son code par étapes. La connaissance d’une API et de la gestion des chargements ou des erreurs est utile pour des applications réelles.

Certains acquis sont simplement utiles au début, et non des prérequis absolus : Git, les tests automatisés, les outils de développement du navigateur, les notions d’accessibilité, le routage et les bibliothèques d’interface. Les découvrir tôt est bénéfique, mais les empiler avant de savoir créer une petite interface peut disperser l’effort.

• Indispensable pour débuter : HTML, CSS élémentaire, JavaScript de base et capacité à pratiquer régulièrement.
• À acquérir en progressant : composants React, props, état, événements, types TypeScript et appels asynchrones.
• Utile selon le projet : Git, tests, routage, accessibilité, intégration continue et bibliothèques complémentaires.

Auto-évaluation en React et TypeScript

Répondez aux questions sans chercher immédiatement la solution. Pour chaque notion, indiquez « autonome », « avec aide » ou « à revoir ». L’important est de savoir expliquer votre démarche, pas de réciter une définition.

• JavaScript : savez-vous écrire une fonction qui reçoit un tableau d’objets et renvoie seulement ceux qui répondent à une condition ?
• JavaScript : savez-vous utiliser map, filter ou find, puis expliquer la différence entre ces opérations ?
• Asynchrone : pouvez-vous décrire ce qui se passe lorsque vous attendez une réponse d’API avec async/await ?
• React : savez-vous expliquer pourquoi une interface peut être découpée en composants plutôt qu’écrite dans un seul bloc ?
• React : pouvez-vous transmettre une valeur à un composant et réagir à un clic ou à une saisie ?
• TypeScript : pouvez-vous déclarer la forme d’un objet représentant, par exemple, un produit avec un nom et un prix ?
• Débogage : pouvez-vous lire une erreur, retrouver le fichier concerné et tester une correction ?

Grille d’auto-évaluation par niveaux

Utilisez cette grille comme repère pratique, pas comme certification officielle. Situez-vous au niveau où vous pouvez réaliser la plupart des tâches indiquées sans suivre une vidéo ou un tutoriel ligne par ligne.

• Niveau 1 — Bases à construire : vous avez peu ou pas pratiqué JavaScript, ou vous ne savez pas encore manipuler fonctions, tableaux et objets. Commencez par HTML, CSS et JavaScript avant d’ajouter React.
• Niveau 2 — Prêt à découvrir : vous écrivez de petites fonctions, comprenez les tableaux et objets, et connaissez les événements simples du navigateur. Vous pouvez commencer React en parallèle d’une révision ciblée.
• Niveau 3 — Débutant React : vous savez créer plusieurs composants, leur transmettre des données et gérer une interaction simple. Vous pouvez introduire TypeScript progressivement et typer les données utilisées par votre interface.
• Niveau 4 — Opérationnel sur un projet simple : vous organisez une interface, gérez formulaires et états, consommez une API et corrigez des erreurs courantes. Approfondissez les types, les tests et la qualité du code avec un projet plus complet.

Exemples de tests pratiques adaptés à la technologie

Un test de niveau React et TypeScript doit vérifier votre capacité à produire quelque chose, à raisonner sur les données et à corriger le résultat. Faites ces exercices dans un petit projet, sans chercher à reproduire une application complexe.

• Test JavaScript préalable : à partir d’une liste de tâches, afficher uniquement celles qui sont terminées et calculer combien il en reste. Vous devez pouvoir expliquer le rôle de filter et la manière dont vous comptez le résultat.
• Test de composants : créer un composant de carte de produit qui reçoit un nom, un prix et une disponibilité. Afficher ces informations dans l’interface, puis passer trois produits différents.
• Test d’interaction : ajouter un bouton qui augmente un compteur, puis un formulaire qui ajoute un élément à une liste. Vérifiez que l’affichage se met à jour après chaque action.
• Test TypeScript : définir un type pour un produit, puis l’utiliser dans les propriétés du composant et dans la liste. Essayez volontairement de fournir un prix sous forme de texte pour observer l’erreur et la corriger.
• Test d’API, pour un niveau plus avancé : récupérer une liste de données et prévoir un affichage distinct pendant le chargement, en cas d’erreur et lorsque les résultats arrivent.
• Test de lecture : ouvrez un composant que vous avez écrit et expliquez ce qui relève des données, de l’affichage et des interactions. Si vous ne pouvez pas le faire, simplifiez-le avant d’ajouter des fonctionnalités.

Lire les résultats du diagnostic

Si les exercices JavaScript vous semblent difficiles, ne concluez pas que React n’est pas fait pour vous. Le signal indique plutôt qu’il faut remettre à niveau les notions qui servent partout dans le développement d’interfaces. Des bases solides rendent ensuite les erreurs React et TypeScript plus faciles à comprendre.

Si JavaScript est confortable mais que les composants vous semblent abstraits, commencez par de petites interfaces statiques puis ajoutez une interaction à la fois. Si React est déjà familier mais que TypeScript bloque, concentrez-vous sur les types des données et des propriétés de composants, plutôt que sur les fonctionnalités avancées du langage.

Pour un objectif de découverte, savoir créer une interface élémentaire avec une interaction constitue un jalon raisonnable. Pour un objectif professionnel, ajoutez progressivement formulaires, appels d’API, états de chargement et gestion des erreurs. Évitez de vous fixer comme premier objectif de maîtriser toute la bibliothèque ou l’ensemble de TypeScript.

• Beaucoup de difficultés en JavaScript : reporter l’apprentissage intensif de React et revoir fonctions, tableaux, objets et modules.
• JavaScript solide, React inconnu : commencer par composants, propriétés, état et événements.
• React connu, types fragiles : typer des objets, des propriétés et des fonctions sur un petit projet.
• Projet simple déjà réalisable : choisir un objectif plus complet et travailler aussi le débogage et la qualité du code.

Combler les lacunes avant de commencer

Avancez dans un ordre qui limite les blocages : une difficulté TypeScript peut en réalité venir d’une notion JavaScript mal comprise, et un problème d’affichage peut être lié au HTML ou au CSS. Réservez des séances courtes à une lacune précise, puis vérifiez l’acquis par un exercice sans modèle.

• Si HTML ou CSS manque : reconstruisez une page simple avec titre, contenu, boutons et mise en page adaptable. Vérifiez que vous pouvez retrouver les éléments dans le navigateur.
• Si les fonctions, tableaux ou objets sont fragiles : écrivez plusieurs petits exercices JavaScript qui filtrent et transforment des données. Expliquez le résultat attendu avant de lancer le code.
• Si l’asynchrone est nouveau : entraînez-vous à appeler une fonction asynchrone et à gérer son résultat et ses erreurs avant de connecter une interface.
• Si React est difficile à visualiser : créez une interface d’abord statique, découpez-la en composants, puis ajoutez props, événements et état dans cet ordre.
• Si TypeScript ralentit votre progression : commencez par typer les propriétés et les objets, puis ajoutez les types de retour de fonctions et les cas où une valeur peut être absente.
• Si le débogage prend trop de temps : lisez le premier message d’erreur, repérez le fichier et la ligne indiqués, puis modifiez une seule chose à la fois.

Choisir son premier objectif concret

Choisissez un petit résultat que vous pourrez montrer et expliquer : une liste de tâches, un catalogue de produits ou un formulaire d’inscription avec validation simple. Gardez une seule fonctionnalité principale. Commencez par afficher les données, puis ajoutez une interaction, et enfin donnez-leur des types.

Écrivez votre objectif en une phrase vérifiable, par exemple : « Je peux afficher une liste de produits typés, filtrer les produits disponibles et expliquer les composants utilisés. » Cette formulation précise ce que vous devez réaliser et ce que vous devez comprendre. Une fois cet objectif atteint, ajoutez une difficulté, comme la récupération des données depuis une API.

Pour choisir une formation, comparez votre niveau avec les prérequis annoncés et vérifiez que le contenu répond à votre but : initiation, consolidation JavaScript, réalisation d’interfaces ou préparation à un projet d’équipe. Les démarches de montée en compétences gagnent à relier les besoins repérés à des objectifs d’apprentissage concrets.

• Premier jalon : une interface lisible composée de plusieurs composants.
• Deuxième jalon : une interaction simple avec un état mis à jour.
• Troisième jalon : des données et des propriétés typées avec TypeScript.
• Jalon suivant : un formulaire ou une API, avec états de chargement et gestion des erreurs.

Le parcours, étape par étape

1. 11. Faire le diagnostic — Répondez à la grille et réalisez au moins un exercice JavaScript sans tutoriel pas à pas.
2. 22. Choisir la lacune prioritaire — Repérez si votre principal besoin concerne HTML/CSS, JavaScript, React, TypeScript ou le débogage.
3. 33. Réviser dans l’ordre — Renforcez d’abord les notions préalables, puis passez aux composants, aux interactions et au typage.
4. 44. Construire un petit projet — Réalisez une interface simple et vérifiable, en ajoutant une fonctionnalité à la fois.
5. 55. Réévaluer votre niveau — Reprenez les mêmes tests sans aide. Si vous pouvez expliquer et modifier votre code, choisissez un objectif plus ambitieux ou une formation adaptée.

Formations et programmes au Maroc

Compétences clés

Questions fréquentes

Sources

1. Formation React et TypeScript — FormaGroup formagroup.ma
2. React — Learn React react.dev
3. TypeScript — Documentation officielle typescriptlang.org
4. Ingénierie de la Formation Continue : Identification et Analyse des Besoins de Formation — OFPPT ofppt.ma
5. Upskilling et Reskilling — Ministère de la Transition Numérique et de la Réforme de l’Administration mmsp.gov.ma