> formation Technologies numériques > formation Technologies Web > formation Développement Front-End > formation React, gérez la navigation de votre application web avec react-router

Avis loadedERROR Avis : La référence d'objet n'est pas définie à une instance d'un objet.
Toutes nos formations Développement Front-End

Formation React, gérez la navigation de votre application web avec react-router
tutorat en option
E-learning

Stage pratique
100% à distance
Durée : 2 heures 47 mn
Réf : 4VT
Prix  2021 : 35 € H.T.
  • Programme
  • Participants / Prérequis
Programme

Ces tutoriels de formation 100% à distance ont pour objectifs de vous permettre de mettre en place un système de navigation côté client sur une application web avec le framework React. Ils s'adressent à un public de développeurs web Front End ou toute personne possédant des connaissances de base sur React et en langage JavaScript. La pédagogie s'appuie sur un auto-apprentissage séquencé par actions de l’utilisateur sur l’environnement à maîtriser.

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :
  • Comprendre la librairie react-router
  • Préparer l'environnement de développement
  • Comprendre les composants pour la navigation : création de liens, redirections, gestion de pages multiples…
  • Créer le système de navigation complet d'une application.

Démonstration

Reproduire avec son logiciel ce qui est montré dans chaque séquence. Les documents utilisés dans cette formation sont téléchargeables pour s'exercer.

Méthodes pédagogiques

Pédagogie 100% à distance s'appuyant sur des tutoriels vidéos. Un auto-apprentissage séquencé par actions utilisateur sur le logiciel à maîtriser.
PROGRAMME DE FORMATION

Appréhender la navigation de votre application web avec react-router

  • Différence entre le routing côté serveur et le routing côté client.
  • Présentation de la librairie react-router.
  • Présentation du projet à réaliser.
  • Préparation de l'environnement pour la réalisation du projet.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Prendre en main react-router

  • Création d'un premier navigateur et d'une première route.
  • Mise en place de plusieurs routes.
  • Création d'un système de menus et des liens.
  • Transformation d'un menu en NavLink.
  • Création d'une page d'erreur 404.
  • Création d'une redirection avec le composant Redirect.
  • Propriétés reliées au composant Route.
  • Composant HoC (High Order Component) withRouter.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Mettre en application : réaliser un guide de pays

  • Réorganisation du code en différents composants.
  • Création du composant de recherche avec appel à l'API restcountries.eu.
  • Création des résultats du filtre de pays.
  • Création de la page propre à un pays et de ses liens.
  • Conversion d'un lien en un lien dynamique.
  • Conclusion sur l'ensemble du projet.

Démonstration
Reproduire avec son logiciel ce qui est montré dans chaque séquence et faire les TP.

Participants / Prérequis

» Participants

Développeurs web Front End ou toute personne ayant des connaissances de base sur React et en langage JavaScript. .

» Prérequis

Connaissances de base sur React et en langage JavaScript.
Intra / sur-mesure

Demande de devis intra-entreprise
(réponse sous 48h)

Vos coordonnées

En cochant cette case, j’atteste avoir lu et accepté les conditions liées à l’usage de mes données dans le cadre de la réglementation sur la protection des données à caractère personnel (RGPD).
Vous pouvez à tout moment modifier l’usage de vos données et exercer vos droits en envoyant un email à l’adresse rgpd@orsys.fr
En cochant cette case, j’accepte de recevoir les communications à vocation commerciale et promotionnelle de la part d’ORSYS Formation*
Vous pouvez à tout moment vous désinscrire en utilisant le lien de désabonnement inclus dans nos communications.
* Les participants inscrits à nos sessions de formation sont également susceptibles de recevoir nos communications avec la possibilité de se désabonner à tout moment.