DEV Community

Randy Rivera
Randy Rivera

Posted on

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>
);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)