Migrating from HTML

    Estimated reading time: less than 1 minute

    Converting existing HTML templates to JSX requires a few mechanical transformations.

    Automated conversion

    Use Html To Jsx for bulk conversion. Paste HTML and receive JSX output. Its output uses React conventions, so revert className and htmlFor as described below.

    Manual conversion rules

    Unlike React, Kita Html uses standard HTML attribute names. class stays as class, not className. for stays as for, not htmlFor.

    Void elements must be explicitly self-closed: <br> becomes <br />, <img src="..."> becomes <img src="..." />.

    HTML comments become JSX comments: <!-- comment --> becomes {/* comment */}.

    Inline styles can remain as strings. Kita Html accepts style="color: red" directly, unlike React which requires an object.

    Multiple root elements must be wrapped in a fragment:

    // HTML
<div>First</div>
<div>Second</div>

// JSX
<>
  <div>First</div>
  <div>Second</div>
</>