Course Content
React JSX
React JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components and define their structure in a more readable and declarative way.
0/1
Components in React
In React.js, components are the building blocks of a React application. They allow you to break the UI into independent, reusable pieces and think about each piece in isolation. Here's an overview of components in React:
0/1
Props in React
Props (short for properties) are a way to pass data from a parent component to a child component in React. They are read-only and cannot be modified by the child component, ensuring a unidirectional data flow.
0/1
React Events
Just like HTML DOM events, React can perform actions based on user events.React has the same events as HTML: click, change, mouseover etc.
0/1
React Conditional Rendering
0/1
React Lists
0/1
React Forms
0/1
Styling React Using CSS
0/1
React Router
0/1
React Js
About Lesson

What are Events in React?

Just like HTML DOM events, React can perform actions based on user events.React has the same events as HTML: click, change, mouseover etc.

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot}  instead of onclick="shoot()".

Example:

JavaScript
function Cricket() {
    const drive = () => {
        alert("Great Shot!");
    }
    return (
        <button onClick={drive}>Take the shot!</button>
    );
}

To pass an argument to an event handler, use an arrow function.

Example:

JavaScript
function Cricket() {
  const drive = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => drive("shot!")}>Take the shot!</button>
  );
}