À l'abordage de React

Dans ce deuxième module, nous introduisons le concept d'Interactivité en React, un élément crucial pour la création de sites web dynamiques et réactifs.

Vous découvrirez les hooks, un mécanisme clé de React, et comment ils permettent de gérer l'état d'un composant. Nous explorerons la gestion des states et comment réagir aux changements d'état, ajoutant ainsi de la profondeur à votre compréhension de la mécanique de React.

Apprenez à créer vos propres hooks pour une réutilisation et une organisation optimale du code. Découvrez comment interagir avec le DOM à l'aide des références et des effets de mise en page.

Une introduction aux formulaires vous permettra de comprendre comment gérer différents types de champs, ainsi que les aspects de validation et de soumission des formulaires.

Et ce n'est pas tout. Ce module culmine avec un workshop pratique dans lequel vous pourrez mettre en application tout ce que vous avez appris pour développer un jeu de mémoire passionnant sur le thème des pirates. En mettant vos connaissances en pratique, vous consoliderez votre compréhension des concepts clés de React et serez prêt à aborder des projets plus complexes.

Plongeons-nous dans l'aspect crucial du data fetching avec ce module. Vous apprendrez à interagir avec les API et les services de données dans les applications React.

Après une introduction à la manière de faire des requêtes HTTP de manière efficace et sécurisée, nous passerons en revue les meilleures pratiques pour maintenir un code performant et organisé.

Ensuite, nous ferons une introduction à react-query, une bibliothèque populaire pour la gestion des requêtes de données dans les applications React. Un accent particulier sera mis sur la gestion des cas d'erreurs, vous permettant d'anticiper et de gérer efficacement les problèmes éventuels.

Enfin, vous aurez l'occasion de mettre vos nouvelles compétences en pratique avec un workshop interactif, vous donnant l'expérience pratique nécessaire pour maîtriser ces concepts importants.

L'esthétique compte tout autant que la fonctionnalité. C'est ce que nous allons aborder dans ce module, en explorant les différentes approches du styling avec React.

Nous commencerons par une introduction générale au styling React, avant de nous plonger dans les spécificités des CSS Modules et de CSS in JS, deux méthodes populaires pour appliquer du style à vos composants React.

Ensuite, nous jetterons un œil à Tailwind, un framework CSS de bas niveau très en vogue, pour voir comment il peut aider à créer des designs attrayants avec un minimum d'effort.

Après avoir exploré ces différentes options, nous conclurons en vous donnant notre avis sur les solutions les plus efficaces pour le styling en React, en nous basant sur notre expérience et nos recherches.

Pour conclure ce module, un workshop pratique vous permettra de tester et de comparer ces différentes méthodes, afin de vous aider à décider laquelle correspond le mieux à vos besoins et à votre style de codage.

Entrons dans la complexité du State global dans React, une composante essentielle pour gérer l'état de l'application à une échelle plus grande.

Nous commencerons par une introduction générale avant de passer en revue le Hook useContext, un puissant outil React pour partager des données facilement à travers l'arborescence des composants.

Approfondissez votre compréhension en découvrant comment les reducers sont utilisés pour gérer un état plus complexe de manière prévisible et fiable. Des recommandations spécifiques vous guideront sur où placer vos states et sur les points d'attention pour une gestion efficace de l'état global.

Nous aborderons également les outils existants, comme Redux, et expliquerons pourquoi, dans la plupart des cas, React suffit largement pour gérer l'état de votre application.

Enfin, un workshop vous offrira la possibilité d'appliquer ces connaissances dans un contexte pratique, vous aidant à solidifier votre compréhension de la gestion de l'état global dans React.

La navigation est une composante essentielle de toute application web. C'est pourquoi ce module se concentre sur le Client Side Routing (CSR) dans React.

Nous commencerons par une introduction au CSR pour vous familiariser avec les concepts fondamentaux. Un point vocabulaire approfondira votre compréhension en clarifiant les termes spécifiques liés au routage.

La librairie React Router sera notre principal sujet d'étude, étant l'une des solutions les plus populaires pour la gestion des routes en React. Vous apprendrez à manipuler les paramètres d'URL et à gérer les routes imbriquées, ajoutant une flexibilité supplémentaire à la navigation de votre application.

Nous explorerons également le concept de layout de routes pour une organisation optimale de vos pages. Des recommandations spécifiques vous aideront à éviter les écueils communs et à maximiser l'efficacité de votre routage.

Le module se conclut par un workshop pratique où vous pourrez mettre en œuvre les concepts appris pour créer une navigation fluide et intuitive dans une application React.

La qualité d'une application ne se mesure pas uniquement à son design ou à ses fonctionnalités, mais aussi à sa fiabilité. C'est là qu'intervient le module "Tester son app".

Après une introduction générale à l'importance du test, nous explorerons la philosophie de test qui guide les meilleures pratiques et stratégies.

Nous introduirons Jest, un cadre de test populaire pour JavaScript, suivi de la React Testing Library, une solution spécifique à React pour tester les composants de manière efficace et fiable.

Vous apprendrez à créer des simulations d'API avec Mock Service Worker (MSW), permettant des tests plus précis et flexibles. De plus, nous couvrirons les tests End-to-End (E2E) avec Cypress, une puissante plateforme pour automatiser les tests dans le navigateur.

Enfin, vous aurez l'opportunité de mettre en pratique ces nouveaux outils et techniques de test lors d'un workshop interactif, renforçant votre capacité à garantir la fiabilité de vos applications React.

Ce dernier module, intitulé "Déployer en production", est un incontournable pour toute personne cherchant à lancer une application React dans le monde réel.

Nous commencerons par un tour d'horizon des différentes alternatives disponibles pour le déploiement de vos applications, pour vous aider à choisir la solution qui convient le mieux à vos besoins.

Vous serez introduit aux concepts de CI/CD (Continuous Integration/Continuous Deployment), qui sont essentiels pour assurer une mise à jour et une maintenance efficaces de vos applications. Nous discuterons également des meilleures pratiques en matière de CI pour maximiser la fiabilité et la qualité de votre code.

Nous explorerons les différents modes de déploiement (SSR, static, hybrid), ainsi que les hébergeurs adaptés à chacun. Cela vous donnera une compréhension complète des options à votre disposition et de comment choisir la plus appropriée.

En guise de bonus, nous couvrirons également l'utilisation des Cloudflare Workers pour améliorer la performance et la sécurité de votre application.

A l'issue de ce module, vous serez équipé des connaissances et des compétences nécessaires pour déployer en toute confiance votre application React en production.

Le module "Optimisations" vous permettra de pousser vos compétences React à un niveau supérieur, en vous guidant à travers des techniques avancées pour améliorer les performances de vos applications.

Après une introduction générale, nous passerons en revue des outils tels que le React Profiler et l'onglet Network pour analyser et optimiser les performances de votre application.

Nous vous présenterons ensuite React Suspense, une fonctionnalité puissante pour la gestion du chargement des composants. Vous apprendrez également à mettre en place des Optimistic updates pour améliorer la réactivité de votre interface utilisateur.

Les techniques pour réduire les re-renders seront abordées pour assurer une expérience utilisateur fluide, même dans des applications plus complexes.

Enfin, nous explorerons des patterns avancés tels que les compound components, prop getters, control props, etc., pour vous aider à écrire un code plus modulable et maintenable.

Ce module est une étape importante pour devenir un développeur React expérimenté, capable de produire des applications performantes et optimisées.

Le module "Concepts avancés" est conçu pour approfondir votre compréhension de React en explorant certaines des fonctionnalités et des concepts les plus sophistiqués de la bibliothèque.

Nous commencerons par les Error Boundaries, un mécanisme crucial pour gérer les erreurs dans une application React de manière élégante. Ensuite, nous étudierons les hooks moins connus mais tout aussi utiles, comme useDebugValue et useImperativeHandle.

La gestion de gros projets sera également abordée, avec un accent sur l'architecture et les meilleures pratiques pour la gestion de codebases plus importantes et plus complexes.

Ensuite, nous plongerons dans la différence entre le Shadow DOM et le Virtual DOM, deux concepts essentiels pour comprendre comment React fonctionne avec le DOM.

Enfin, nous aborderons les Web Components, une puissante technologie web qui permet de créer des composants réutilisables et encapsulés.

Ce module avancé vous permettra d'approfondir vos connaissances de React et d'acquérir une compréhension plus profonde de la bibliothèque et de ses interactions avec les technologies web sous-jacentes.

Le dernier module, "Frameworks React", vise à élargir votre horizon en dehors de React lui-même et à vous familiariser avec certains des frameworks populaires qui l'entourent.

On commencera par répondre à une question cruciale : Pourquoi les frameworks ? Cette discussion nous permettra de comprendre les avantages que ces outils peuvent apporter à votre développement React.

Nous examinerons ensuite Preact, une alternative légère à React qui offre des performances et une taille de paquet optimisées tout en respectant l'API de React.

Ensuite, nous explorerons Next.js, un framework très populaire pour React qui offre une pléthore de fonctionnalités allant du SSR (Server Side Rendering) à la génération de sites statiques.

Enfin, nous découvrirons Remix, un nouveau venu sur la scène des frameworks React qui offre une approche fraîche et moderne du développement React.

À la fin de ce module, vous aurez une connaissance approfondie de l'écosystème qui entoure React et vous serez mieux équipé pour choisir le bon outil pour votre prochain projet.