Skip to content

Commit 50c0bf3

Browse files
authored
French version : Update part2c.md : remove exercices
Remove exercices that doesn't exist anymore in the english version of the course. (countries exercices)
1 parent 47c6c62 commit 50c0bf3

File tree

1 file changed

+1
-75
lines changed

1 file changed

+1
-75
lines changed

src/content/2/fr/part2c.md

Lines changed: 1 addition & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ L'application React s'exécutant dans le navigateur récupère les données au f
540540

541541
<div class="tasks">
542542

543-
<h3>Exercices 2.11.-2.14.</h3>
543+
<h3>Exercices 2.11.</h3>
544544

545545
<h4>2.11: phonebook, étape6</h4>
546546

@@ -590,77 +590,3 @@ Error: listen EADDRINUSE 0.0.0.0:3001
590590
cela signifie que le port 3001 est déjà utilisé par une autre application, par ex. en cours d'utilisation par un json-server déjà en cours d'exécution. Fermez l'autre application ou modifiez le port au cas où cela ne fonctionnerait pas.
591591

592592
Modifiez l'application de sorte que l'état initial des données soit extrait du serveur à l'aide de la bibliothèque <i>axios</i>. Terminez la récupération avec un [Hook d'effet](https://reactjs.org/docs/hooks-effect.html).
593-
594-
<h4>2.12* countries, étape1</h4>
595-
596-
L'API [https://restcountries.com](https://restcountries.com) fournit des données pour différents pays dans un format lisible par machine, appelé API REST.
597-
598-
Créer une application, dans laquelle on peut consulter les données de différents pays. L'application devrait probablement obtenir les données du end point [all](https://restcountries.com/v3.1/all).
599-
600-
L'interface utilisateur est très simple. Le pays à afficher est trouvé en tapant une requête de recherche dans le champ de recherche.
601-
602-
S'il y a trop de pays (plus de 10) qui correspondent à la requête, l'utilisateur est invité à préciser sa requête :
603-
604-
![](../../images/2/19b1.png)
605-
606-
S'il y a dix pays ou moins, mais plus d'un, tous les pays correspondant à la requête sont affichés :
607-
608-
![](../../images/2/19b2.png)
609-
610-
Lorsqu'il n'y a qu'un seul pays correspondant à la requête, les données de base du pays (par exemple, sa capitale et sa superficie), son drapeau et les langues qui y sont parlées sont affichés :
611-
612-
![](../../images/2/19c3.png)
613-
614-
**NB** : Il suffit que votre application fonctionne pour la plupart des pays. Certains pays, comme le <i>Soudan</i>, peuvent être difficiles à soutenir, car le nom du pays fait partie du nom d'un autre pays, le <i>Soudan du Sud</i>. Vous n'avez pas à vous soucier de ces cas extrêmes.
615-
616-
**ATTENTION** create-react-app transformera automatiquement votre projet en un référentiel git à moins que vous ne créiez votre application dans un référentiel git existant. **Il est fort probable que vous ne vouliez pas que chacun de vos projets soit un référentiel distinct**, il vous suffit donc d'exécuter la commande _rm -rf .git_ à la racine de votre application.
617-
618-
<h4>2.13*: countries, étape2</h4>
619-
620-
**Il y a encore beaucoup à faire dans cette partie, alors ne restez pas bloqué sur cet exercice !**
621-
622-
Améliorez l'application de l'exercice précédent, de sorte que lorsque les noms de plusieurs pays sont affichés sur la page, il y a un bouton à côté du nom du pays, qui, lorsqu'il est pressé, affiche la vue pour ce pays :
623-
624-
![](../../images/2/19b4.png)
625-
626-
Dans cet exercice, il suffit également que votre application fonctionne pour la plupart des pays. Les pays dont le nom apparaît dans le nom d'un autre pays, comme le <i>Soudan</i>, peuvent être ignorés.
627-
628-
<h4>2.14*: countries, étape3</h4>
629-
630-
**Il y a encore beaucoup à faire dans cette partie, alors ne restez pas bloqué sur cet exercice !**
631-
632-
Ajoutez à la vue montrant les données d'un seul pays, le bulletin météo de la capitale de ce pays. Il existe des dizaines de fournisseurs de données météorologiques. Une API suggérée est [https://openweathermap.org](https://openweathermap.org). Notez que cela peut prendre quelques minutes avant qu'une clé API générée soit valide.
633-
634-
![](../../images/2/19x.png)
635-
636-
Si vous utilisez Open weather map, trouvez [ici](https://openweathermap.org/weather-conditions#Icon-list) une description de comment obtenir des icônes météo.
637-
638-
**NB :** Dans certains navigateurs (tels que Firefox), l'API choisie peut envoyer une réponse d'erreur, ce qui indique que le cryptage HTTPS n'est pas pris en charge, bien que l'URL de la requête commence par _http://_. Ce problème peut être résolu en effectuant l'exercice à l'aide de Chrome.
639-
640-
**NB :** Vous avez besoin d'une clé API pour utiliser presque tous les services météorologiques. N'enregistrez pas la clé API dans le contrôle de code source ! Ni coder en dur la clé API dans votre code source. Utilisez plutôt une [variable d'environnement](https://create-react-app.dev/docs/adding-custom-environment-variables/) pour enregistrer la clé.
641-
642-
En supposant que la clé API est <i>t0p53cr3t4p1k3yv4lu3</i>, lorsque l'application est démarrée comme suit :
643-
644-
```bash
645-
export REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3 && npm start // For Linux/macOS Bash
646-
($env:REACT_APP_API_KEY="t0p53cr3t4p1k3yv4lu3") -and (npm start) // For Windows PowerShell
647-
set "REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3" && npm start // For Windows cmd.exe
648-
```
649-
650-
vous pouvez accéder à la valeur de la clé depuis l'objet _process.env_ :
651-
652-
```js
653-
const api_key = process.env.REACT_APP_API_KEY
654-
// la variable api_key a maintenant la valeur définie au démarrage
655-
```
656-
657-
Notez que si vous avez créé l'application à l'aide de `npx create-react-app ...` et que vous souhaitez utiliser un nom différent pour votre variable d'environnement, le nom de la variable d'environnement doit toujours commencer par `REACT_APP_`. Vous pouvez également utiliser un fichier `.env` plutôt que de le définir sur la ligne de commande à chaque fois en créant un fichier intitulé '.env' à la racine du projet et en ajoutant ce qui suit.
658-
659-
```
660-
# .env
661-
662-
REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3
663-
```
664-
665-
Notez que vous devrez redémarrer le serveur pour appliquer les modifications.
666-
</div>

0 commit comments

Comments
 (0)