Детальный интерактивный гайд по хукам ReactJS с практическими примерами и живыми демонстрациями
- О проекте
- Возможности
- Технологии
- Быстрый старт
- Структура проекта
- Документация по хукам
- Разработка
- Тестирование
- Сборка
- Вклад в проект
- Лицензия
Learn ReactJS Hooks — это интерактивная платформа для изучения хуков React. Проект предоставляет детальную документацию, практические примеры и живые демонстрации для каждого хука React.
- 📚 Обучение: Подробное объяснение каждого хука с примерами
- 🎮 Интерактивность: Живые демонстрации и практические примеры
- 🎯 Практика: Возможность экспериментировать с кодом в реальном времени
- 📊 Прогресс: Отслеживание изученных хуков и статистика обучения
- Детальные описания каждого хука React
- Синтаксис и API с примерами использования
- Лучшие практики и типичные ошибки
- Советы и рекомендации от экспертов
- Живые демонстрации с возможностью взаимодействия
- Редактируемые блоки кода для экспериментов
- Мгновенный результат без перезагрузки страницы
- Подсветка синтаксиса для лучшего понимания
- Интерактивные упражнения для закрепления знаний
- Реальные сценарии использования хуков
- Пошаговые руководства от простого к сложному
- Система прогресса и достижений
- Статистика изучения хуков
- Отслеживание прогресса по категориям
- Рекомендации для дальнейшего изучения
- История активности пользователя
- Обмен опытом с другими разработчиками
- Обсуждение лучших практик использования хуков
- Поддержка и помощь от сообщества
- Совместное изучение и развитие навыков
- React 19.1.0 — современная библиотека для создания пользовательских интерфейсов
- TypeScript 5.8.3 — типизированный JavaScript для надежной разработки
- Vite 7.0.4 — быстрый инструмент сборки для современной веб-разработки
- React Router 6.30.1 — маршрутизация для React приложений
- Tailwind CSS 3.4.17 — utility-first CSS фреймворк
- Lucide React — красивые иконки
- React Syntax Highlighter — подсветка синтаксиса кода
- Prism.js — дополнительная подсветка синтаксиса
- ESLint 9.30.1 — статический анализ кода
- Prettier 3.2.5 — форматирование кода
- Vitest 2.1.8 — современный тестовый фреймворк
- Testing Library — утилиты для тестирования React компонентов
- PostCSS & Autoprefixer — обработка CSS
- Husky & lint-staged — Git hooks для качества кода
🚀 Основные изменения:
- 🔧 Миграция на TypeScript: Все файлы
.jsxпереименованы в.tsxс полной типизацией - 📦 Модульная структура: Рефакторинг
hooksData.js(1058 → 60 строк) с разделением на модули - 🎯 Оптимизация CodeBlock: Разбит на мелкие компоненты (241 → 80 строк)
- 🛡️ Error Boundaries: Добавлена обработка ошибок на уровне приложения
- ⚡ Производительность: Мемоизация, lazy loading, оптимизированные ререндеры
- 🧪 Расширенное тестирование: Покрытие увеличено с 2 до 6+ файлов тестов
🔧 Конфигурация:
- ESLint для TypeScript: Обновлена конфигурация линтера
- Prettier + Husky: Автоматическое форматирование и pre-commit хуки
- CI Pipeline: Добавлена проверка TypeScript типов
📚 Документация:
- README.md: Обновлен с TypeScript и актуальной структурой
- DEPLOYMENT.md: Упрощен, оставлен только CI
- REFACTORING_SUMMARY.md: Подробный отчет о рефакторинге
📊 Статистика улучшений:
- Размер CodeBlock: -67% (241 → 80 строк)
- Размер hooksData: -94% (1058 → 60 строк)
- Покрытие тестами: +200% (2 → 6+ файлов)
- Типизация: +100% (0% → 100%)
- CI проверки: +67% (3 → 5 этапов)
📖 Подробная информация о рефакторинге: См. REFACTORING_SUMMARY.md
- 🎨 Единообразные код блоки: Все страницы теперь используют компонент
CodeBlockс красивой подсветкой синтаксиса - ✨ Улучшенный UI: Код блоки на страницах Examples и Practice теперь имеют градиентные стили и подсветку
- 🔧 Рефакторинг: Заменены простые
<pre>теги на полнофункциональный компонентCodeBlock - 📱 Адаптивность: Код блоки корректно отображаются в обеих темах (светлой и темной)
- 🎯 Консистентность: Единый стиль отображения кода во всем приложении
- 🎨 Гармоничная компоновка: Переработана сетка главной страницы для лучшего баланса элементов
- 📱 Адаптивная сетка: Первый блок (Quick Start) теперь использует 2x2 сетку вместо 3+1
- ➕ Новый раздел: Добавлен блок "Сообщество" для лучшего баланса второго раздела
- 🎯 Улучшенная отзывчивость: Обновлен CSS класс
grid-responsiveдля более гибкой компоновки - 🖼️ Превью проекта: Добавлено изображение превью в README для лучшего представления проекта
- Полная документация по React Hooks
- Интерактивные примеры и демонстрации
- Система отслеживания прогресса
- Адаптивный дизайн
- Node.js версии 20.0.0 или выше
- npm версии 8.0.0 или выше
-
Клонируйте репозиторий
git clone https://github.com/FrankFMY/learn-reactjs-hooks.git cd learn-reactjs-hooks -
Установите зависимости
npm install
-
Запустите проект в режиме разработки
npm run dev
-
Откройте браузер
http://localhost:5173
# Предварительный просмотр сборки
npm run preview
# Запуск тестов
npm test
# Запуск тестов с UI
npm run test:ui
# Проверка кода линтером
npm run lint
# Проверка TypeScript типов
npm run type-check
# Форматирование кода
npm run format
# Сборка для продакшена
npm run buildlearn-reactjs-hooks/
├── public/ # Статические файлы
│ ├── vite.svg
│ └── CNAME
├── src/
│ ├── assets/ # Ресурсы (изображения, иконки)
│ │ └── react.svg
│ ├── components/ # React компоненты
│ │ ├── CodeBlock.tsx # Блок кода с подсветкой
│ │ ├── CodeBlockDemo.tsx # Демонстрация кода
│ │ ├── CodeEditor.tsx # Редактор кода
│ │ ├── CodeOutput.tsx # Вывод результата
│ │ ├── CopyButton.tsx # Кнопка копирования
│ │ ├── ErrorBoundary.tsx # Граница ошибок
│ │ ├── Header.tsx # Заголовок приложения
│ │ ├── HooksStats.tsx # Статистика хуков
│ │ ├── LanguageBadge.tsx # Бейдж языка
│ │ ├── LearningStats.tsx # Статистика обучения
│ │ ├── LiveExample.tsx # Живые примеры
│ │ ├── LoadingSpinner.tsx # Спиннер загрузки
│ │ ├── RelatedHooks.tsx # Связанные хуки
│ │ ├── Sidebar.tsx # Боковая панель
│ │ └── SyntaxHighlighter.tsx # Подсветка синтаксиса
│ ├── contexts/ # React контексты
│ │ ├── ThemeContext.tsx # Контекст темы
│ │ └── ThemeProvider.tsx # Провайдер темы
│ ├── data/ # Данные приложения
│ │ ├── categories.ts # Категории хуков
│ │ ├── difficulties.ts # Уровни сложности
│ │ ├── hooks/ # Данные о хуках
│ │ │ ├── index.ts
│ │ │ └── useState/
│ │ │ ├── examples.ts
│ │ │ ├── index.ts
│ │ │ └── metadata.ts
│ │ ├── hooksData.js # Данные о хуках (legacy)
│ │ └── hooksData.ts # Данные о хуках (TypeScript)
│ ├── hooks/ # Кастомные хуки
│ │ └── useTheme.ts # Хук для работы с темой
│ ├── pages/ # Страницы приложения
│ │ ├── ExamplesPage.tsx # Страница примеров
│ │ ├── HomePage.tsx # Главная страница
│ │ ├── HookDetailPage.tsx # Детальная страница хука
│ │ ├── HooksListPage.tsx # Список хуков
│ │ ├── PracticePage.tsx # Страница практики
│ │ └── StatsPage.tsx # Страница статистики
│ ├── styles/ # Стили
│ │ └── codeblock.css # Стили для блоков кода
│ ├── test/ # Тесты
│ │ ├── App.test.jsx # Тесты приложения
│ │ ├── CodeBlock.test.tsx # Тесты компонента CodeBlock
│ │ ├── ErrorBoundary.test.tsx # Тесты ErrorBoundary
│ │ ├── setup.js # Настройка тестов (legacy)
│ │ └── setup.ts # Настройка тестов (TypeScript)
│ ├── types/ # TypeScript типы
│ │ ├── global.d.ts # Глобальные типы
│ │ └── index.ts # Основные типы
│ ├── utils/ # Утилиты
│ ├── App.tsx # Главный компонент
│ ├── index.css # Глобальные стили
│ └── main.tsx # Точка входа
├── .github/ # GitHub Actions
│ └── workflows/
│ └── ci.yml # CI pipeline
├── eslint.config.js # Конфигурация ESLint
├── index.html # HTML шаблон
├── package.json # Зависимости и скрипты
├── postcss.config.js # Конфигурация PostCSS
├── tailwind.config.js # Конфигурация Tailwind CSS
├── tsconfig.json # Конфигурация TypeScript
└── vite.config.js # Конфигурация Vite
- Описание: Управление состоянием в функциональных компонентах
- Сложность: Начинающий
- Категория: Управление состоянием
- Примеры: Счетчик, формы, переключатели
- Описание: Выполнение побочных эффектов
- Сложность: Начинающий
- Категория: Побочные эффекты
- Примеры: Загрузка данных, подписки, таймеры
- Описание: Потребление контекста React
- Сложность: Средний
- Категория: Контекст
- Примеры: Тема приложения, глобальное состояние
- Описание: Управление сложным состоянием
- Сложность: Средний
- Категория: Управление состоянием
- Примеры: Список задач, корзина покупок
- Описание: Мемоизация функций
- Сложность: Средний
- Категория: Производительность
- Примеры: Оптимизация дочерних компонентов
- Описание: Мемоизация вычислений
- Сложность: Средний
- Категория: Производительность
- Примеры: Дорогие вычисления, фильтрация
- Описание: Ссылки на DOM элементы
- Сложность: Средний
- Категория: Ссылки
- Примеры: Фокус, измерения, таймеры
- Описание: Настройка API для родительских компонентов
- Сложность: Продвинутый
- Категория: Ссылки
- Примеры: Кастомные input компоненты
- Описание: Синхронные эффекты после DOM мутаций
- Сложность: Продвинутый
- Категория: Побочные эффекты
- Примеры: Измерения DOM, предотвращение мерцания
- Описание: Отладочная информация в DevTools
- Сложность: Продвинутый
- Категория: Отладка
- Примеры: Кастомные хуки с отладкой
-
Установите зависимости разработки
npm install
-
Запустите линтер
npm run lint
-
Проверьте TypeScript типы
npm run type-check
-
Запустите тесты
npm test
- ESLint: Строгие правила для качества кода
- Prettier: Автоматическое форматирование
- TypeScript: Строгая типизация
- Testing: Покрытие тестами всех компонентов
- Husky: Git hooks для автоматических проверок
# Создание новой ветки
git checkout -b feature/new-hook
# Добавление изменений
git add .
# Коммит с описательным сообщением
git commit -m "feat: add useCustomHook with examples"
# Пуш изменений
git push origin feature/new-hook# Все тесты
npm test
# Тесты с UI
npm run test:ui
# Тесты в режиме watch
npm test -- --watch
# Покрытие кода
npm run test:coverage- Unit тесты: Отдельные компоненты и хуки
- Integration тесты: Взаимодействие компонентов
- E2E тесты: Полные пользовательские сценарии (планируется)
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import Counter from './Counter';
describe('Counter', () => {
it('renders counter with initial value', () => {
render(<Counter />);
expect(screen.getByText('Счетчик: 0')).toBeInTheDocument();
});
it('increments counter when button is clicked', () => {
render(<Counter />);
const button = screen.getByText('Увеличить');
button.click();
expect(screen.getByText('Счетчик: 1')).toBeInTheDocument();
});
});# Создание оптимизированной сборки
npm run build
# Предварительный просмотр сборки
npm run preview- Code splitting: Автоматическое разделение кода
- Tree shaking: Удаление неиспользуемого кода
- Minification: Сжатие JavaScript и CSS
- Asset optimization: Оптимизация изображений и ресурсов
- TypeScript compilation: Компиляция в оптимизированный JavaScript
# Сборка для продакшена
npm run build
# Развертывание на GitHub Pages
npm run deploy
# Загрузка на сервер
# (зависит от выбранной платформы)Мы приветствуем вклад в развитие проекта! Вот как вы можете помочь:
- Проверьте существующие issues
- Создайте новый issue с подробным описанием
- Включите шаги для воспроизведения
- Укажите версии браузера и ОС
- Опишите предлагаемую функциональность
- Объясните, почему это полезно
- Предложите способ реализации
- Приложите примеры использования
- Форкните репозиторий
- Создайте ветку для ваших изменений
- Внесите изменения с тестами
- Запустите тесты и линтер
- Создайте Pull Request
- Добавьте данные в
src/data/hooksData.ts - Создайте компоненты для примеров
- Напишите тесты
- Обновите документацию
- Предложите дизайн-макеты
- Улучшите доступность
- Оптимизируйте производительность
- Добавьте анимации
Этот проект распространяется под лицензией MIT. См. файл LICENSE для получения дополнительной информации.
- React Team за создание отличной библиотеки
- TypeScript Team за систему типов
- Vite Team за быстрый инструмент сборки
- Tailwind CSS за utility-first подход
- Сообщество за вклад и поддержку
- Автор: FrankFMY
- GitHub: @FrankFMY
- Email: [[email protected]]
- Issues: GitHub Issues
⭐ Если проект вам понравился, поставьте звезду на GitHub!