Blog

Tutorial React: Guia para Iniciantes

Audrey Lopez

Audrey Lopez

13 junho 2025

Tutorial React: Guia para Iniciantes

Bem-vindo(a), aspirante a desenvolvedor(a) React! Você fez uma escolha fantástica. React é uma biblioteca JavaScript poderosa e popular para construir interfaces de usuário, e aprendê-la é uma maneira certa de impulsionar suas habilidades de desenvolvimento web. Este guia abrangente, passo a passo, levará você do zero ao herói, equipando-o(a) com o conhecimento prático necessário para começar a construir suas próprias aplicações React em 2025. Vamos focar em fazer, não apenas ler, então prepare-se para escrever algum código!

💡
Quer uma ótima ferramenta de Teste de API que gera Documentação de API linda?

Quer uma plataforma integrada e completa para sua Equipe de Desenvolvedores trabalhar em conjunto com máxima produtividade?

Apidog atende a todas as suas demandas e substitui o Postman por um preço muito mais acessível!
botão

Vamos Configurar Seu Ambiente de Desenvolvimento React

Antes de começarmos a construir interfaces de usuário incríveis, precisamos configurar um local para trabalhar. Pense nisso como preparar sua oficina antes de iniciar um novo projeto.

Instalando o Essencial: Node.js e npm

Aplicações React são construídas e gerenciadas usando Node.js e seu gerenciador de pacotes, npm (Node Package Manager).

Para começar, acesse o site oficial do Node.js e baixe a versão mais recente de Suporte de Longo Prazo (LTS). O instalador é direto; basta seguir as instruções na tela. Uma vez instalado, você terá tanto Node.js quanto npm prontos para usar. Você pode verificar a instalação abrindo seu terminal ou prompt de comando e digitando:Bash

node -v
npm -v

Esses comandos devem exibir as versões do Node.js e npm que você instalou, respectivamente.

Seu Primeiro Projeto React com Vite

No passado, create-react-app era a ferramenta padrão para iniciar um novo projeto React. No entanto, o cenário moderno de desenvolvimento web se move rapidamente, e em 2025, o Vite é a escolha recomendada por sua incrível velocidade e eficiência.

Para criar um novo projeto React com Vite, abra seu terminal e execute o seguinte comando:Bash

npm create vite@latest my-first-react-app -- --template react

Vamos analisar este comando:

Assim que o comando terminar, você terá um novo diretório com o nome do seu projeto. Navegue até este diretório:Bash

cd my-first-react-app

Em seguida, você precisa instalar as dependências do projeto. Estes são os outros pacotes que sua aplicação React precisa para funcionar corretamente. Execute este comando:Bash

npm install

Finalmente, para ver sua novíssima aplicação React em ação, inicie o servidor de desenvolvimento:Bash

npm run dev

Seu terminal exibirá uma URL local, geralmente http://localhost:5173. Abra esta URL em seu navegador web, e você verá a aplicação React padrão criada pelo Vite. Parabéns, você acabou de configurar seu primeiro projeto React!

O Coração do React: Componentes e JSX

Agora que você tem uma aplicação React funcionando, vamos mergulhar nos conceitos centrais que tornam o React tão poderoso: componentes e JSX.

O que são Componentes?

Em sua essência, uma aplicação React é uma coleção de peças de UI reutilizáveis e auto-contidas chamadas componentes. Pense em uma página web sendo construída com peças de LEGO. Cada peça é um componente, e você pode combiná-las para criar estruturas mais complexas.

No seu projeto my-first-react-app, abra a pasta src e você encontrará um arquivo chamado App.jsx. Este é o componente principal da sua aplicação. Vamos simplificar seu conteúdo para entender o básico:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Olá, Mundo React!</h1>
      <p>Este é o meu primeiro componente React.</p>
    </div>
  );
}

export default App;

Neste código:

Entendendo JSX: JavaScript XML

JSX é uma extensão de sintaxe para JavaScript que permite escrever código parecido com HTML dentro1 de seus arquivos JavaScript. Não é realmente HTML, mas torna a escrita de código de UI muito mais intuitiva e legível.

Por trás dos panos, uma ferramenta chamada transpiler (em nosso caso, alimentada pelo Vite) converte este JSX em JavaScript regular que os navegadores podem entender.

Vamos modificar nosso App.jsx para ver o poder do JSX. Podemos incorporar expressões JavaScript diretamente em nosso JSX usando chaves {}.JavaScript

// src/App.jsx

function App() {
  const name = "Desenvolvedor(a) Iniciante";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Olá, {name}!</h1>
      <p>Bem-vindo(a) à sua jornada React em {year}.</p>
    </div>
  );
}

export default App;

Salve o arquivo, e seu navegador será atualizado automaticamente para exibir o novo conteúdo. Este é um recurso do Vite chamado Hot Module Replacement (HMR), e proporciona uma experiência de desenvolvimento fantástica.

Criando Seu Primeiro Componente Personalizado

Vamos criar nosso próprio componente. Na pasta src, crie um novo arquivo chamado Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>Este é um cumprimento do meu componente personalizado!</h2>
  );
}

export default Greeting;

Agora, vamos usar este novo componente Greeting dentro do nosso componente App.jsx.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Importa o componente Greeting

function App() {
  const name = "Desenvolvedor(a) Iniciante";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Olá, {name}!</h1>
      <p>Bem-vindo(a) à sua jornada React em {year}.</p>
      <Greeting /> {/* Usa o componente Greeting */}
    </div>
  );
}

export default App;

Ao importar e depois usar <Greeting /> assim como uma tag HTML regular, compusemos nossa UI a partir de múltiplos componentes. Este é o bloco de construção fundamental das aplicações React.

Passando Dados com Props

Nosso componente Greeting é um pouco estático. E se quisermos cumprimentar pessoas diferentes? É aqui que entram as props (abreviação de properties - propriedades). Props são como você passa dados de um componente pai para um componente filho.

Tornando Componentes Dinâmicos com Props

Vamos modificar nosso Greeting.jsx para aceitar uma prop name.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Olá, {props.name}! Este é um cumprimento do meu componente personalizado.</h2>
  );
}

export default Greeting;

Agora, em App.jsx, podemos passar uma prop name para nossos componentes Greeting.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Você verá agora três cumprimentos diferentes, cada um com um nome único. Props nos permitem reutilizar componentes com dados diferentes, tornando nossa UI incrivelmente flexível.

Uma prática comum e moderna em JavaScript é desestruturar o objeto props diretamente na lista de parâmetros da função. Vamos refatorar Greeting.jsx:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Olá, {name}! Este é um cumprimento do meu componente personalizado.</h2>
  );
}

export default Greeting;

Isso alcança o mesmo resultado, mas com um código mais limpo e conciso.

Gerenciando a Memória do Componente com State

Enquanto props são ótimas para passar dados pela árvore de componentes, o que acontece quando um componente precisa lembrar e gerenciar seus próprios dados? É aqui que o state (estado) entra em jogo. State são dados que são gerenciados dentro de um componente. Quando o state de um componente muda, o React automaticamente renderizará novamente esse componente para refletir o novo state.

Introduzindo o Hook useState

Para gerenciar state em componentes funcionais, usamos uma função especial do React chamada Hook. O Hook mais fundamental é o useState.

Vamos construir um componente de contador simples para entender como o useState funciona. Crie um novo arquivo na sua pasta src chamado Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique em mim
      </button>
    </div>
  );
}

export default Counter;

Vamos analisar isso:

  1. count: O valor atual do state.
  2. setCount: Uma função que podemos usar para atualizar o state count.

Agora, vamos adicionar este componente Counter ao nosso App.jsx:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Minha Incrível Aplicação React</h1>
      <Counter />
    </div>
  );
}

export default App;

Você deve ver agora um contador no seu navegador. Cada vez que você clica no botão, o número aumenta. O React está renderizando novamente o componente Counter cada vez que seu state muda.

Respondendo às Ações do Usuário: Lidando com Eventos

A interatividade está no coração das aplicações web modernas. O React oferece uma maneira simples e consistente de lidar com eventos como cliques, envios de formulário e entrada de teclado.

Já vimos um manipulador de eventos básico em nosso componente Counter com onClick. Vamos explorar isso mais a fundo construindo um formulário simples que recebe entrada do usuário.

Crie um novo arquivo de componente chamado NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Previne o comportamento padrão de envio do formulário
    alert(`Olá, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nome:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default NameForm;

Vamos analisar este componente de formulário:

Adicione este NameForm ao seu App.jsx para vê-lo em ação.

Exibindo Informações: Renderização Condicional e Listas

Aplicações do mundo real frequentemente precisam mostrar ou ocultar conteúdo com base em certas condições, e frequentemente precisam exibir listas de dados.

Mostrando e Ocultando com Renderização Condicional

Vamos criar um componente que exibe uma mensagem diferente dependendo se um usuário está logado. Crie um arquivo chamado LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Bem-vindo(a) de volta!</h2>;
  }
  return <h2>Por favor, faça login.</h2>;
}

export default LoginMessage;

Também podemos usar o operador ternário para uma renderização condicional mais concisa.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Bem-vindo(a) de volta!</h2> : <h2>Por favor, faça login.</h2>}
    </div>
  );
}

export default LoginMessage;

Você pode então usar este componente em App.jsx e passar a prop isLoggedIn para ver as diferentes mensagens.

Exibindo Listas de Dados

Para renderizar uma lista de itens, você tipicamente usará o método de array map(). Vamos criar um componente para exibir uma lista de frutas. Crie um arquivo chamado FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Maçã', 'Banana', 'Cereja', 'Tâmara'];

  return (
    <div>
      <h3>Minhas Frutas Favoritas:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Aqui, estamos mapeando sobre o array fruits e para cada fruta, estamos retornando um elemento <li>.

Você notará a prop key={index}. Quando você renderiza uma lista de itens, o React precisa de uma key única para cada item para atualizar eficientemente a lista quando ela muda. Usar o índice do array como key é aceitável para listas simples e estáticas. No entanto, para listas dinâmicas onde itens podem ser adicionados, removidos ou reordenados, é melhor usar um ID único dos seus dados, se disponível.

Adicionando Estilo à Sua Aplicação

Uma ótima aplicação precisa ter uma boa aparência. Existem várias maneiras de estilizar seus componentes React.

Folhas de Estilo CSS

A maneira mais direta é usar arquivos CSS regulares. Na pasta src, você encontrará um arquivo App.css. Você pode adicionar seus estilos lá.

Por exemplo, para estilizar nosso componente FruitList, você poderia adicionar isso ao App.css:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Então, em seu FruitList.jsx, você pode usar essas classes CSS.JavaScript

// src/FruitList.jsx
import './App.css'; // Certifique-se de importar o arquivo CSS

function FruitList() {
  const fruits = ['Maçã', 'Banana', 'Cereja', 'Tâmara'];

  return (
    <div>
      <h3>Minhas Frutas Favoritas:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Observe que usamos className em vez de class em JSX, pois class é uma palavra reservada em JavaScript.

Módulos CSS

Para aplicações maiores, Módulos CSS oferecem uma maneira de delimitar estilos a um componente específico, prevenindo conflitos de estilo. Um arquivo de Módulo CSS é nomeado com a extensão .module.css.

Vamos criar FruitList.module.css:CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Agora, em FruitList.jsx, você importa os estilos como um objeto:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Maçã', 'Banana', 'Cereja', 'Tâmara'];

  return (
    <div>
      <h3>Minhas Frutas Favoritas (Estilizado com Módulos CSS):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

O Vite gerará automaticamente nomes de classe únicos, garantindo que os estilos em FruitList.module.css se apliquem apenas ao componente FruitList.

A maioria das aplicações web tem múltiplas páginas. Para lidar com a navegação entre essas "páginas" em uma aplicação de página única (SPA) como uma construída com React, usamos uma biblioteca chamada React Router.

Configurando o React Router

Primeiro, você precisa instalar o React Router:Bash

npm install react-router-dom

Criando Suas Páginas

Vamos criar dois componentes de página simples: HomePage.jsx e AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Página Inicial</h1>
      <p>Bem-vindo(a) à página inicial da nossa incrível aplicação!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>Sobre Nós</h1>
      <p>Isto é tudo sobre a nossa incrível aplicação.</p>
    </div>
  );
}

export default AboutPage;

Configurando o Router

Agora, vamos configurar nossas rotas em App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Início</Link>
            </li>
            <li>
              <Link to="/about">Sobre</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Vamos analisar os novos componentes do React Router:

Agora, quando você clicar nos links "Início" e "Sobre", o conteúdo mudará sem um recarregamento completo da página. Você implementou com sucesso o roteamento do lado do cliente!

Indo Além: O Hook useEffect

O Hook useState é para gerenciar state que afeta diretamente o que é renderizado. Mas e quanto aos efeitos colaterais, como buscar dados de uma API, configurar assinaturas ou alterar manualmente o DOM? Para isso, usamos o Hook useEffect.

O Hook useEffect executa após cada renderização por padrão. Vamos vê-lo em ação criando um componente que busca dados de uma API falsa.

Crie um novo arquivo DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Esta função será chamada após o componente renderizar
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Erro ao buscar dados:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // O array de dependência vazio é importante!

  if (loading) {
    return <p>Carregando...</p>;
  }

  return (
    <div>
      <h3>Dados Buscados:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

A chave para entender o useEffect aqui é o segundo argumento: o array de dependência.

Adicione DataFetcher ao seu App.jsx para vê-lo buscar e exibir dados quando o componente carregar.

Conclusão e Próximos Passos

Você percorreu um longo caminho! Você aprendeu como:

Esta é uma conquista enorme, e você agora tem uma base sólida para construir. O mundo do React é vasto e emocionante. Aqui estão alguns tópicos que você pode querer explorar em seguida:

A coisa mais importante que você pode fazer agora é continuar construindo. A prática é fundamental. Tente recriar um site ou aplicação simples que você usa diariamente. Desafie-se com novos recursos. Quanto mais você codificar, mais confiante e habilidoso(a) você se tornará.

Bem-vindo(a) à comunidade React. Boa codificação!

💡
Quer uma ótima ferramenta de Teste de API que gera Documentação de API linda?

Quer uma plataforma integrada e completa para sua Equipe de Desenvolvedores trabalhar em conjunto com máxima produtividade?

Apidog atende a todas as suas demandas e substitui o Postman por um preço muito mais acessível!
botão

Pratique o design de API no Apidog

Descubra uma forma mais fácil de construir e usar APIs

Cadastre-se gratuitamenteBaixar