Componentes são os blocos de construção das aplicações React que permitem aos desenvolvedores dividir interfaces de usuário complexas em partes menores e gerenciáveis, facilitando o desenvolvimento e a manutenção de aplicações em grande escala. Os dois tipos de componentes em React são componentes funcionais e baseados em classe. No React moderno, os desenvolvedores usarão componentes funcionais e todos os exemplos que veremos hoje serão componentes funcionais. Em um nível mais alto, você pode pensar em componentes como funções JavaScript que retornam elementos que descrevem a UI. Esta interface de usuário é descrita usando JSX, uma extensão de sintaxe para JavaScript que se parece com HTML mas permite que você escreva elementos de interface de forma mais declarativa. Vamos ver um exemplo de um componente React:

function Greeting() {
  const name = "John"
  {/* The result will be Hello John*/}
  return <h1 className="title">Hello {name}</h1>;
}

Neste exemplo, definimos um componente chamado Greeting. As chaves {} dentro das tags h1 nos permitem incorporar expressões JavaScript, permitindo acessar a variável name dentro do elemento h1. Também estamos aplicando um className chamado title ao elemento h1. Mas por que estamos usando className em vez de class como nos elementos HTML comuns? Bem, isso acontece porque em JavaScript, class é um nome reservado. Então, precisamos usar className em vez disso. Também estamos usando um comentário em JSX mostrando qual será o resultado. É importante notar que você pode usar a sintaxe regular de comentário assim, mas ela precisa estar envolvida em chaves para que funcione:

{/* Block Comments */}

Outra coisa que você pode ter notado é que estamos usando uma letra maiúscula no início do nome do componente. Mas por que não podemos usar todas as letras minúsculas? Isso ocorre porque o React trata componentes com letra maiúscula como componentes personalizados, enquanto elementos com letras minúsculas são considerados elementos HTML embutidos. Quando o React encontra uma tag em minúsculas, como <div> ou <span>, ele assume que é um elemento HTML padrão. No entanto, se o nome do componente começar com uma letra maiúscula, o React o tratará como um componente definido pelo usuário e o renderizará de acordo. Essa distinção ajuda o React a diferenciar entre tags HTML nativas e componentes que você cria. Para usar este componente Greeting em nossa aplicação, escreveríamos algo assim:

<Greeting />

Isto renderizaria um elemento h1 com o texto Hello John na página. Mas dê uma olhada mais de perto na sintaxe aqui. Quando usamos o componente, ele termina com uma barra e depois o símbolo de maior. Ao trabalhar com JSX, todas as tags e usos de componentes precisam ser explicitamente fechados. Então, se o componente ou a tag não tiver nenhum filho, você precisa fechá-lo explicitamente como mostrado aqui:

<Greeting /> {/* /> is required */}

Até agora, só temos analisado como renderizar um único elemento h1. Mas você pode realmente renderizar múltiplos elementos. Vamos dar uma olhada no seguinte código de exemplo aqui:

function Greeting() {
  const name = "John";
  {/* This will throw an error */}
  return <h1>Hello {name}</h1> 
  <p>Nice to meet you.</p>
}

Estamos tentando adicionar outra frase de Nice to meet you mas ela não está sendo exibida corretamente na página. Parece haver uma mensagem de erro em vez disso. A mensagem de erro diz Adjacent JSX elements must be wrapped in an enclosing tag. A razão pela qual você está recebendo essa mensagem de erro é porque múltiplos elementos irmãos precisam estar envolvidos em um elemento pai. Embora você possa envolver os elementos h1 e p em um simples div, há outra maneira de silenciar o erro. Fragmentos React são usados para agrupar elementos juntos. Aqui está como o exemplo revisado ficará:

function Greeting() {
  const name = "John";
  return (
    <Fragment>
      <h1>Hello {name}</h1>
      <p>Nice to meet you.</p>
    </Fragment>
  );
}

Você também pode optar por usar tags JSX vazias que podem servir como uma forma abreviada para fragments:

function Greeting() {
  const name = "John";
  return (
    <>
      <h1>Hello {name}</h1>
      <p>Nice to meet you.</p>
    </>
  );
}

Nas próximas aulas, continuaremos a aprender mais sobre como trabalhar com componentes e JSX. Mas por enquanto, você teve uma introdução sólida à construção de interfaces de usuário com componentes, estabelecendo uma base forte para o que está por vir.