À l'abordage de React

Ohé ! Hisse les voiles et explore React de A à Z ! Arme-toi des meilleures compétences, outils et méthodes pour affronter n’importe quel type de projet.

Bateau

Tous les jours un nouveau framework sort et tu ne sais pas par où commencer ?

Aujourd'hui, React est l'une des compétences les plus demandées sur le marché de l'emploi, car elle reste un des meilleurs choix pour créer des applications et des sites web performants et interactifs. Pourtant, se former correctement à React peut s'avérer difficile en raison de la profusion de contenus sur internet.

En tant que développeur React dans une équipe, vous serez très souvent confronté à des décisions impactantes concernant l'architecture de l'application, le choix d'utiliser telle ou telle librairie, ou encore la manière d'implémenter certaines fonctionnalités. Pour prendre ces décisions en toute confiance, il est impératif d'avoir une solide compréhension du fonctionnement de React.

C'est là qu'intervient notre formation "A l'abordage de React"! Nous vous proposons une formation complète sur notre propre plateforme, interactive et avec une expérience utilisateur soignée. Les leçons sont rédigées avec un axe narratif pour faciliter la compréhension, et ponctuées de quiz réguliers pour tester vos connaissances. De plus, des ateliers pratiques vous permettront de mettre en application les concepts abordés, renforçant ainsi votre maîtrise de React.

En choisissant "A l'abordage de React", vous bénéficierez d'un accompagnement de qualité, vous permettant d'acquérir les compétences indispensables pour briller en tant que développeur React et vous démarquer sur le marché de l'emploi. Alors n'attendez plus, embarquez avec nous et hissez la grand-voile vers la réussite !

À qui est destiné ce cours ?

old_sea_bass image

Vieux loup de mer

Développeur expérimenté en quête d'une nouvelle stack.

young_mousse image

Jeune mousse

Développeur débutant ou en reconversion professionnelle.

explorer image

Explorateur

Développeur (React ou non) souhaitant approfondir ses connaissances.

pirate image

Pirate

Salarié désireux de se lancer en freelance.

conqueror image

Conquérant

Développeur Backend voulant apprendre le métier du Frontend.

Rejoindre l'aventure

N'attendez plus, et inscrivez-vous avec votre email pour faire partie du Crew et participer à l'aventure !

Feuille de route

Carte au trésor

Pré-requis

Notions de HTML, CSS et JavaScript

Module 1
Terminé

Présentation de React

Dans ce premier module, nous plongeons au cœur de React, en construisant une compréhension solide qui nous accompagnera tout au long du cours.

Nous découvrirons l'origine de React, la distinction entre la programmation impérative et déclarative, et comment React a utilisé ces concepts pour se développer. Nous explorerons en détail les API de React et l'intervention de JSX pour simplifier et rendre plus intuitif le processus de développement.

Passer du code au DOM généré ne sera plus un secret pour vous grâce à notre approche pédagogique. Vous aurez également l'occasion de vous familiariser avec les composants React, ces entités de base qui font toute la puissance et la flexibilité de cette bibliothèque. Nous aborderons aussi les fragments React et l'importance des clés (keys) dans le fonctionnement de React.

De plus, pour ceux qui souhaitent aller encore plus loin, une introduction optionnelle à TypeScript est incluse.

Nous allons étonnamment loin dans ce module. À la fin du Module 1, vous comprendrez non seulement ce qu'est un composant React, mais aussi comment il est compilé en instruction React.createElement.

Module 2
Terminé

Interactivité

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.

Module 3
En cours

Manipulation de données

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.

Module 4
Prévu

Glow up

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.

Module 5
Prévu

State global

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.

Module 6
Prévu

Navigation

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.

Module 7
Prévu

Tester son app

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.

Module 8
Prévu

Déployer en production

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.

Module 9
Prévu

Optimisations

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.

Module 10
Prévu

Concepts avancés

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.

Module 11
Prévu

Frameworks React

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.

Qui sommes-nous ?

Le Crew

Coding Crew, c'est un collectif de développeurs passionnés, fondé par trois associés avec plus de 10 ans d'expérience dans le domaine du développement :

Animés par la même vision et partageant une passion pour l'entreprenariat, nous avons souhaité créer une communauté de développeurs passionnés, désireux de s'améliorer pour répondre au mieux aux attentes du marché. Pour soutenir cette mission, nous avons conçu notre propre plateforme de formation interactive sur laquelle nous proposons des cours de qualité et en français dans le domaine du développement web et logiciel.

Notre approche pédagogique va au-delà de l'explication du "comment développer quelque chose” : nous expliquons également et surtout le "pourquoi", afin de vous aider à construire un solide modèle mental et une compréhension approfondie des technologies abordées.

Notre plateforme est conçue pour favoriser l'apprentissage via une multitude de formats (markdown, vidéo, code playgrounds, quiz, etc.), des leçons détaillées et une expérience utilisateur soignée.

Rejoignez Coding Crew, formez-vous avec notre plateforme innovante et devenez membre d'une communauté de développeurs passionnés !

Nos engagements

Un accès illimité à notre formation, et à vie !
Accès à une curated list des meilleures resources web sur le sujet
Formation mise à jour régulièrement, pour suivre l'évolution de React
Enseigner une méthode pragmatique répondant aux besoins réels du marché

Rejoindre l'aventure

N'attendez plus, et inscrivez-vous avec votre email pour faire partie du Crew et participer à l'aventure !