HTML을 React JSX로 변환

이럴 때 사용하세요

• 정적 HTML 템플릿이나 폼을 React 컴포넌트로 옮길 때.
• 문서나 UI 키트의 마크업 조각을 컴포넌트에 붙여 넣을 수 있는 JSX로 바꿀 때.

사용 방법

1. 왼쪽 편집기에 HTML을 붙여 넣습니다.
2. 필요하면 설정을 열고 Create function component를 켜서 출력을 export const Foo = () => (...)로 감쌉니다.
3. JSX를 복사하고 컴포넌트 이름을 바꾼 뒤, 인라인 이벤트 속성을 React 핸들러로 교체합니다.

<label class="field" for="email">Email</label>
<input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled>
<!-- hint -->

<>
  <label className="field" htmlFor="email">
    Email
  </label>
  <input
    id="email"
    type="email"
    tabIndex={1}
    style={{ marginTop: 4, fontSize: 14 }}
    disabled=""
  />
  {/* hint */}
</>

세부 정보 및 제한 사항

변환은 브라우저에서 실행되며 출력은 Prettier로 포맷됩니다(세미콜론 없음).

onclick="go()" 같은 인라인 이벤트 속성은 그대로 유지되며 onClick 핸들러로 변환되지 않습니다.

불리언 속성은 disabled=""처럼 빈 문자열이 됩니다. React는 ""를 false로 취급하므로 disabled 또는 disabled={true}로 바꾸세요.

입력이 SVG이면 페이지에 SVG → JSX를 안내하는 힌트가 표시됩니다.

FAQ

관련 도구

사양 및 참고 자료

• React docs: Writing markup with JSX