Это видео является вводным по работе с такой библиотекой, которая называется React dnd (drag and drop).

Если мы хотим в наших React приложениях, которые мы разрабатываем, использовать эффект перетаскивания чего-либо куда-либо, сортировки при перетаскивании и.т.д., то мы можем столкнуться при этом с некоторыми сложностями.

Как перетаскивать элементы? Как это делать? При использовании библиотеки React, с этим могут возникать некоторые трудности.

Для решения этих задач для React была создана специальная библиотека, которая так и называется React dnd. 

Давайте сейчас обзорно посмотрим, что эта библиотека собой представляет и что она умеет. 

Ссылка на документацию для библиотеки здесь:

http://react-dnd.github.io/react-dnd/about

У вас откроется сайт с описанием этой библиотеке. Вы можете перейти там в раздел "Examples" и посмотреть примеры, которые можно делать с ее помощью.

В общем, это эффекты перетаскивания и сортировки при перетаскивании, обработка различных событий, которые возникают при этом.

Все это можно делать с помощью библиотеки React dnd в ваших React приложениях.

Прежде чем знакомиться с этой библиотекой, нам нужно познакомиться с основными понятиями, которые в ней есть. 

Первое, что нужно понимать, что React dnd - это библиотека, которая работает с компонентами React приложения. Все элементы, которые мы хотим перетаскивать, например, яблоко перетянуть в корзину, каждый элемент, с которым мы будем взаимодействовать, должен быть компонентом.

Просто так взять какой-либо элемент JSX - разметки React приложения, например div или еще какой-либо элемен, мы не сможем. Все элементы, с которыми мы будем работать, каждый элемент должен быть отдельным компонентом.

Основной родительский компонент, в котором это все будет происходить. Элемент куда перетаскиваем и элемент что перетаскиваем. Это все отдельные компоненты.

Соответственно, каждый компонент, с которым мы взаимодействуем, имеет определенное название и свойства в этой библиотеке и с ним нужно работать по особому. 

Область, в которой все будет происходить, называется DragDropContext/

Куда мы перетаскиваем, область называется DropTarget.

То, что мы перетаскиваем DragSource.

В документации можно почитать подробнее про все эти элементы. 

Это пока вводное видео и мне хотелось бы пока рассказать об основных смыслах работы этой библиотеки. 

Если Вам эта тема интересна, записывайтесь в предварительный список по записи видеокурса по этой библиотеке здесь.