📊
2020
  • Supports de cours
  • LP TAIS
    • TP : JavaScript & DOM
    • TP : Ramda
    • TP : Canvas
    • TP : Initiation Ă  React.js
    • TP : React, Router & API
    • Projet
  • CNAM FIP 1A
    • TP : Les commandes de base
    • TP : Git et les branches
    • TP : Rebase
    • TP : GitLab
    • TP : CI
    • TP de groupe
Powered by GitBook
On this page
  • Mise en place minimaliste
  • Paramètres et API
  • Correction

Was this helpful?

  1. LP TAIS

TP : React, Router & API

Ce TP est a réalisé sur la base du précédent. Reprenez le même projet.

Mise en place minimaliste

  • Un router devra rĂ©gir toute la navigation de votre application (pas de <a href=...)

  • Chaque exercice sera reprĂ©sentĂ© par un composant

  • Un menu, visible en permanence, permettra d'accĂ©der Ă  chaque exercice du TP prĂ©cĂ©dent

  • L'url d'accès Ă  chaque exercice devra ĂŞtre du type : http://localhost:3000/exercice/1

Paramètres et API

Créez un nouveau composant Country, qui reprendra le code ci-dessous. Lisez-le bien, et assurez vous de l'avoir compris avant de continuer.

import React, { useEffect, useState } from "react";
import axios from "axios";

const Country = props => {
  const [countryFromUrl, setCountryFromUrl] = useState("");
  const [topLevelDomain, setTopLevelDomain] = useState("");
  const [capital, setCapital] = useState("");
  const [population, setPopulation] = useState(0);

  useEffect(() => {
    // TODO
  }, [props.match.params.name]);

  useEffect(() => {
    // TODO, appel Ă  l'API https://restcountries.eu/rest/v2/name/[COUNTRY_NAME]
    // extraction et sauvergarde des données à afficher (voir render())
  }, [countryFromUrl]);

  return (
    <div>
      <h1>{countryFromUrl}</h1>
      Domaine web : <b>{topLevelDomain}</b>
      <br />
      Capitale : <b>{capital}</b>
      <br />
      Population : <b>{population}</b>
      <br />
    </div>
  );
};

export default Country;

Comme vous pouvez le voir ligne 12, nous récupérerons le nom du pays à rechercher dans l'url de notre application. Il faudra pour cela définir une route dans App.js, qui acceptera un paramètre. Vous ne devez pas définir plusieurs routes.

Il n'est pas nécessaire de modifier le menu, mais vous pouvez toutefois y ajouter les entrées suivantes :

<Link to="/country/France">France</Link>
<Link to="/country/Germany">Allemagne</Link>
<Link to="/country/Canada">Canada</Link>

Correction

PreviousTP : Initiation Ă  React.jsNextProjet

Last updated 5 years ago

Was this helpful?

L'objectif de ce composant est d'appeler l'API , afin de récupérer des informations (domaine web, capitale, et population).

https://restcountries.eu/rest/v2/name/
https://codesandbox.io/s/tp-react-router-correction-r8b7s