How to Build Drag-and-Drop Components With React DnD
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:08] Add, drag and drop. Install React D&D. To implement drag and drop, we'll use the React D&D library. This library has several adapters called backends to support different APIs.
[00:09 - 00:49] For example, to use React D&D with HTML5, we'll use React D&D HTML5 backend. Install the library, yarn, add, react, dnd, I'll use version 14, 0, 1, and also install the React D&D HTML5 backend. React, dnd, HTML5, backend, 14, 0, 0. React D&D has built-in type definitions, so we don't have to install them separately. Open a CIRC index.jsx and drop the app into the D&D provider. You 'll need to pass the backend. Import it from the React D&D HTML5 backend, HTML5 backend, as backend from React D&D, HTML5 backend, pass it to D&D provider, and we're done. Let's also define the type for dragging.
[00:50 - 01:13] When we begin to drag an item, we'll provide information about it to react D&D. We'll pass an object that will describe the item we're currently dragging. This object will have a type field that for now will be a column, and we'll also pass the columns AD and text that we get from the column component. Create a new file, SRC, drag, item, T.S. Here define an expert type, column, drag, item, it will contain ID, string, text, string, and type, column.
[01:14 - 01:25] Define an expert, type drag, item, that for now is going to be just column, drag, item, alias, but later, will make it a union type between column drag item and card drag item.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)