Sintaxe JSX
O React utiliza uma sintaxe chamada JSX (JavaScript XML) para definir a estrutura dos componentes. JSX é uma extensão de sintaxe JavaScript que lembra muito o formato do HTML. No entanto, há diferenças fundamentais que vale a pena destacar:
Sintaxe de Tags
JSX
const element = <h1>Hello, World!</h1>;HTML
<h1>Hello, World!</h1>Expressões JavaScript
JSX
Permite incorporar expressões JavaScript.
const name = 'John';
const element = <h1>Hello, {name}!</h1>;HTML
HTML não permite a execução direta de expressões JavaScript.
Atributos em JSX
Utiliza a sintaxe de atributos do HTML.
const element = <img src="path/to/image.jpg" alt="Description" />;Atributos em JSX seguem uma convenção camelCase, por exemplo, className ao invés de class uma vez que esta é uma palavra reservado do JavaScript.
Elementos Aninhados
JSX
Permite aninhar elementos como expressões dentro de chaves.
const element = (
<div>
<h1>Hello!</h1>
<p>Welcome to React.</p>
</div>
);HTML
Necessita de uma estrutura de tags mais explícita.