Whether you are just starting out with frontend engineering or you are a seasoned veteran, this course will provide a strong understanding of the DOM Event system.

Alex Reardon

Your Ultimate Guide to Understanding DOM Events

 Courses from Alex Reardon

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event system and only scratch the surface of the available power. 

This lack of understanding leads to bugs in our applications and writing lots of code to work around the DOM event system rather than leveraging it. The goal of the course is that you will walk away with the confidence to successfully and meaningfully engage with the DOM event system.

The DOM event visualizer [domevents.dev](https://domevents.dev) will be used to explain many behaviors throughout the course. You are welcome to play with the visualizer yourself to continue your learning

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally. 

react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actually easy to start using, and this course is a great place to start.


We will create a highly interactive task management application from scratch using the building blocks of react-beautiful-dnd. Over 14 lessons, you will get practice in:

- building droppable containers to sort draggable items horizontally and vertically
- moving items between columns
- and even moving the columns themselves

Following the course, you’ll be ready to build powerful dnd experiences into your own projects.

Check out [the community notes for this course on Github](https://github.com/eggheadio-projects/Beautiful-and-Accessible-Drag-and-Drop-with-react-beautiful-dnd-notes).

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

This lesson will show you how you can use Immediately Invoked Function Expressions (IIFE's) to make conditional assignments more readable and robust

Maintain Readability for Conditional Assignments with JavaScript IIFEs

In this lesson we will set up a `React` environment using [Create React App](https://github.com/facebook/create-react-app) for use in the remainder of the course

Set up a React Environment with create-react-app

In this lesson we will create a task list from scratch together; explaining the various pieces. This lesson will involve creating our state model and visual components to create our task list. We will be using this list in future lessons as a foundation for our drag and drop experience

Create and Style a List of Data with React

In this lesson, we will add `react-beautiful-dnd` to our project to enable reordering of our tasks.

In our lesson, we use a styled-components [`innerRef` callback](https://www.styled-components.com/docs/advanced#refs) to get the DOM ref for our styled component. 

If you have not used ref's in `React` before I recommend you check out:

- The [React ref documentation](https://reactjs.org/docs/refs-and-the-dom.html) 
- This egghead lesson: [Manipulate the DOM with React refs](https://egghead.io/lessons/egghead-manipulate-the-dom-with-react-refs) 

A small cheatsheet about refs:

- On a React Element such as `<div>` the `ref` callback returns a DOM node
- On a React Component such as `<Person>` the ref callback returns the instance of the component - which is not what react-beautiful-dnd needs
- It is a common practice to create your own `innerRef` callback for your components to return the underlying DOM reference of the component

Reorder a List with react-beautiful-dnd

In this lesson will demonstrate how you can persist changes locally that resulted from a drag and drop interaction.
	
To accomplish this, you will implement the `onDragEnd` callback function that is invoked at the end of every `react-beautiful-dnd` drag and drop. This function receives a `result` object. We will use the `source` and `destination` properties of the `result` object to update the order of our task list

Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback

`<Draggable />` and `<Droppable />` components provide `snapshot` objects to their child functions. These `snapshot` objects can be used to create beautiful visual queues for users while a drag is occurring.


Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values

In `react-beautiful-dnd` there is a separation between what is being dragged (a Draggable), and how a user drags it (a drag handle). This lesson will explain this distinction and show you how you can control what the drag handle is for a Draggable.

A `<Draggable />` child function receives a `provided` object. This object has a property called `dragHandleProps`. This property gives us the ability to designate what part of the `<Draggable />` the user interacts with for drag and drop. You’ll see how to pass this prop to a separate React component to designate control.

Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps

In this lesson we will place multiple task lists next to each other and enable movement of the tasks between the lists.

Now that our application has multiple columns, the `onDragEnd` callback will need to be refactored to handle more than one column. We will add some new logic to move tasks from one column to another in our state.

Move Items between Columns with react-beautiful-dnd using onDragEnd

Now that we are able to drag tasks between our task lists, we might not always want a user to move a task to any location. This lesson will explore how we can conditionally allow what can be dragged, and where it can be dragged to.

react-beautiful-dnd provides a robust API for configuring what can be dragged or dropped where. `isDragDisabled` prop on a `<Draggable />`, `isDropDisabled` prop on a `<Droppable />`, and the `<Droppable />` `type` prop give you fine-grain control to allow whatever business logic you need to implement, control what is draggable and droppable.

Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props

In this lesson we will show you how to create `<Droppable />`s that are oriented on the horizontal plane.

The `<Droppable />` component provides us with a `direction` prop that we can use to set a list of data to be sortable in the vertical or horizontal plane.

Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop

In this lesson, we will be applying a collection of learned techniques to enable reordering of the columns in our application.

To achieve this, you will wrap the Columns in a single `<Droppable /> ` component, ordered on the horizontal plane, and enhance the Columns to become draggable. You’ll see that wiring up Columns for re-ordering is very similar to what you experienced with tasks. We will be using nested `<Draggable />` and `<Droppable />` components and the `Droppable` `type` prop to achieve column reordering.

Reorder Columns with react-beautiful-dnd

We will look at allowing style updates to Draggable and Droppable components without re-rendering their children. We will do this by creating a new component `<InnerList />` which conditionally block renders with React's `shouldComponentUpdate` lifecycle hook.

After this, you'll see how using React's `PureComponent` can be used to achieve the same optimization.


Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent

This lesson will show you how you can use the `<DragDropContext>` `onDragStart` and `onDragEnd` callbacks to add style updates to your application.

Using these callbacks will give you fine grain control of the look and feel of your application while dragging content throughout. In this lesson, we will update the text color of our list items as well as set the background color while dragging said item.

Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd

`react-beautiful-dnd` enables users with visual impairments to perform drag and drop operations using only a keyboard and screen reader. This lesson will show you how you can customise the preset `react-beautiful-dnd` screen reader messaging to power your own domain-specific messaging as well as internationalisation. 

We will achieve this by using the `aria-describedby` prop on a *drag handle* as well as the `announce` function which is provided to the `DragDropContext` callback functions

Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd

This is an introduction to the course and outlines what `react-beautiful-dnd` is, and what we will be building together with it

Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd

In this lesson, we will use the Chrome performance panel to debug and fix an interaction that feels sluggish.

Debug Event Listener Performance with Chrome Developer Tools

In this lesson we we will look at how you can inspect and debug event listeners in your browser by using the browser developer tools.

Debug and Inspect Event Listeners with Chrome Developer Tools

Events are classified as either synchronous or asynchronous (ordered or unordered). This lesson will explore what these categorisations really mean and what it means to you.

Synchronous and Asynchronous Events (Ordered and Unordered Events)

This lesson will explore what problem passive event listeners are trying to solve, and how you can mark your event listeners as passive to improve scrolling performance. It also covers how some browsers automatically set `touchstart`, `touchmove`, `wheel` and `mousewheel` events added to the `window`, `document` or `body` as passive by default.

Alex Reardon

Your Ultimate Guide to Understanding DOM Events

Search Results

Your Ultimate Guide to Understanding DOM Events

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Maintain Readability for Conditional Assignments with JavaScript IIFEs

Set up a React Environment with create-react-app

Create and Style a List of Data with React

Reorder a List with react-beautiful-dnd

Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback

Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values

Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps

Move Items between Columns with react-beautiful-dnd using onDragEnd

Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props

Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop

Reorder Columns with react-beautiful-dnd

Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent

Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd

Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd

Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd

Debug Event Listener Performance with Chrome Developer Tools

Debug and Inspect Event Listeners with Chrome Developer Tools

Synchronous and Asynchronous Events (Ordered and Unordered Events)

Improve Scroll Performance with Passive Event Listeners