Conversor de HTML para JSX do React
Converte marcação HTML em JSX do React com o htmltojsx: class vira className, for vira htmlFor, estilos inline viram objetos style e tags vazias são autofechadas. Vários elementos raiz são envolvidos em um fragment.
Levar um template HTML estático ou um formulário para um componente React.
HTML
JSX
Quando usar
- Levar um template HTML estático ou um formulário para um componente React.
- Converter um trecho de marcação de uma documentação ou de um UI kit em JSX que você possa colar em um componente.
Como usar
- Cole HTML no editor da esquerda.
- Se quiser, abra as configurações e ative Create function component para envolver a saída em export const Foo = () => (...).
- Copie o JSX, renomeie o componente e substitua os atributos de evento inline por handlers do React.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Detalhes e limitações
A conversão roda no navegador e a saída é formatada com o Prettier (sem ponto e vírgula).
Atributos de evento inline como onclick="go()" são mantidos como estão, não são convertidos em handlers onClick.
Atributos booleanos recebem uma string vazia, por exemplo disabled="". O React trata "" como false, então troque por disabled ou disabled={true}.
Se a entrada for SVG, a página mostra uma dica apontando para SVG para JSX.
FAQ
Como os estilos inline são convertidos?
A string style é interpretada como um objeto com chaves em camelCase, e valores em pixels viram números: style="margin-top: 4px" vira style={{ marginTop: 4 }}.
O que acontece com os comentários HTML?
Eles são mantidos como comentários JSX, por exemplo <!-- hint --> vira {/* hint */}.
Posso dar nome ao componente gerado?
Não. A opção de função sempre usa o nome Foo. Renomeie depois de copiar.