React: Creating an HTML Class in JSX

rthefounding

Randy Rivera

Posted on September 21, 2021

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.
💖 💪 🙅 🚩
rthefounding
Randy Rivera

Posted on September 21, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React: Creating an HTML Class in JSX
devops React: Creating an HTML Class in JSX

September 21, 2021