React: Handling user events

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:

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

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 a vast amount of types of events, like onKeyUp, onFocus,onChange, onMouseDown, onSubmit, and many more.

Lessons in this unit:

0: Introduction
1: DEMO 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: Managing state
9: Component props
10: Data flow
11: Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!