Шаги, которым мы будем следовать при создании приложения:

<aside> 🏗️

1. Настройте приложение React с помощью Vite и установите Paper CSS для стилизации и react-query для получения данных
2. Загрузите страны и отобразите их в виде select dropdown, по умолчанию выбраны Нидерланды
3. Загрузите государственные праздники и отобразите их в виде списка </aside>

Настройка приложения React

Чтобы начать работу, инициализируйте проект react + vite c Typescript.

npm create vite@latest

Я рекомендую настроить репозиторий git и удалить стандартные компоненты, поставляемые с Vite - вы можете перейти по ссылке выше для получения пошаговых инструкций.

Чтобы не тратить слишком много времени на стилизацию, давайте просто воспользуемся Paper CSS. Обновите свои index.html, чтобы включить в них предварительно созданную таблицу стилей:

...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
  rel="stylesheet"
  href="<https://unpkg.com/[email protected]/dist/paper.min.css>"
/>
<title>Vite + React + TS</title>
...

Затем мы хотим использовать React Query для получения данных, так что давайте установим и его:

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

Нам также потребуется конфигурация.

Для этого мы определим наш "клиент запросов" и сделаем его доступным для всех наших компонентов, используя QueryProvider:

// App.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import PublicHolidays from "./components/PublicHolidays";

// Создайте клиента
const queryClient = new QueryClient();

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

export default App;

Мы также создали placeholder компонент для раздела о государственных праздниках, в разделе components/: