개발자 / React

HTML을 JSX로 변환하는 변환기

HTML을 React용 JSX로 변환합니다. class는 className으로, 인라인 스타일은 객체로 바꾸고, 닫는 태그가 없는 요소를 닫으며, 중괄호와 주석을 이스케이프합니다. 필요하면 컴포넌트로 감쌀 수 있습니다.

HTML을 JSX로 변환하는 변환기: HTML을 요소로 파싱하므로 React에 맞게 속성 이름을 변경합니다. class, for, tabindex, readonly, maxlength 등이 React용 이름으로 바뀌고, 스타일은 camelCase 키를 사용하는 객체가 되며 <br>과 <img> 같은 닫는 태그가 없는 요소는 닫힙니다. 텍스트의 중괄호와 꺾쇠괄호는 이스케이프되고, 주석은 {/* */}으로 변환됩니다. 또한 폼 값은 defaultValue와 defaultChecked로 변환되어 필드를 계속 편집할 수 있습니다. 테스트 페이지의 출력 결과는 TSX로 컴파일됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리
개발자 도구
실행 횟수
브라우저에서
비용
무료 · 가입 불필요
사용 가능 여부
사용 가능
HTML을 JSX로로컬 처리

브라우저에서 전부 실행됩니다

  • <button>에서 onclick="send()"을 제거했습니다. onClick={() => …}처럼 함수로 작성하십시오.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React에 맞게 속성 이름이 변경됩니다(class는 className, for는 htmlFor, tabindex는 tabIndex). 스타일은 객체로 변환되고, 빈 요소와 void 요소는 닫히며, 주석은 {/* */}로 변환됩니다. 입력란을 계속 편집할 수 있도록 폼 값은 defaultValue가 됩니다.

변환 후 작업

반복되는 마크업을 props를 받는 컴포넌트로 바꾸고, 하드코딩된 텍스트를 중괄호 안의 변수로 대체하십시오. 인라인 스타일은 CSS 클래스나 사용하는 스타일 시스템으로 옮겨야 합니다. 스타일 객체는 렌더링할 때마다 다시 만들어지기 때문입니다.

SVG 아이콘에는 SVG to JSX를 사용하면 props를 전달하는 컴포넌트를 만들 수 있습니다. 주석과 불필요한 공백을 먼저 제거하려면 HTML 축소 도구를 사용하십시오.

혼동하기 쉬운 차이점

JSX에는 루트 요소가 하나만 필요하므로 여러 요소는 프래그먼트(<>…</>)로 감쌉니다. 모든 요소를 닫아야 하고 속성 이름은 camelCase여야 합니다. 또한 { 또는 }가 포함된 텍스트는 {"{"}처럼 작성해야 하며, 변환기가 이를 대신 처리합니다.

사용 방법

  1. 단일 요소부터 페이지 전체 섹션까지 HTML을 붙여넣습니다.
  2. 필요하면 이름이 있는 컴포넌트로 결과를 감쌉니다.
  3. JSX를 복사한 다음, 경고에 표시된 인라인 이벤트 핸들러를 다시 작성합니다.

개인정보 보호 및 제한사항

HTML은 브라우저에서 변환되며 업로드되지 않습니다.

관련 도구

SVG를 JSX로HTML MinifierHTML 인코더

자주 묻는 질문

onclick 속성이 삭제되는 이유는 무엇인가요?

HTML에서 onclick 속성은 코드 문자열이지만 React에서는 함수여야 합니다. 변환기는 각 속성을 표시하므로 직접 다시 작성할 수 있습니다. 예를 들어 onclick="save()"을 onClick={save}으로 바꿉니다.

value가 defaultValue로 바뀌는 이유는 무엇인가요?

React에서 value 속성을 사용하면 필드가 제어 컴포넌트가 되므로 onChange 핸들러 없이는 입력할 수 없습니다. defaultValue는 시작 텍스트만 설정하고 필드를 계속 편집할 수 있게 합니다.

SVG를 처리할 수 있나요?

예. stroke-width와 같은 SVG 속성은 strokeWidth로 변환됩니다. 전체 SVG 파일을 컴포넌트로 변환할 때는 SVG를 JSX로 변환하는 도구가 props를 추가합니다.

무료 도구 · 브라우저에서회 실행 · 계정 불필요