Understanding React JSX Expressions and Attributes

React JSX Expressions:
You can insert any valid JavaScript expression inside JSX by wrapping it in curly braces { }.

React will evaluate the expression and render the result in the DOM.

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {218 * 1.36} horsepower</p>
    </>
  );
}

React JSX Attributes:
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.

JSX solved this by using className instead. When JSX is rendered, it translates className attributes into class attributes.

function Car() {
  return (
    <h1 className="myclass">Hello World</h1>
  );
}