Configuração do React e Primeiro App

Introdução

Bem-vindo ao seu primeiro laboratório de React! React é uma poderosa biblioteca JavaScript para construir interfaces de usuário dinâmicas e interativas. Para começar com o desenvolvimento em React, você primeiro precisa configurar um ambiente de desenvolvimento adequado.

Neste laboratório, você usará a moderna ferramenta de build Vite para inicializar um novo projeto. Percorreremos o processo de exploração da estrutura do projeto, instalação de dependências, inicialização de um servidor de desenvolvimento, modificação de um componente existente e criação de um novo. Ao final deste laboratório, você terá uma compreensão fundamental da configuração de projetos React e estará pronto para construir seus próprios componentes.

Explore o Projeto e Instale as Dependências

O processo de configuração já criou um novo projeto React para você em um diretório chamado my-app usando Vite. Primeiro, vamos verificar se o seu ambiente de desenvolvimento possui as ferramentas necessárias, Node.js e npm.

Abra o terminal e execute os seguintes comandos para verificar suas versões:

node -v

Você deverá ver uma saída indicando a versão do Node.js, por exemplo:

v22.19.0

Em seguida, verifique a versão do npm:

npm -v

Você deverá ver uma saída semelhante para a versão do npm:

10.9.3

Agora, navegue até o diretório do projeto. Todos os comandos subsequentes devem ser executados de dentro deste diretório.

cd my-app

Sua aplicação React precisa de vários pacotes para funcionar, que estão listados no arquivo package.json. Você precisa instalar essas dependências usando o npm.

Execute o seguinte comando:

Importante: Por motivos de segurança, usuários gratuitos não podem se conectar à internet, portanto, pacotes npm não podem ser instalados. Você pode continuar lendo a documentação, experimentar outros Web Development Labs, ou considerar fazer um upgrade para um usuário Pro.

npm install

Este comando lê o arquivo package.json e baixa todas as bibliotecas necessárias para uma pasta node_modules dentro do seu projeto. Você verá uma barra de progresso e algumas mensagens enquanto os pacotes são instalados.

Inicie o Servidor de Desenvolvimento

Para ver seu aplicativo React em ação, você precisa iniciar o servidor de desenvolvimento. Como você já está dentro do diretório my-app, pode usar o script fornecido pelo Vite.

Execute o seguinte comando para iniciar o servidor na porta 8080:

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

Este comando inicia o servidor e ocupará seu terminal, exibindo o URL local onde o aplicativo está em execução. Deixe este terminal em execução. Após um momento, você verá uma mensagem indicando que o servidor está pronto.

Para visualizar seu aplicativo, clique na aba Web 8080 na parte superior da interface. Você deverá ver a página de boas-vindas padrão do Vite e React.

Observação: Se você não vir o aplicativo, tente clicar no botão de recarregar localizado à esquerda da barra de endereço na aba Web 8080.

Modifique Seu Primeiro Componente

O servidor de desenvolvimento do Vite possui Hot Module Replacement (HMR), que atualiza instantaneamente o aplicativo no seu navegador quando você salva alterações em um arquivo. Vamos ver isso em ação.

No explorador de arquivos à esquerda, navegue até my-app -> src e clique no arquivo App.jsx para abri-lo no editor. Este arquivo define o componente principal App.

Dentro da instrução return, você verá um bloco de código que se parece com HTML. Isso é JSX, uma extensão de sintaxe para JavaScript que permite escrever estruturas de UI de uma maneira familiar.

Substitua todo o conteúdo dentro de return (...) por um título simples. Seu arquivo App.jsx deve ficar assim:

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Salve o arquivo pressionando Ctrl+S (ou Cmd+S no Mac). Agora, volte para a aba Web 8080. Você verá que a página foi atualizada instantaneamente para exibir seu novo título "Hello, LabEx!".

Crie um Novo Componente

Um princípio fundamental do React é construir UIs a partir de pequenas peças reutilizáveis chamadas componentes. Vamos criar um novo componente.

1. No explorador de arquivos à esquerda, clique com o botão direito no diretório src dentro de my-app.
2. Selecione "New File" (Novo Arquivo) e nomeie-o como Welcome.jsx.
3. Abra o arquivo recém-criado Welcome.jsx e adicione o seguinte código:

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

Vamos analisar este código:

• import React from 'react';: Esta linha é necessária para qualquer arquivo que use JSX.
• function Welcome() { ... }: Isso define um componente funcional simples chamado Welcome.
• return <h2>...</h2>;: O componente retorna um elemento JSX que será renderizado na tela.
• export default Welcome;: Isso torna o componente Welcome disponível para uso em outros arquivos.

Salve o arquivo (Ctrl+S). Nada mudará no navegador ainda, pois ainda não usamos este novo componente.

Use Seu Novo Componente

Agora que você criou o componente Welcome, vamos usá-lo dentro do nosso componente principal App. Isso é conhecido como composição de componentes.

1. Abra o arquivo my-app/src/App.jsx novamente.
2. Na parte superior do arquivo, adicione uma instrução import para trazer seu novo componente:

import Welcome from "./Welcome.jsx";

3. Em seguida, coloque seu novo componente dentro da instrução return do componente App. Adicione <Welcome /> abaixo da tag <h1> para renderizar o componente. O código final para App.jsx deve ficar assim:

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

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

4. Salve o arquivo App.jsx (Ctrl+S).

Mude para a aba Web 8080 mais uma vez. Agora você verá a mensagem "Welcome to my first React App!" renderizada abaixo do seu título principal. Você criou e compôs componentes React com sucesso!

Resumo

Neste laboratório, você deu os primeiros passos essenciais no mundo do desenvolvimento React usando a moderna toolchain Vite.

Você aprendeu a:

• Verificar um ambiente de desenvolvimento Node.js e npm.
• Criar um novo projeto React usando Vite.
• Instalar dependências do projeto com npm install.
• Iniciar o servidor de desenvolvimento React usando npm run dev.
• Modificar um componente existente e ver atualizações em tempo real com Hot Module Replacement.
• Criar um novo componente funcional do zero em um arquivo .jsx.
• Importar e compor componentes para construir uma UI mais complexa.

Você configurou com sucesso um projeto React, experimentou o fluxo de trabalho de desenvolvimento moderno e praticou os fundamentos da arquitetura baseada em componentes. Agora você está bem preparado para abordar conceitos mais avançados de React.