Fetch API : опять же, вы используете это право🫸

Fetch API — это мощный инструмент, который позволяет отправлять HTTP-запросы на серверы и получать ответы в JavaScript. Он часто используется в React для извлечения данных из API и их отображения в пользовательском интерфейсе.

Теперь мы увидим графическое объяснение Fetch API.

Чем, наконец, я привел один собственный пример с подробным объяснением, обязательно ознакомьтесь с ним.

Итак, выше я попытался объяснить так, чтобы вам, ребята, не было скучно 🥱 и следите за обучением.

Дневник Хара — YouTube

Эррормания — YouTube

Свяжитесь со мной в телеграмме: -

Мы занимаемся проектами стека MERN. Мы делимся учебными пособиями, советами и примерами проектов. Присоединяйтесь к нам сегодня, чтобы оставаться в курсе
https://t.me/nodereact



Давайте создадим аккордеон в React 🌷
Ниже представлена ​​наша файловая структура, которой вы можете следовать, чтобы создать аккордеон в Reactmedium.com



Вот пример того, как использовать Fetch API в React для получения данных из внешнего API:

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const json = await response.json();
      setData(json);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Объяснение:

В этом примере мы используем хук useState для создания переменной состояния с именем data, в которой будут храниться данные, полученные из API. Мы также используем хук useEffect для получения данных при монтировании компонента.

Функция fetchData — это асинхронная функция, которая использует Fetch API для отправки запроса GET во внешний API и получения ответа в формате JSON. Затем функция setData используется для обновления состояния полученными данными.

Наконец, мы используем функцию map для рендеринга данных в пользовательском интерфейсе, сопоставляя массив данных и отображая каждый пост как элемент li с его заголовком и телом.

Это всего лишь базовый пример использования Fetch API в React. Существует множество различных вариантов использования Fetch API, таких как обработка ошибок, отправка данных с помощью различных методов HTTP и использование параметров запроса. В зависимости от вашего конкретного варианта использования вам может потребоваться изменить код в соответствии с вашими потребностями.



Многошаговая форма в React 👑
А вот и первая форма с «Step1.jsxmedium.com»



Большое спасибо Приятного обучения 😊