[Dúvida] Extensão dos componentes

Olá, Carolina! Tudo bem?

O que é JSX?

JSX é uma extensão da linguagem JavaScript que é usada pelo React para criar interfaces de usuário. Ele permite que você misture código JavaScript com sintaxe de HTML, o que torna mais fácil escrever componentes de interface de usuário em um único arquivo de código.

Exemplo de código com JSX no React.

Por exemplo, imagine que você tem um componente de botão no React. Com JSX, você poderia escrever esse componente da seguinte maneira:

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.texto}
    </button>
  );
}

Como você pode ver no exemplo acima, o código JSX é escrito dentro de chaves {} e é interpretado pelo React como código JavaScript. Isso permite que você escreva componentes de interface de usuário de forma mais clara e concisa, sem precisar alternar entre arquivos de JavaScript e HTML.

Além disso, o JSX permite que você use expressões JavaScript dentro da sintaxe de HTML. Por exemplo, você poderia usar uma condição if para mostrar ou esconder um botão de acordo com o estado de sua aplicação:

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.estaVisivel ? props.texto : null}
    </button>
  );
}

Como você pode ver, o JSX é uma ferramenta poderosa que torna mais fácil criar componentes de interface de usuário no React. Ele permite que você escreva código mais conciso e organizado, e é uma parte fundamental do ecossistema do React.

Esta explicação eu tirei desse artigo aqui do Vinny Neves, que fala tudo sobre o React, como funciona e eu recomendo que você leia, pois é muito bom!

• React: o que é, como funciona e um Guia dessa popular ferramenta JS

Grande abraço!