• Trying to get my head around react-dnd. Making a start on this youtube series

Dnd Concepts🔗

• Backends

  • confusingly, not something used in the backend e.g node.js. backend refers to events/intereactions that can be tapped into between the DOM and React-dnd layers. This can include:
    • HTML events
    • touch events
    • testing Dnd interactions
    • Custom backends can also be created!

• Item Types

  • used as a hint for dnd so there information about what the item being dragged on or being dragged is

• Monitors

  • Communicates events from the DOM to React components. This tapped into on the React side via a context.

Interactions between React🔗

• Collectors

  • these are functions when turn Dnd events coming from monitors into react props. This refered to as “collecting props”

• Drag Sources

  • draggable components are known as a drag sources
  • drag sources contain information passed on from drop targets.

• Drop targets

  • components which are areas to things to dropped on are drop targets
  • they can execute function from Dnd events

Summary🔗

1. there are DOM events
2. these get communicated to Dnd via monitors
3. monitors are coverted to state which is available to react via a context
4. we use collecting functions to covert the state in the context into props- known as “collecting props”
5. we use the props as normally would in any react component