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…


This content originally appeared on DEV Community and was authored by Randy Rivera

  • 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.


This content originally appeared on DEV Community and was authored by Randy Rivera


Print Share Comment Cite Upload Translate Updates
APA

Randy Rivera | Sciencx (2021-09-21T13:47:07+00:00) React: Creating an HTML Class in JSX. Retrieved from https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/

MLA
" » React: Creating an HTML Class in JSX." Randy Rivera | Sciencx - Tuesday September 21, 2021, https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/
HARVARD
Randy Rivera | Sciencx Tuesday September 21, 2021 » React: Creating an HTML Class in JSX., viewed ,<https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/>
VANCOUVER
Randy Rivera | Sciencx - » React: Creating an HTML Class in JSX. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/
CHICAGO
" » React: Creating an HTML Class in JSX." Randy Rivera | Sciencx - Accessed . https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/
IEEE
" » React: Creating an HTML Class in JSX." Randy Rivera | Sciencx [Online]. Available: https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/. [Accessed: ]
rf:citation
» React: Creating an HTML Class in JSX | Randy Rivera | Sciencx | https://www.scien.cx/2021/09/21/react-creating-an-html-class-in-jsx/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts