Diferença JSX e HTML

Tempo de leitura: 2 minutos

Diferença JSX e HTML: Uma das características distintivas do React é o uso de uma sintaxe chamada JSX, que se parece muito com HTML.

Neste artigo, vamos explorar as diferenças entre JSX e HTML.

O que é JSX?

JSX é uma extensão de sintaxe para JavaScript que se parece muito com HTML. É uma maneira concisa e familiar de definir estruturas de árvore com atributos. Embora não seja necessário para escrever aplicações React, muitos desenvolvedores acham útil por permitir que eles escrevam código que se parece visualmente com o layout que estão tentando criar.

const elemento = <h1>Olá, mundo!</h1>;

Neste exemplo, elemento é uma constante que contém um bloco JSX que define um elemento h1.

Diferenças entre JSX e HTML

Embora JSX se pareça muito com HTML, existem algumas diferenças importantes que você deve estar ciente ao escrever JSX em React:

• Expressões JavaScript: Em JSX, você pode incorporar qualquer expressão JavaScript válida dentro de chaves {}. Isso é algo que você não pode fazer com HTML.

const nome = 'Mundo';
const elemento = <h1>Olá, {nome}</h1>;

Neste exemplo, nome é uma constante JavaScript que é incorporada em um bloco JSX usando chaves.

• Atributos e Props: Em JSX, os atributos são chamados de props (abreviação de propriedades) e você pode passar qualquer valor JavaScript válido como prop. Em HTML, os atributos são sempre strings.

const elemento = <div tabIndex="0"></div>;
const elemento = <div tabIndex={0}></div>;

Nestes exemplos, o primeiro bloco usa HTML, onde o valor do atributo tabIndex é uma string. O segundo bloco usa JSX, onde o valor do atributo tabIndex é um número.

• Nomes de atributos: Alguns nomes de atributos em JSX são diferentes dos nomes de atributos em HTML. Por exemplo, a classe se torna className em JSX, e for se torna htmlFor.

const elemento = <div className="meu-div"></div>;

Neste exemplo, className é usado em vez de class para adicionar uma classe CSS ao div.

• Fechamento de tags: Em JSX, todas as tags devem ser fechadas. Se uma tag não tem filhos, você pode fechá-la com />. Isso é diferente do HTML, onde algumas tags (como <br>, <img>, etc.) não precisam ser fechadas.

const elemento = <img src="meu-imagem.jpg" alt="" />;

Neste exemplo, a tag img é fechada com />.

Conclusão

Diferença JSX e HTML: Embora JSX se pareça muito com HTML, existem algumas diferenças importantes que podem tornar a transição de HTML para JSX um pouco desafiadora no início.

No entanto, uma vez que você se acostume com essas diferenças, você pode achar que JSX oferece uma experiência de desenvolvimento mais poderosa e flexível do que o HTML puro. Com JSX, você pode criar componentes reutilizáveis, passar props ricas e dinâmicas e aproveitar todo o poder do JavaScript dentro de sua marcação.

E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!

E para você que já adquiriu seu novo notebook para estudar, precisará validar seus códigos, e para isso você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!