Use fetch

src/App.jsx

@@ -1,16 +1,29 @@
-import { useState } from "react";
 import "./App.css";
+import { useFetch } from "./useFetch";
 
-function App() {
-  const [count, setCount] = useState(0);
+const URL = "https://jsonplaceholder.typicode.com/posts";
+
+export function App() {
+  const { data, isLoading, error, refetch } = useFetch(URL);
 
   return (
     <>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      {error && <p>Ошибка: {error}</p>}
+      <div>
+        <button onClick={refetch}>{isLoading ? "Загрузка..." : "Обновить"}</button>
+        {data && (
+          <div class={"container"}>
+            <ul>
+              {data.map((item) => (
+                <li key={item.id}>
+                  <p>{item.title}</p>
+                  <div>{item.body}</div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
       </div>
     </>
   );
 }
-
-export default App;

src/index.css

@@ -16,7 +16,7 @@
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  place-items: flex-start;
   min-width: 320px;
   min-height: 100vh;
   color: #213547;
@@ -25,14 +25,15 @@ body {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
+  border: 1px solid gray;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   background-color: #f9f9f9;
   cursor: pointer;
   transition: border-color 0.25s;
+  width: 200px;
 }
 button:hover {
   border-color: #646cff;
@@ -41,3 +42,30 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+ul {
+  list-style: none;
+}
+
+li {
+  background-color: rgb(251 248 232);
+  border-radius: 8px;
+  border: 1px gray solid;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+
+li p {
+  text-align: center;
+  font-weight: bold;
+}
+
+li div {
+  text-align: justify;
+}
+
+.container {
+  margin-right: auto;
+  text-align: center;
+  margin-left: auto;
+}

src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./App.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);

src/useFetch.jsx

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useFetch(url) {
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const res = await fetch(url);
+      setData(res.json());
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, isLoading, error, refetch: fetchData };
+}