Add 'tags must be closed' rule to JSX guide (#18581)

This commit is contained in:
Melissa
2018-10-12 18:41:40 -05:00
committed by Aditya
parent b721f07140
commit f6f2c2be13

View File

@@ -71,6 +71,37 @@ const tags = (
);
```
### All Tags Must Be Closed
In HTML, there are self-closing tags such as `img`, `br`, `input`, and `hr`.
This means that either of these methods are valid:
```html
<!-- no closing / -->
<input type="text" name="city">
<!-- with closing / -->
<input type="text" name="city" />
```
Self-closing (sometimes referred to as **void**) tags can be rendered with or without a closing forward slash.
However, with JSX, _all_ tags must be closed.
The following JSX is invalid:
```javascript
const email = <input type="email">;
```
Closing the `input` tag will make the JSX valid:
```javascript
const email = <input type="email" />;
```
### More Information
- [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)