이 도구에 대하여
HTML을 JSX / React로 변환 도구는 브라우저의 네이티브 DOMParser로 HTML 스니펫을 파싱하고 유효한 JSX로 다시 직렬화하여 React가 필요로 하는 모든 것을 수정합니다. 완전히 클라이언트 측에서 실행되므로 붙여넣은 마크업이 기기에 남습니다. 디자인 익스포트, 이메일 템플릿, 컴포넌트 스케치 등 어떤 HTML이든 붙여넣으면 React 파일에 바로 넣을 수 있는 JSX를 얻습니다.
다시 작성 과정은 예약된 속성의 이름을 바꾸고(class는 className, for는 htmlFor), 나머지는 camelCase로 만듭니다. tabindex는 tabIndex, maxlength는 maxLength, stroke-width는 strokeWidth가 되며 data-*와 aria-* 속성은 그대로 둡니다. img, br, input, hr 같은 void 요소는 자체 닫힘(<img />)이 되고, HTML 주석은 {/* ... */}가 되며, 텍스트의 중괄호 리터럴은 {'{'}로 이스케이프되고, 인라인 style="a:b;c:d" 문자열은 CSS 키가 camelCase로 바뀐 style={{ a: 'b', c: 'd' }} 객체로 변환됩니다. disabled 같은 불리언 속성은 토글로 맨몸으로 출력하거나 ={true}로 출력할 수 있습니다.
fragment 출력(여러 루트 노드는 자동으로 <>...</> fragment로 감쌈)이나 전체 컴포넌트 출력(선택한 이름과 들여쓰기(스페이스 2칸, 4칸, 또는 탭)로 JSX를 export default function으로 감쌈)을 선택하세요. 결과는 붙여넣을 준비가 되어 있습니다. 파싱이 실제 DOM을 사용하므로 잘못된 중첩은 브라우저와 같은 방식으로 정규화됩니다.