JSX

React utiliza uma sintaxe de marcação chamada JSX para construir seus elementos e interfaces. Apesar de ser opcional, é altamente recomendado utilizá-lo.

JSX é mais rígido que HTML e é necessário fechar todas as tags, mesmo as que não possuem conteúdo, ex </section>. Um componente também não permite o retorno de vários elementos JSX em um mesmo nível, é necessário encapsular em um elemento superior, algo como <div> ... </div> or utilizando fragmentos <> ... </>.

function HomePage() {
  return (
    <>
      <h1>Programação!</h1>
      <p>Tudo sobre React você encontra aqui</p>
      <button>Saiba mais</button>
    </>
  );
}