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

Для начала работы с библиотекой React Aria в проекте на JavaScript необходимо подготовить современную среду сборки. В качестве инструмента сборки используется Webpack, обеспечивающий модульность, поддержку JSX и интеграцию с React.

Инициализация проекта

  1. Создание директории проекта:
mkdir react-aria-webpack
cd react-aria-webpack
npm init -y
  1. Установка основных зависимостей:
npm install react react-dom @react-aria/utils @react-aria/button

Здесь @react-aria/utils предоставляет низкоуровневые утилиты для управления фокусом, событиями и ARIA-атрибутами, а @react-aria/button обеспечивает готовые хук-компоненты для кнопок с поддержкой доступности.

  1. Установка зависимостей для разработки:
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader

Эти пакеты позволят обрабатывать JS, JSX и стили, а также запускать локальный сервер с горячей перезагрузкой.

Настройка Webpack

Создание файла webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    hot: true,
    port: 3000,
    open: true,
  },
  mode: 'development',
};
  • entry – точка входа приложения.
  • output – путь и имя итогового бандла.
  • resolve.extensions – разрешённые расширения для импорта модулей.
  • module.rules – правила обработки файлов через babel-loader и стили.
  • plugins – генерация HTML с подключением бандла.
  • devServer – настройка локального сервера с горячей перезагрузкой.

Настройка Babel

Создание файла .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
  • @babel/preset-env – компиляция современных возможностей JavaScript в совместимый код.
  • @babel/preset-react – поддержка JSX синтаксиса.

Структура проекта

Рекомендуемая структура:

react-aria-webpack/
├─ public/
│  └─ index.html
├─ src/
│  ├─ index.jsx
│  ├─ App.jsx
│  └─ styles.css
├─ package.json
├─ webpack.config.js
└─ .babelrc

Пример базового HTML в public/index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>React Aria App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Пример интеграции React Aria

Файл src/App.jsx с кнопкой, поддерживающей доступность:

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

export default function App() {
  const ref = React.useRef();
  const { buttonProps } = useButton(
    { onPress: () => alert('Нажата кнопка') },
    ref
  );

  return (
    <div style={{ padding: '20px' }}>
      <button {...buttonProps} ref={ref}>
        Нажми меня
      </button>
    </div>
  );
}

Файл src/index.jsx:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Поддержка стилей

Файл src/styles.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Webpack автоматически импортирует стили через style-loader и css-loader.

Запуск проекта

  1. Добавление скрипта в package.json:
"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}
  1. Запуск локального сервера:
npm start

Приложение будет доступно по адресу http://localhost:3000, кнопка будет полностью функциональна с поддержкой ARIA.

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

Оглавление