Working with events

Keyboard Shortcuts

A big part of handling events in React requires you to have a clear understanding of how the state of sub-components communicate with the main component. In react events are clones of regular javascript events and are camel cased. React is going to take care of updating your app once you modify state so all you have to do is make a change to the data and it will re-render things for you. Utilities like lodash can also be a big help when managing data.

- [Voiceover] Although events in React…look very similar to HTML events,…there's a lot that happens behind the scenes,…and because you don't access state and sub components,…it does require a bit of extra work to get going.…So in React, although the events look a lot like…and are used like regular JavaScript events,…in reality, they're clones of the real events.…React is going to take care of handling…the difference between browsers for you.…Now the first difference that you'll notice…is that events in React are camel cased…with the first letter being lowercase.…

So for example, the onClick event…would have the C capitalized.…You can take a look at a list of React events at this URL.…So let's go ahead and use events…to allow people to delete our appointments.…So in my AptList.js file, I'm going to need to add…something right next to this information about the pets.…So let's go ahead and add an onClick event,…so I'll use an onClick, and unlike regular JavaScript,…this C has to be capitalized.…

I'm going to assign this to a method…

Resume Transcript Auto-Scroll

Author

Released

7/26/2016

React is a JavaScript library for creating user interfaces that display dynamic data. Because of its reusable components and unique data rendering approach, the web interfaces you create with React are flexible, fast, and lightweight. Need another reason to choose React? It's also easy to learn, with these lessons from staff author Ray Villalobos. Join Ray as he reviews React's component architecture and covers key skills such as handling events, breaking code into custom subcomponents, managing form fields with references, and setting up sorting and search. Every lesson is focused on the specifics of creating web interfaces with React, so you'll be able to easily transition the techniques to your own projects.