2021・07・22

• 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