Fundamentos de JSX em React

Introdução

Bem-vindo ao mundo do React! Neste laboratório, você mergulhará no JSX, uma parte fundamental da construção de interfaces de usuário com React. JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que permite escrever código semelhante a HTML diretamente em seus arquivos JavaScript. Isso torna seu código de UI mais legível, expressivo e fácil de manter.

Ao longo deste laboratório, você aprenderá as regras principais do JSX, incluindo:

• Escrever elementos semelhantes a HTML.
• Incorporar expressões dinâmicas de JavaScript.
• Aplicar classes CSS.
• Usar tags de fechamento automático (self-closing tags).
• Agrupar múltiplos elementos com Fragments.

Um projeto básico do React foi configurado para você no diretório ~/project/my-app. Vamos começar!

Escreva um elemento JSX como h1 no retorno do componente

Nesta etapa, você escreverá um elemento JSX básico e o verá renderizado no navegador. O JSX permite que você escreva marcação que se parece muito com HTML diretamente dentro de seus componentes React.

Primeiro, vamos colocar o ambiente de desenvolvimento em funcionamento. Todo o seu trabalho será dentro do diretório ~/project/my-app.

Navegue até o diretório do projeto no terminal, instale as dependências necessárias e inicie o servidor de desenvolvimento.

cd ~/project/my-app
npm install

Após a conclusão da instalação, execute o seguinte comando para iniciar o servidor de desenvolvimento:

npm run dev -- --host 0.0.0.0 --port 8080

Você verá uma saída indicando que o servidor está em execução. Agora, clique na aba Web 8080 na parte superior da tela para ver seu aplicativo ao vivo. Ele deve exibir "Hello, React!".

Em seguida, abra o arquivo src/App.jsx no explorador de arquivos à esquerda. Este arquivo contém um componente React simples chamado App.

Vamos modificar o elemento h1. Altere o texto dentro da tag <h1> para "Welcome to JSX".

Substitua o conteúdo de src/App.jsx pelo seguinte código:

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

Salve o arquivo (Ctrl+S ou Cmd+S). O aplicativo na aba Web 8080 será atualizado automaticamente para mostrar o novo texto.

Incorpore expressões JavaScript em chaves

Nesta etapa, você aprenderá como incorporar expressões JavaScript diretamente em seu JSX usando chaves {}. Este é um recurso poderoso que permite renderizar conteúdo dinâmico.

Você pode colocar qualquer expressão JavaScript válida dentro das chaves. Isso pode ser uma variável, uma chamada de função ou uma operação aritmética.

Vamos modificar o componente App para exibir um título dinâmico. Abra o arquivo src/App.jsx novamente.

Dentro da função App, antes da instrução return, declare uma constante JavaScript chamada title e atribua a ela um valor de string. Em seguida, use essa constante dentro do elemento <h1>.

Atualize seu arquivo src/App.jsx com o seguinte código:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

Salve o arquivo. Agora, verifique a aba Web 8080. Você verá que o título foi atualizado para "React JSX Basics". O React avalia a expressão {title} e renderiza seu valor como o conteúdo da tag <h1>.

Adicione o atributo className para a classe CSS

Nesta etapa, você aprenderá como adicionar classes CSS aos seus elementos JSX para estilização.

Em HTML comum, você usa o atributo class para atribuir uma classe CSS. No entanto, class é uma palavra-chave reservada em JavaScript. Para evitar conflitos, o JSX usa className em vez disso.

Primeiro, vamos adicionar uma regra de estilo. Abra o arquivo src/App.css e adicione o seguinte código CSS para definir um estilo para nosso título:

.title-style {
  color: #61dafb;
  text-align: center;
}

Salve o arquivo src/App.css.

Agora, vamos aplicar essa classe ao nosso elemento <h1>. Abra src/App.jsx e adicione o atributo className à tag h1.

Atualize seu arquivo src/App.jsx para que fique assim:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

Salve o arquivo e mude para a aba Web 8080. Agora você deverá ver o texto do título centralizado e com a cor azul claro, de acordo com os estilos que você definiu em App.css.

Use a tag de fechamento automático para o elemento img

Nesta etapa, você aprenderá como usar tags de fechamento automático em JSX. Em HTML, alguns elementos como <img>, <br> e <input> são elementos "vazios" ou "nulos", o que significa que eles não têm uma tag de fechamento.

Em JSX, você deve fechar explicitamente cada tag. Para elementos que não têm filhos, você usa uma sintaxe de fechamento automático adicionando uma barra / antes do colchete angular de fechamento, como <img />.

Um componente React só pode retornar um único elemento raiz. Para renderizar múltiplos elementos, você deve envolvê-los em um contêiner, como uma <div>.

Vamos adicionar uma imagem abaixo do nosso título. Envolveremos tanto o <h1> quanto a nova tag <img> dentro de uma <div>.

Atualize seu arquivo src/App.jsx com o seguinte código:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

Neste código, adicionamos uma tag <img>. Observe que ela é de fechamento automático (/>). Também usamos chaves para definir dinamicamente o atributo src a partir da variável imageUrl.

Salve o arquivo e olhe para a aba Web 8080. Você verá o logotipo do LabEx exibido abaixo do título.

Renderizar múltiplos elementos em um fragmento <> </>

Nesta etapa, você aprenderá uma maneira melhor de agrupar múltiplos elementos sem adicionar um nó extra ao DOM: React Fragments.

Na etapa anterior, usamos uma <div> para envolver nossos elementos <h1> e <img> porque um componente deve retornar um único elemento raiz. No entanto, às vezes essa <div> extra é desnecessária e pode interferir no seu layout CSS (por exemplo, com Flexbox ou Grid).

O React fornece uma solução chamada Fragments. Um Fragment permite agrupar uma lista de filhos sem adicionar nós extras ao DOM. Você pode usar a sintaxe abreviada <> ... </>.

Vamos refatorar nosso componente App para usar um Fragment em vez de uma <div>.

Abra src/App.jsx e substitua a <div> de abertura e a </div> de fechamento por <> e </> respectivamente.

Seu código final de src/App.jsx deve ficar assim:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

Salve o arquivo. A saída visual na aba Web 8080 será idêntica à etapa anterior. No entanto, se você inspecionar o HTML nas ferramentas de desenvolvedor do seu navegador, verá que os elementos <h1> e <img> agora são irmãos diretos, sem uma <div> pai. Isso cria uma estrutura de DOM mais limpa e eficiente.

Resumo

Parabéns por completar o laboratório React JSX Basics! Você aprendeu as regras e a sintaxe fundamentais para escrever UI em uma aplicação React.

Neste laboratório, você praticou:

• Escrever elementos semelhantes a HTML, como <h1>, na instrução return do seu componente.
• Incorporar variáveis e expressões JavaScript dinâmicas em sua marcação usando chaves {}.
• Aplicar classes CSS usando o atributo className.
• Usar tags de fechamento automático para elementos como <img> com a sintaxe />.
• Agrupar múltiplos elementos sem adicionar nós DOM extras usando React Fragments (<> </>).

Esses conceitos são os blocos de construção para criar interfaces de usuário complexas e dinâmicas com React. Continue praticando para se sentir mais confortável com o poder e a flexibilidade do JSX.