Chapter 6. Handling events in React

 

This chapter covers

  • Working with DOM events in React
  • Responding to DOM events that aren’t supported by React
  • Integrating React with other libraries: jQuery UI events

So far, you’ve learned how to render UIs that have zero user interaction. In other words, you’re just displaying data. For example, you’ve built a clock that doesn’t accept user inputs, such as setting the time zone.

Most of the time, you don’t have static UIs; you need to build elements that are smart enough to respond to user actions. How do you respond to user actions such as clicking and dragging a mouse?

This chapter provides the solution to how to handle events in React. Then, in chapter 7, you’ll apply this knowledge of events to working with web forms and their elements. I’ve mentioned that React supports only certain events; in this chapter, I’ll show you how to work with events that aren’t supported by React.

Note

The source code for the examples in this chapter is at https://www.manning.com/books/react-quickly and https://github.com/azat-co/react-quickly/tree/master/ch06 (in the ch06 folder of the GitHub repository https://github.com/azat-co/react-quickly). You can also find some demos at http://reactquickly.co/demos.

6.1. Working with DOM events in React

6.2. Responding to DOM events not supported by React

6.3. Integrating React with other libraries: jQuery UI events

6.4. Quiz

6.5. Summary

6.6. Quiz answers