Introdução aos Componentes React

Introdução

Neste laboratório, você aprenderá o conceito fundamental de componentes no React. Componentes são partes de código independentes e reutilizáveis. Eles servem ao mesmo propósito que as funções JavaScript, mas funcionam isoladamente e retornam HTML (via JSX) para serem renderizados na tela. Focaremos na criação de um simples "componente funcional".

Você criará um novo componente em seu próprio arquivo, o exportará e, em seguida, o importará e renderizará dentro do componente principal App.

Crie um componente funcional no novo arquivo Hello.jsx

Nesta etapa, você criará seu primeiro componente React. É uma prática comum colocar cada componente em seu próprio arquivo para manter o código organizado e reutilizável. Criaremos um novo arquivo para um componente chamado Hello.

Primeiro, vamos preparar o ambiente de desenvolvimento. Os arquivos do projeto foram criados para você no diretório my-app. Você precisa navegar até este diretório, instalar as dependências necessárias e iniciar o servidor de desenvolvimento.

Abra um terminal no WebIDE (você pode usar o menu: Terminal > New Terminal) e execute os seguintes comandos um por um:

cd my-app

npm install

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

Após executar o último comando, o servidor de desenvolvimento será iniciado. Você pode visualizar o aplicativo em execução clicando na aba Web 8080 na interface do LabEx. Ao longo deste laboratório, você pode alternar para esta aba para ver suas alterações.

No explorador de arquivos do WebIDE à esquerda, navegue até o diretório my-app/src. Clique com o botão direito na pasta src e selecione "New File". Nomeie o novo arquivo como Hello.jsx.

Agora, adicione o seguinte código ao seu arquivo recém-criado my-app/src/Hello.jsx. Este código define um componente funcional simples.

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

Vamos analisar este código:

• function Hello(): Esta é uma função JavaScript padrão. No React, componentes funcionais são apenas funções JavaScript. Por convenção, os nomes dos componentes sempre começam com uma letra maiúscula.
• return <h1>...</h1>;: A função retorna JSX. JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que se parece muito com HTML. É o que usamos para descrever como a interface do usuário deve parecer.

Exporte o componente como default

Nesta etapa, você tornará o componente Hello disponível para uso em outras partes de sua aplicação. Para fazer isso, você precisa exportá-lo do arquivo Hello.jsx.

Existem dois tipos principais de exportações em módulos JavaScript: exportações nomeadas (named exports) e exportações padrão (default exports). Para este laboratório, usaremos uma exportação padrão, que é comum para componentes quando um arquivo exporta apenas uma coisa.

Adicione a seguinte linha ao final do seu arquivo my-app/src/Hello.jsx:

export default Hello;

Seu arquivo completo my-app/src/Hello.jsx agora deve se parecer com isto:

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

Esta instrução export default torna a função Hello a exportação principal deste arquivo, permitindo que outros arquivos a importem.

Importe o componente no App.jsx usando a declaração import

Nesta etapa, você importará o componente Hello para o componente principal da aplicação, App.jsx, para que possa utilizá-lo.

No explorador de arquivos do WebIDE, localize e abra o arquivo my-app/src/App.jsx.

Para usar o componente Hello, você deve primeiro importá-lo. Adicione a seguinte instrução de importação no topo do arquivo my-app/src/App.jsx, antes da definição da função App:

import Hello from "./Hello.jsx";

Esta linha instrui o JavaScript a importar a exportação padrão do arquivo Hello.jsx (que está localizado no mesmo diretório, daí ./) e atribuí-la a uma variável chamada Hello.

Após adicionar a importação, o topo do seu arquivo my-app/src/App.jsx ficará algo parecido com isto (as outras importações podem ser ligeiramente diferentes):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... resto do arquivo

Renderize o componente importado dentro do return do App

Nesta etapa, você renderizará o componente Hello dentro do componente App. Uma vez que um componente é importado, você pode usá-lo dentro do JSX como uma tag HTML comum.

No arquivo my-app/src/App.jsx, localize a instrução return dentro da função App. O código existente é o conteúdo padrão do Vite. Você pode substituir tudo por seu novo componente.

Modifique a função App para remover o conteúdo padrão e renderizar o componente <Hello /> em vez disso.

Sua função App deve ficar assim:

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

Aqui, <Hello /> é como você renderiza o componente Hello. O <> e </> são chamados de Fragment; eles permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM.

Seu arquivo inteiro my-app/src/App.jsx agora deve ficar assim:

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

Nota: Removemos as importações não utilizadas e a lógica de estado para maior clareza.

Salve os arquivos e verifique o navegador para a renderização atualizada

Nesta etapa, você verá o resultado do seu trabalho.

Certifique-se de ter salvo todas as suas alterações tanto em my-app/src/Hello.jsx quanto em my-app/src/App.jsx. Você pode salvar um arquivo pressionando Ctrl+S ou Cmd+S.

O servidor de desenvolvimento Vite que você iniciou na introdução utiliza Hot Module Replacement (HMR), o que significa que ele detecta automaticamente as alterações nos arquivos e atualiza a aplicação no navegador sem a necessidade de recarregar a página inteira.

Mude para a aba Web 8080 na interface do LabEx. Você deverá agora ver o texto "Hello from the Hello component!" exibido na página. Este conteúdo está sendo renderizado a partir do seu novo componente Hello.

Se você não vir as alterações, tente clicar no botão de recarregar na barra de endereço da aba do navegador.

Parabéns, você criou, exportou e renderizou com sucesso seu primeiro componente React!

Resumo

Neste laboratório, você aprendeu o fluxo de trabalho básico de criação e uso de componentes em uma aplicação React. Essa abordagem modular é um princípio central do desenvolvimento React.

Você realizou com sucesso:

• A criação de um novo componente funcional em um arquivo dedicado (Hello.jsx).
• O uso de export default para tornar o componente disponível para outras partes da aplicação.
• O uso de import para trazer o componente para o arquivo principal App.jsx.
• A renderização do componente importado usando a sintaxe de tag JSX (<Hello />).

Este padrão de criação, exportação e importação de componentes é fundamental para construir aplicações React grandes e de fácil manutenção.