import React from "react";
import { DragSource } from "react-dnd";
@DragSouce(type, spec, collect)
export default class DragComponent extends React.Component {
  // something
}

import React from "react";
import { DropTarget } from "react-dnd";
@DropTarget(types, spec, collect)
export default class DropComponent extends React.Component {
  // something
}

import React from "react";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";
@DragDropContext(HTML5Backend)
export default class DnDComponent extends React.Component {
  // something
  render() {
    return (
      // DragComponent & DropComponent
    )
  }
}

import React from "react";
import { DragSource, DropTarget } from "react-dnd";
const dragSpec = {
  // dragが始まったときの処理
  beginDrag(props) {
    // dragされ始めたら自分のidを返す
    const { id } = props;
    return { id };
  },
  // dragが終わったときの処置
  endDrag(props, monitor) {
    // beginDragで返されたidを取ってくる
    const source = monitor.getItem();
    // dropSpecのdropで返されたidを取ってくる
    const target = monitor.getDropResult();
    // dropActionを発火させる
    if (target) props.dropAction(source.id, target.id);
  }
}
const dropSpec = {
  // dropされたときの処理
  drop(props, monitor, component) {
    // dropされたら自分のidを返す
    const { id } = props;
    return { id };
  }
}
// DropTargetとDragSourceを使っているのでdragもdropもできる
@DropTarget(props => props.type, dropSpec, connect => ({ connectDropTarget: connect.dropTarget() }))
@DragSource(props => props.type, dragSpec, connect => ({ connectDragSource: connect.dragSource() }))
export default class DnDItem extends React.Component {
  static propTypes = {
    connectDragSource: React.PropTypes.func.isRequired,
    connectDropTarget: React.PropTypes.func.isRequired,
    dropAction: React.PropTypes.func.isRequired,
    id: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired
  };
  render() {
    const {
      connectDragSource,
      connectDropTarget,
      name
    } = this.props;
    return connectDragSource(connectDropTarget(
      <li>
        <h3>{name}</h3>
      </li>
    ));
  }
}

import React from "react";
import HTML5Backend from "react-dnd-html5-backend";
import { DragDropContext } from "react-dnd";
import DnDItem from "./DnDItem";
// DragDropContextでラップする
@DragDropContext(HTML5Backend)
export default class DnDField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {id: "1", name: "foo"},
        {id: "2", name: "bar"},
        {id: "3", name: "bad"},
        {id: "4", name: "qux"}
      ],
      message: ""
    };
  }
  dropAction(sourceId, targetId) {
    const { list } = this.state;
    // message更新 Redux使うならここでaction, それぞれのidが渡ってくる
    const sourceName = list.find(item => item.id === sourceId).name;
    const targetName = list.find(item => item.id === targetId).name;
    this.setState({message: `${sourceName} dropped on ${targetName}`});
  }
  render()
    const { list, message } = this.state;
    const itemType = Symbol("item");
    return (
      <div>
        <h1>{message}</h1>
        <ol>
          {list.map(item =>
            <DnDItem id={item.id} name={item.name} type={itemType} dropAction={::this.dropAction} key={item.id}/>
          )}
        </ol>
      </div>
    )
  }
}