Appel d'une API avec fetch et axios

1. Structure HTML

Crée une page HTML index.html et ajoute la structure suivante dans le <body /> :

<dl>
    <dt id="word"></dt>
    <dd id="definition"></dd>
</dl>

Crée un script script.js et fait en sorte de le changer (en defer) dans le fichier index.html. Vérifie qu'il se charge bien avant de passer à la suite de l'exercice (astuce: un console.log fera l'affaire !)

2. Fetch

Utilise fetch pour appeller l'API suivante : https://random-words-api.vercel.app/word

Tu trouveras un exemple d'utilisation de fetch dans le premier code de cette page : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Fait un console.log du résultat :

[
  {
    "word": "Intellectualism",
    "definition": "Belief that all knowledge is derived from reason",
    "pronunciation": "Intelektualism"
  }
]

Pose-toi les questions suivantes :

quel est le type du résultat ? (c'est un tableau !)
comment récupérer la première case de ton résultat ? (data[0] !)
quel est le type de la première case ? (c'est un objet !)
quelles sont les propriétés de cet objet ? (word, definition et pronunciation !)
faire deux console.log séparés des valeurs des propriétés word et definition

3. Manipulation du DOM

Crée une fonction render qui prend un objet en paramètre.

affiche la valeur de la propriété word de l'objet dans la balise <dt />
affiche la valeur de la propriété definition de l'objet dans la balise <dd />

Teste ta fonction en l'appelant au lancement de la page, ex :

const sample = {
  word: "Intellectualism",
  definition: "Belief that all knowledge is derived from reason",
  pronunciation: "Intelektualism"
}
render(sample);

Une fois que ta fonction marche bien, appele-la au moment où tu reçois ta réponse de l'API, en lui passant l'argument adéquat.

4. React

Initialise un nouveau projet avec React. Vérifie qu'il se lance correctement.

Crée le composant Word (qui tu appelleras dans App) contenant le jsx suivant :

<dl>
    <dt></dt>
    <dd></dd>
</dl>
<button>Random word</button>

Crée un state const [description, setDescription] initialisé avec un objet :

{
  word: "Loading",
  definition: "..."
}

Dans ton jsx, appelle les valeurs des propriétés word (dans le <dt />) et definition (dans le <dd />) du state description.

Vérifie que le composant se change correctement avec les valeurs "Loading" et "...".

Ajoute une action au clic sur le bouton, permettant de lancer une nouvelle fonction loadWord.

Dans cette fonction, ajoute un console.log et vérifie qu'elle est bien appelée.

5. Axios

Installe la bibliothèque axios et importe la bibliothqèe dans le composant Word.

Dans ta fonction loadWord, utilise axios pour faire une requête permettant de charger un mot aléatoire avec sa définition : https://random-words-api.vercel.app/word

Une fois la réponse chargée, affiche-là dans un console.log.

Une fois que tu es sûr que la réponse est correcte, utilise la fonction setDescription afin de modifier le state (attention, la fonction s'attend à avoir un objet, pas un tableau !).

Vérifie qu'à chaque clic sur le bouton, un nouveau mot se charge bien.