onClick

function Button() {
  return <button onClick={() => alert("Button Clicked!")}>Click Me</button>;
}

key

const items = ["Apple", "Banana", "Cherry"];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

className

function StyledDiv() {
  return <div className="container">This is a styled div.</div>;
}

style

style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables.

const user = {
  imageUrl: "<https://i.imgur.com/yXOvdOSs.jpg>",
  imageSize: 90,
};

export default function Profile() {
  return (
    <img
      src={user.imageUrl}
      style={{
        width: user.imageSize,
        height: user.imageSize,
      }}
    />
  );
}

htmlFor

function Form() {
  return (
    <form>
      <label htmlFor="name">Name:</label>
      <input id="name" type="text" />
    </form>
  );
}

defaultValue

function InputField() {
  return <input type="text" defaultValue="Hello World" />;
}