Zrozumieć React

Praca z APIPobieranie danych
Powrót do lekcji

Używając loaderów i hooka useLoaderData zaimplementuj pobieranie danych przy użyciu routera. Komponent UsersList wykorzystuję zwykłą tablicę users i mapuje ją na elementyli. Zamiast wyświetlać dane zapisane w pliku JS, pobierz listę użytkowników z adresu: https://jsonplaceholder.typicode.com/users(jest to publiczne, darmowe i bezpieczne API powszechnie wykorzystywane do nauki - możesz sprawdzić jego dokumentację tutaj)
Obiekty zwrócone w liście obiektów zawierają pola id, username i email, zupełnie tak jak obiekty w początkowej tablicy.

Twój kod 💻

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { UsersList } from "./UsersList";


const router = createBrowserRouter([
  {
    element: <UsersList/>,
    path: "/",
  },
  
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Open Sandbox

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Praca z APIPobieranie danychPowrót do lekcji

Twój kod 💻

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl

Praca z APIPobieranie danych
Powrót do lekcji

Dla własnej wygody skorzystaj z platformy z zadaniamy w trybie desktopowym 🙏
Jeżeli potrzebujesz dostępu do zadań w wersji mobile skontaktuj się z nami na kontakt@jakzaczacprogramowac.pl