Настройка проекта с Vite

Для работы с библиотекой React Aria необходимо создать современный проект на React, где будет обеспечена поддержка последних стандартов JavaScript и оптимизированный процесс сборки. Наиболее быстрый способ — использование Vite, который обеспечивает молниеносную разработку и интеграцию с TypeScript, если это необходимо.

Шаг 1. Создание проекта

В терминале выполняется команда:

npm create vite@latest my-react-aria-app
  • my-react-aria-app — имя проекта.
  • При выборе шаблона выбрать React или React + TypeScript, в зависимости от необходимости строгой типизации.

После создания проекта переходят в его каталог:

cd my-react-aria-app

Шаг 2. Установка зависимостей

Vite создает минимальный проект с базовой конфигурацией. Чтобы добавить React Aria, устанавливают следующие пакеты:

npm install @react-aria/button @react-aria/menu @react-aria/overlays @react-stately/button
  • @react-aria/button — предоставляет доступные для клавиатуры и скринридеров кнопки.
  • @react-aria/menu — реализует поведение меню с поддержкой доступности.
  • @react-aria/overlays — управление модальными окнами и всплывающими элементами.
  • @react-stately/button — состояние кнопок и других интерактивных элементов.

Также рекомендуется установить react и react-dom версии 18 и выше:

npm install react@18 react-dom@18

Шаг 3. Настройка TypeScript (опционально)

Если выбран проект с TypeScript, убедитесь, что в tsconfig.json включены следующие опции:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

Это обеспечит строгую типизацию и корректное использование JSX с React 18.

Шаг 4. Настройка Vite

Файл конфигурации vite.config.js или vite.config.ts уже содержит базовую настройку. Для интеграции с React Aria можно убедиться, что подключен плагин React:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true
  }
});
  • plugins: [react()] — гарантирует поддержку JSX и Fast Refresh.
  • server.open: true — открывает браузер автоматически при запуске.

Шаг 5. Структура проекта

Рекомендуемая структура для проекта с React Aria:

my-react-aria-app/
├─ public/
├─ src/
│  ├─ components/
│  │  ├─ Button.tsx
│  │  ├─ Menu.tsx
│  │  └─ Modal.tsx
│  ├─ App.tsx
│  ├─ main.tsx
│  └─ styles.css
├─ package.json
├─ vite.config.ts
└─ tsconfig.json
  • components/ — хранит все интерактивные элементы с React Aria.
  • App.tsx — главный компонент приложения.
  • main.tsx — точка входа, где React рендерится в DOM.

Шаг 6. Настройка точек входа

В src/main.tsx должен быть минимальный рендер:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  • React.StrictMode — помогает выявлять потенциальные ошибки при разработке.
  • document.getElementById('root')! — использование non-null assertion для TypeScript.

Шаг 7. Запуск проекта

Для запуска локального сервера используется команда:

npm run dev

Vite автоматически стартует сервер на http://localhost:5173, поддерживая Hot Module Replacement (HMR) для мгновенного обновления интерфейса при изменениях.

Шаг 8. Подключение стилей

React Aria не требует встроенной стилизации, поэтому все визуальные эффекты и темы нужно добавлять вручную через CSS или CSS-in-JS. Например, для базовой кнопки:

.button {
  padding: 8px 16px;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:focus {
  outline: 2px solid #ffbf00;
}

Это обеспечивает видимость фокуса и соответствие стандартам доступности.

Шаг 9. Проверка готовности React Aria

Создать минимальный компонент кнопки:

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

export function AriaButton(props: { onPress: () => void; children: React.ReactNode }) {
  const ref = useRef<HTMLButtonElement>(null);
  const { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}
  • useButton автоматически обрабатывает события клавиатуры, фокус и роль для скринридеров.
  • ref передается в DOM-элемент, что обязательно для корректной работы хуков React Aria.

Эта настройка создаёт полностью функциональную базу для использования React Aria в современных приложениях на React с Vite, обеспечивая быструю разработку, строгую типизацию и соответствие стандартам доступности.

Оглавление