YoVDO

Drag and Drop in React with React Query and React-Beautiful-Dnd

Offered By: Dave Gray via YouTube

Tags

React Query Courses Web Development Courses React Courses CRUD Operations Courses User Interface Design Courses localStorage Courses

Course Description

Overview

Learn how to implement drag and drop functionality in React using React Query and react-beautiful-dnd in this comprehensive tutorial video. Refactor a React Query todo list app to include drag and drop features, and discover how to persist reordered list items after refreshing the application. Explore key concepts such as DragDropContext, Droppable, and Draggable components, and learn how to handle React 18 Strict Mode issues. Master techniques for creating intermediate state, implementing onDragEnd functionality, and persisting drag and drop order using useEffect and localStorage. Test CRUD operations and refresh/reload functionality to ensure a smooth user experience.

Syllabus

Intro
Welcome
What We're Adding
Starter Code
Updating & Adding Dependencies
json-server
Starting the project
Initial DnD imports
DragDropContext
Bracket Pair Colorization
Droppable
Parent section
Assigning content
Mapping todos
Draggable
Droppable placeholder
React 18 Strict Mode issue & solution
Creating intermediate state
onDragEnd destination
Persisting DnD order with useEffect & localStorage
Update handleOnDragEnd
handleDelete
Testing CRUD Ops and refresh / reload


Taught by

Dave Gray

Related Courses

Intro to the Design of Everyday Things
Udacity
Android. Programación de Aplicaciones
Miríadax
Programming Mobile Applications for Android Handheld Systems: Part 1
University of Maryland, College Park via Coursera
Mobile and Ubiquitous Computing
Georgia Institute of Technology via Coursera
Android: Introducción a la Programación
Universitat Politècnica de València via edX