Как подгрузить информация с mock-сервера при загрузке страницы?

Для подгрузки информации с mock-сервера при загрузке страницы в React, можно использовать методы жизненного цикла компонента, в частности componentDidMount().

1. В первую очередь, необходимо установить mock-сервер, который будет эмулировать API-запросы и возвращать нужные данные. Например, можно использовать библиотеку json-server, которая позволяет создать RESTful API на основе JSON файла. Установить ее можно с помощью команды npm install -g json-server.

2. Далее, создаем компонент React, который будет отображать полученные данные. В этом компоненте обращаемся к API в методе componentDidMount().

import React, { Component } from "react";

class MyComponent extends Component {
  state = {
    data: {},
    isLoading: true,
    error: null
  };

  componentDidMount() {
    fetch("http://localhost:3000/data") // Адрес вашего mock-сервера
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Ошибка загрузки данных");
        }
      })
      .then(data => this.setState({ data: data, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }

  render() {
    const { data, isLoading, error } = this.state;

    if (error) {
      return <div>Произошла ошибка: {error.message}</div>;
    }

    if (isLoading) {
      return <div>Загрузка...</div>;
    }

    return (
      <div>
        {/* Отображение полученных данных */}
        {data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;

Здесь мы используем метод fetch() для выполнения GET-запроса к адресу нашего mock-сервера (http://localhost:3000/data), который возвращает данные в формате JSON. Затем, в зависимости от результата запроса, мы обновляем состояние компонента (setState()) и отображаем полученные данные.

3. В основном компоненте приложения или в файле, где вы хотите использовать компонент MyComponent, импортируем его и добавляем в render.

import React from "react";
import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <h1>Мое приложение</h1>
      <MyComponent />
    </div>
  );
}

export default App;