KEMBAR78
HTML To JSX Conversion Guide | PDF | Java Script | Html
Scribd
Upload
9 views2 pages

HTML To JSX Conversion Guide

This document serves as a reference for converting HTML tags and attributes into their JSX equivalents, outlining key syntax rules. It details that most HTML tags remain unchanged in JSX, while attributes require camelCase formatting and self-closing tags must end with a '/'. Additionally, it provides a conversion table and important notes regarding JSX usage, such as handling inline styles and JavaScript expressions.

Uploaded by

suryar4196
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views2 pages

HTML To JSX Conversion Guide

This document serves as a reference for converting HTML tags and attributes into their JSX equivalents, outlining key syntax rules. It details that most HTML tags remain unchanged in JSX, while attributes require camelCase formatting and self-closing tags must end with a '/'. Additionally, it provides a conversion table and important notes regarding JSX usage, such as handling inline styles and JavaScript expressions.

Uploaded by

suryar4196
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Tags to Equivalent JSX Tags

This document provides a reference for converting HTML tags and attributes into their JSX
equivalents, along with important syntax rules.

1. General Rules

- Most HTML tags are used **as is** in JSX.


- **Attribute names** in JSX use **camelCase** instead of lowercase (e.g., `class` →
`className`).
- **Self-closing tags** must end with a `/` (e.g., `<img />`, `<input />`).

2. HTML to JSX Conversion Table


HTML Tag JSX Tag Notes
<div> <div> No change
<span> <span> No change
<p> <p> No change
<a href="..."> <a href="..."> No change
<button> <button> No change
<ul> <ul> No change
<li> <li> No change
<img src="..."> <img src="..." /> Use self-closing tag
<input> <input /> Use self-closing tag
<br> <br /> Use self-closing tag
<hr> <hr /> Use self-closing tag
<form> <form> No change
<table> <table> No change
<thead> <thead> No change
<tbody> <tbody> No change
<tr> <tr> No change
<td> <td> No change
<th> <th> No change

3. HTML Attributes to JSX Properties


HTML Attribute JSX Property Notes
class className `class` is a reserved word in
JavaScript
for htmlFor `for` is a reserved word in
JavaScript
onclick onClick Event handlers use
camelCase
onchange onChange Event handlers use
camelCase
style="..." style={{...}} Pass a JavaScript object for
inline styles
tabindex tabIndex Use camelCase for all multi-
word attributes
maxlength maxLength Use camelCase for all multi-
word attributes
autofocus autoFocus Use camelCase for all multi-
word attributes
readonly readOnly Use camelCase for all multi-
word attributes

4. Key Notes for JSX

1. **Self-closing tags**: All void elements (e.g., `<img>`, `<input>`, `<br>`, etc.) must be self-
closed in JSX.
```jsx
<img src="image.png" alt="Example" />
```

2. **Style attribute**: Inline styles in JSX use a JavaScript object instead of a string.
```html
<div style="color: red; font-size: 14px;"></div>
```
converts to:
```jsx
<div style={{ color: 'red', fontSize: '14px' }}></div>
```

3. **JSX Expressions**: Use `{}` to insert JavaScript expressions (e.g., variables, functions).
```jsx
const message = "Hello, JSX!";
<p>{message}</p>
```

4. **Boolean Attributes**: Use `attributeName={true}` or just `attributeName`.


```html
<input disabled>
```
converts to:
```jsx
<input disabled={true} />
```

You might also like