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:

const element = <h1>Hello, World!</h1>;

<h1>Hello, World!</h1>

Permite incorporar expressões JavaScript.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

HTML não permite a execução direta de expressões JavaScript.

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.

Permite aninhar elementos como expressões dentro de chaves.

const element = (
	<div>
		<h1>Hello!</h1>
		<p>Welcome to React.</p>
	</div>
);

Necessita de uma estrutura de tags mais explícita.

• Curso de React.Js e Next.Js (nível intermediário e avançado)