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.
1
import React, { useEffect, useState } from "react";
2
import axios from "axios";
3
​
4
const Country = props => {
5
  const [countryFromUrl, setCountryFromUrl] = useState("");
6
  const [topLevelDomain, setTopLevelDomain] = useState("");
7
  const [capital, setCapital] = useState("");
8
  const [population, setPopulation] = useState(0);
9
​
10
  useEffect(() => {
11
    // TODO
12
  }, [props.match.params.name]);
13
​
14
  useEffect(() => {
15
    // TODO, appel à l'API https://restcountries.eu/rest/v2/name/[COUNTRY_NAME]
16
    // extraction et sauvergarde des données à afficher (voir render())
17
  }, [countryFromUrl]);
18
​
19
  return (
20
    <div>
21
      <h1>{countryFromUrl}</h1>
22
      Domaine web : <b>{topLevelDomain}</b>
23
      <br />
24
      Capitale : <b>{capital}</b>
25
      <br />
26
      Population : <b>{population}</b>
27
      <br />
28
    </div>
29
  );
30
};
31
​
32
export default Country;
33
​
Copied!
L'objectif de ce composant est d'appeler l'API https://restcountries.eu/rest/v2/name/, afin de récupérer des informations (domaine web, capitale, et population).
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 :
1
<Link to="/country/France">France</Link>
2
<Link to="/country/Germany">Allemagne</Link>
3
<Link to="/country/Canada">Canada</Link>
Copied!
Correction
​https://codesandbox.io/s/tp-react-router-correction-r8b7s​

LP TAIS - Previous

TP : Initiation à React.js

Next - LP TAIS

Projet

Last modified 2yr ago

Copy link

Contents

Mise en place minimaliste

Paramètres et API

Correction