No React, utilizamos uma extensão de sintaxe do JavaScript chamada JSX (JavaScript XML) para construir nossas interfaces de usuário. JSX permite escrever componentes React que descrevem como a interface deve ser exibida.

JSX se assemelha ao HTML, mas é escrito dentro do JavaScript. Ele permite descrever elementos de interface diretamente no código do componente, em vez de construí-los passo a passo com JavaScript.

Embora o JSX pareça HTML, ele não é HTML. Por trás dos bastidores, o JSX é convertido em JavaScript que o React entende. Isso torna o JSX expressivo e poderoso, mantendo-se parte da linguagem JavaScript.

No JSX, é possível incorporar expressões JavaScript diretamente na marcação. Isso facilita a exibição de dados dinâmicos e o controle do que aparece na tela. Abaixo está o mesmo componente de antes, agora mostrado com JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Aqui, o JSX é utilizado para descrever a interface. A sintaxe {name} permite inserir valores JavaScript na interface. O React atualiza automaticamente a saída exibida quando os dados mudam.