egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Drag and Drop с react-beautiful-dnd
Beautiful and Accessible Drag and Drop with react-beautiful-dnd
★5 (всего оценок - 26)
Продолжительность
1 ч 3 мин
Категория
React.jsКоличество уроков
14 Видео
Дата добавления
14 нояб. 2019 г., 22:06
Язык
Английский
Дата обновления
29 апр. 2026 г., 05:26
Этот курс поможет вам уверенно освоить drag‑and‑drop функциональность в React с помощью библиотеки react-beautiful-dnd, создавая интерактивные списки, доски задач и динамические интерфейсы без лишней сложности.
Что такое react-beautiful-dnd и почему он так популярен
Библиотека react-beautiful-dnd создана командой Atlassian специально для удобной и доступной реализации перетаскивания элементов в React. Она использует шаблон render props, что позволяет гибко внедрять DnD в любой интерфейс и полностью контролировать внешний вид и поведение элементов.
Основные преимущества
- естественная и плавная анимация перетаскивания;
- поддержка клавиатурной навигации "из коробки";
- простая конфигурация и быстрый старт;
- поддержка вертикальных и горизонтальных списков;
- возможность управлять несколькими списками и колонками.
Чему вы научитесь в этом курсе
За 14 уроков вы создадите функциональное приложение для управления задачами, постепенно осваивая ключевые механики react-beautiful-dnd.
Практические навыки
- Создание контейнеров со сбрасываемыми зонами для сортировки элементов горизонтально и вертикально.
- Перемещение элементов между разными колонками.
- Перестановка и управление целыми колонками.
- Работа с событиями drag, drop и обновлением состояния.
- Построение гибкой структуры приложения, легко расширяемой под любые задачи.
Результат прохождения курса
После завершения курса вы сможете уверенно добавлять продвинутый drag‑and‑drop функционал в любые свои React‑проекты. Вы научитесь делать интерфейсы более интерактивными, удобными и визуально понятными для пользователей.
Репозиторий проекта
Исходный код доступен по ссылке:
https://github.com/eggheadio-projects/react-beautiful-dnd-task-app
- Урок 1.00:00:59Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd
- Урок 2.00:01:22Set up a React Environment with create-react-app
- Урок 3.00:07:38Create and Style a List of Data with React
- Урок 4.00:08:13Reorder a List with react-beautiful-dnd
- Урок 5.00:05:35Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback
- Урок 6.00:04:23Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values
- Урок 7.00:03:27Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
- Урок 8.00:02:19Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
- Урок 9.00:05:49Move Items between Columns with react-beautiful-dnd using onDragEnd
- Урок 10.00:05:00Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props
- Урок 11.00:02:37Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
- Урок 12.00:06:48Reorder Columns with react-beautiful-dnd
- Урок 13.00:05:59Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent
- Урок 14.00:03:15Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd
Автор - egghead
Комментарии