React: Creating an HTML Class in JSX

• One difference in JSX is that you don't use the word class to define HTML classes. This is because class is a reserved word in JavaScript. Instead, JSX uses className.

• Also note that HTML attributes and event references in JSX become camelCase.

• Let's Apply a class of myDiv to the div provided in the JSX code.
  

const JSX = (
  <div className='myDiv'> {/* <--- added a class of myDiv */}
    <h1>Add a class to this div</h1>
  </div>
);

Self-closing

• In JSX, it's little different, Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as in order to be valid JSX that can be transpiled. A , on the other hand, can be written as or . The difference is that in the first version there is no way to include anything in the . You will see in my later posts why that this syntax is useful when rendering React components.