Чтобы настроить проект, мы можем использовать Vite starter with Typescript.

Затем давайте исследуем API Hacker News, чтобы понять, какие данные нам нужно будет получить.

Исследование API

Прокручивая до документации, мы видим, что ендпоинтом для получения "Лучших статей" является https://hacker-news.firebaseio.com/v0/topstories.json.

Однако это возвращает только идентификаторы, поэтому давайте посмотрим, как мы можем получить подробную информацию о каждой статье.

Прокрутив немного вверх, мы увидим, что ендпоинт, который мы ищем - это https://hacker-news.firebaseio.com/v0/item/<ID>.json

Теперь мы готовы приступить к созданию пользовательского интерфейса!

Извлечение данных

Рекомендуется использовать React Query при выборке данных в React, поэтому давайте установим его.

npm i @tanstack/react-query
npm i -D @tanstack/eslint-plugin-query

Далее нам нужно подключить провайдера. Я также создал компонент-заполнитель для HackerNewsTop10Articles:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import HackerNewsTop10 from "./HackerNewsTop10";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HackerNewsTop10 />
    </QueryClientProvider>
  );
}

export default App;

После этого мы можем просто получить данные. Для начала давайте просто выведем идентификаторы первых 10 элементов, чтобы увидеть, как все работает вместе:

import { useQuery } from "@tanstack/react-query";

const HackerNewsTop10 = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ["topStories"],
    queryFn: async () => {
      const response = await fetch(
        "<https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty>"
      );
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    },
  });
  return (
    <ul>
      {data?.slice(0, 10).map((id: number) => (
        <li key={id}>
          <a
            href={`https://news.ycombinator.com/item?id=${id}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {id}
          </a>
        </li>
      ))}
      {isLoading && <li>Loading...</li>}
      {error && <li>Error loading data: {error.message}</li>}
      {data && data.length === 0 && <li>No stories found.</li>}
    </ul>
  );
};

export default HackerNewsTop10;

И действительно, это работает! Мы видим список идентификаторов.

Отображение подробной информации о статье