React provides an easy way to manage events fired from DOM events like clicks, form events and more.

Let’s talk about click events, which are pretty simple to digest.

You can use the onClick attribute on any JSX element:

<button
  onClick={(event) => {
    /* handle the event */
  }}
>
  Click here
</button>

When the element is clicked, the function passed to the onClick attribute is fired.

You can also define this function outside of the JSX:

const handleClickEvent = (event) => {
  /* handle the event */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

When the click event is fired on the button, React calls the event handler function.

React supports many types of events, like onKeyUp, onFocus, onChange, onMouseDown, onSubmit, and many more.

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	▶︎ Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React