Conversor HTML para JSX
Transforme a marcação HTML em JSX, você pode colar diretamente em um componente React.
Conversor HTML para JSX
Cole a marcação HTML e obtenha JSX que você pode colocar diretamente em um componente React. O conversor renomeia cada atributo para o qual o React espera um nome diferente - class se torna className, for se torna htmlFor, tabindex se torna tabIndex, colspan se torna colSpan e dezenas de outros - para que o console pare de avisar sobre propriedades DOM desconhecidas no momento em que você cola um snippet copiado de uma ferramenta de design, uma exportação CMS, um modelo de e-mail ou uma página estática antiga.
Os estilos embutidos são a próxima coisa que o React recusa como uma string simples. Ative "Converter estilo em objeto" e style="color:red;font-size:16px" se torna style={{ color: 'red', fontSize: '16px' }}, com todas as propriedades camelCased e todos os valores citados, prontos para o suporte de estilo. Elementos void são o terceiro problema: HTML permite que você deixe <br>, <img>, <input>, <hr> e <meta> abertos, mas JSX não irá analisá-los, então "elementos void de auto-fechamento" os reescreve como <br />, <img /> e assim por diante para você.
Os comentários HTML se transformam no único formulário de comentário que o JSX aceita dentro da marcação, então <!-- like this --> se torna {/* assim */}. O conteúdo do texto, os espaços em branco e as quebras de linha permanecem exatamente como você os escreveu, de modo que seu recuo e cópia sobrevivem à conversão intactos, e os atributos data-* e aria-* são deliberadamente deixados hifenizados porque o JSX os mantém como estão. Ambas as opções estão ativadas por padrão e podem ser desativadas quando você deseja apenas renomear os atributos.
Toda a conversão acontece no seu navegador como processamento simples de string – sem DOM, sem servidor, sem upload. Cole a marcação proprietária de um painel de administração interno ou de um site de cliente e nada sairá do seu dispositivo. Copie o JSX, baixe-o como um arquivo ou envie-o para outra ferramenta TextArray para a próxima etapa.