Cette vidéo de formation s'adresse aux développeurs web Front End qui souhaitent mettre en place un système de navigation côté client sur une application web avec le framework React. Pour suivre cette vidéo, des connaissances de base sur React et sur le langage JavaScript sont recommandées.

Après une présentation générale de la librairie react-router et la préparation de l'environnement de développement, vous étudierez ensuite différents composants indispensables à la mise en place d'un système de navigation : création de liens, redirections, gestion de pages multiples…

Pour finir, vous serez invité à mettre en application toutes ces notions dans un projet concret : vous créerez le système de navigation complet d'une application permettant de consulter un registre de pays basé sur l'API restcountries.eu.

A l'issue de cette vidéo, vous serez ainsi en mesure de gérer un site multipage à l'aide de React !

Téléchargements

• Des fichiers complémentaires (43,3 Mo)

• Durée totale01h53
• Introduction
  • Différence entre le routing côté serveur et le routing côté client03:56
  • Présentation de la librairie react-router03:04
  • Présentation du projet à réaliser03:05
  • Préparation de l'environnement pour la réalisation du projet05:53
• Prise en main de react-router
  • Créer un premier navigateur et une première route05:29
  • Mettre en place plusieurs routes04:10
  • Créer un système de menus et des liens05:00
  • Transformer un menu en NavLink06:09
  • Créer une page d'erreur 40405:31
  • Créer une redirection avec le composant Redirect05:16
  • Comprendre les propriétés reliées au composant Route05:40
  • Comprendre le composant HoC (High Order Component) withRouter04:21
• Mise en application : réalisation d'un guide de pays
  • Réorganisation du code en différents composants13:03
  • Création du composant de recherche avec appel à l'API restcountries.eu09:13
  • Création des résulats du filtre de pays07:54
  • Création de la page propre à un pays et de ses liens11:51
  • Conversion d'un lien en un lien dynamique08:35
  • Conclusion sur l'ensemble du projet04:54