⇒ self-closing JSX tags

JavaScript pattern

Components without children can be self-closed to avoid unnecessary extra closing tag.

Converts components without attributes

BEFORE
<Hello></Hello>
AFTER
<Hello />

Converts components with 1 attribute

BEFORE
<Hello attr="foo"></Hello>
AFTER
<Hello attr="foo" />

Converts components with 2 attributes

BEFORE
<Hello attr="foo" prop="baz"></Hello>
AFTER
<Hello attr="foo" prop="baz" />

Converts components with whitespace as children

BEFORE
<Hello></Hello>
AFTER
<Hello />

Doesn't convert self-closing components

JAVASCRIPT
<Hello />

Doesn't convert native HTML tags with closing pair: div

JAVASCRIPT
<div></div>

Doesn't convert native HTML tags with closing pair: span

JAVASCRIPT
<span></span>

Doesn't convert native HTML tags with closing pair: a

JAVASCRIPT
<a></a>

Doesn't convert native HTML tags with closing pair: h1

JAVASCRIPT
<h1></h1>

Doesn't convert native HTML tags with closing pair: td

JAVASCRIPT
<td></td>

Doesn't convert native HTML tags with closing pair: li

JAVASCRIPT
<li></li>