Tirez un maximum de ce cours

Bienvenue dans ce cours sur React Router !

Découvrez votre professeur

Aurélien Antonio est développeur, référent technique sur le parcours React et mentor auprès des étudiants. Il a créé ce cours pour vous permettre d'aller plus loin dans votre maîtrise de React.

Lisez activement et pratiquez

Ce cours est conçu pour être pratique et progressif. Chaque chapitre vous explique un concept clé de React Router, puis vous montre comment l'implémenter avec des exemples de code concrets.

• Lisez attentivement le texte de chaque chapitre pour comprendre les concepts et découvrir comment les mettre en œuvre.

• Reproduisez les exemples de code au fur et à mesure. Ne vous contentez pas de lire : tapez le code vous-même ! C'est en pratiquant que vous allez vraiment vous approprier les concepts. 

• Expérimentez : une fois un concept compris, n'hésitez pas à modifier le code, à tester différentes variations, à casser des choses pour voir ce qui se passe. C'est comme ça qu'on apprend vraiment !

À vous de jouer !

Ce cours a été conçu autour d'un exercice fil rouge : au fil des chapitres, nous allons créer ensemble un Dashboard d'entreprise pour l'agence Shiny. Les notions vues dans chaque chapitre vous permettront d'enrichir cette application au fur et à mesure, en lui ajoutant de nouvelles fonctionnalités de navigation.

Voici ce que nous allons construire :

• Chapitre 2 : Configuration de React Router et création des premières routes

• Chapitre 3 : Navigation avec des routes dynamiques pour afficher les détails des employés et projets

• Chapitre 4 : Routes imbriquées et layouts partagés pour structurer l'application

• Et bien plus encore au fil du cours !

À la fin de chaque chapitre, vous trouverez des exercices pratiques pour aller plus loin. Ces exercices vous donneront une véritable expérience pratique des concepts abordés. L'idée est d'apprendre en faisant !

Faites des allers-retours avec les bases de React si nécessaire

Ce cours aborde React Router en partant du principe que vous maîtrisez les bases de React. Si vous n'avez jamais utilisé React ou que certaines notions vous semblent floues, je vous encourage à revoir les concepts suivants :

• Les composants React (fonctions et JSX)

• Les props et comment passer des données entre composants

• Les hooks de base :useState,useEffect

• La gestion des événements (onClick, onChange, etc.)

• Le rendu conditionnel et les listes avec.map()

N'hésitez pas à faire des allers-retours avec la documentation officielle de React ou un cours React débutant si ces notions ne vous disent rien. C'est normal de ne pas tout savoir par cœur ! 

Itérez et prenez votre temps

À certains moments, vous aurez l'impression d'avancer très vite, et à d'autres, particulièrement lentement : c'est normal ! Chacun a son rythme d'apprentissage.

• Avancez à votre rythme : ne vous mettez pas la pression. Il vaut mieux bien comprendre un chapitre avant de passer au suivant.

• Laissez-vous le temps de digérer les informations. Faire une pause entre deux chapitres, c'est parfois ce qui permet au cerveau de bien assimiler.

• Revenez sur les concepts difficiles : si quelque chose ne passe pas, n'hésitez pas à relire le chapitre, à refaire les exercices, ou à explorer la documentation officielle de React Router.

• Le plus important : que vous soyez capable de mettre en pratique ce que vous avez appris ! La théorie sans pratique ne sert à rien en développement.

Utilisez les ressources disponibles

Vous n'êtes pas seul dans votre apprentissage ! Voici quelques ressources précieuses :

• La documentation officielle de React Router : reactrouter.com - c'est LA référence, toujours à jour.

• La documentation de React : react.dev - pour revoir les bases si nécessaire.

• Le code de ce cours : vous avez accès à tout le code source de l'application Shiny que nous construisons ensemble. N'hésitez pas à le consulter, à le modifier, à expérimenter !

Gardez l'objectif en tête

À la fin de ce cours, vous serez capable de :

• Configurer React Router dans une application React

• Créer des routes statiques et dynamiques

• Naviguer entre les pages avec Link et NavLink

• Gérer les paramètres d'URL avecuseParams

• Structurer votre application avec des routes imbriquées et des layouts

• Créer une navigation programmatique avecuseNavigate

• Gérer les erreurs 404 et les routes catch-all

Bref, vous aurez toutes les cartes en main pour créer des applications React modernes avec une navigation fluide et professionnelle ! 

Alors, prêt à vous lancer ?

Vous avez sûrement hâte de rentrer dans le vif du sujet ? N'attendez plus, c'est parti dans le prochain chapitre ! 

Nous allons commencer par découvrir ce qu'est une Single Page Application et pourquoi React Router est essentiel pour ce type d'application.

Bon apprentissage !