Back to blog
ArticlePortuguese

Introdução ao React: Componentes, Navegação e Backend com Next.js

May 30, 2025
16 min read
#React#desenvolvimento web#framework#Next.js

Já tentou montar uma interface interativa usando apenas HTML e JavaScript puro? A experiência pode rapidamente se tornar confusa. Foi para resolver esse problema que nasceu o React, uma biblioteca criada pelo Facebook que revolucionou a forma de construir aplicações web. Neste artigo, você vai aprender de forma prática como o React funciona, como criar componentes reutilizáveis, navegar entre páginas com o React Router e até integrar seu front-end com backend via Next.js.

🧠 O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto do Documento). É uma representação em árvore dos elementos da página. Com JavaScript, podemos acessar, modificar e interagir com qualquer parte da página por meio do DOM.

Por exemplo:

document.getElementById('paragrafo').textContent = 'Texto atualizado!';

React usa o Virtual DOM, uma cópia leve do DOM real. Quando algo muda, ele calcula a diferença e aplica apenas o necessário — muito mais rápido e eficiente.

🚀 Por Que Usar o React?

  • Componentização: Divida a interface em partes reutilizáveis e organizadas.
  • Virtual DOM: Atualizações mais rápidas e eficientes.
  • Reatividade: Mudanças de dados refletem automaticamente na interface.
  • Ecossistema robusto: React Router, Redux, Next.js e muito mais.
  • React Native: Use os mesmos conceitos para criar apps móveis.

⚙️ Como o React Funciona?

React funciona com componentes, que são funções (ou classes) que retornam JSX — uma sintaxe parecida com HTML. Esses componentes têm estado (state) e propriedades (props).

JSX (JavaScript XML)

const element = <h1>Hello, world!</h1>;

JSX é uma sintaxe parecida com HTML, mas que permite incluir lógica JavaScript diretamente. Ela é convertida em código JavaScript padrão usando React.createElement().

🧩 Estado e Props

  • State: Armazena dados internos do componente, com o hook useState.
  • Props: Valores passados de um componente pai para o filho.
function Saudacao(props) { return <h1>Olá, {props.nome}!</h1>; } <Saudacao nome="Gilberto" />
function Contador() { const [contagem, setContagem] = useState(0); return ( <button onClick={() => setContagem(contagem + 1)}> {contagem} cliques </button> ); }

📁 Organização de Componentes

É comum criar componentes em arquivos separados, especialmente quando eles são reutilizados. Isso torna o código mais limpo, organizado e fácil de manter.

// components/Saudacao.jsx function Saudacao({ nome }) { return <h1>Olá, {nome}!</h1>; } export default Saudacao;
// pages/Home.jsx import Saudacao from '../components/Saudacao'; function Home() { return ( <div> <Saudacao nome="Gilberto" /> <Saudacao nome="Maria" /> </div> ); } export default Home;

🧠 React vs HTML + JS

Vamos comparar como a mesma funcionalidade — atualizar o texto de um parágrafo ao clicar em um botão — é implementada com JavaScript tradicional e com React.

React

import { useState } from 'react'; function App() { const [mensagem, setMensagem] = useState('Texto inicial'); return ( <div> <p>{mensagem}</p> <button onClick={() => setMensagem('Texto atualizado!')}> Clique aqui </button> </div> ); }

HTML + JavaScript

<p id="mensagem">Texto inicial</p> <button onclick="atualizarTexto()">Clique aqui</button> <script> function atualizarTexto() { document.getElementById("mensagem").textContent = "Texto atualizado!"; } </script>

Note que, com React, você não precisa acessar diretamente o DOM. Basta atualizar o estado e a interface será renderizada automaticamente — essa é a essência da reatividade.

🔀 React Router

React Router é uma biblioteca que permite criar navegação entre diferentes "páginas" sem recarregar o site. É essencial para SPAs (Single Page Applications).

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import Sobre from './pages/Sobre'; function App() { return ( <BrowserRouter> <nav> <Link to="/">Início</Link> <Link to="/sobre">Sobre</Link> </nav> <Routes> <Route path="/" element=<Home /> /> <Route path="/sobre" element=<Sobre /> /> </Routes> </BrowserRouter> ); }

🧭 Benefícios do React Router

  • SPA com navegação fluida
  • Rotas dinâmicas: como /produto/:id
  • Rotas protegidas: baseadas em autenticação
  • Histórico de navegação: via useNavigate()

📄 Rota com parâmetro

<Route path="/usuario/:id" element=<PerfilUsuario /> />
import { useParams } from 'react-router-dom'; function PerfilUsuario() { const { id } = useParams(); return <p>Perfil do usuário de ID: {id}</p>; }

🌐 O que é Next.js?

Next.js é um framework baseado em React com foco em performance, SEO e produtividade. Ele oferece:

  • SSR: Server-Side Rendering (renderização no servidor)
  • SSG: Static Site Generation (geração estática no build)
  • API Routes: backend embutido
  • SEO otimizado: melhor ranqueamento em buscadores

Exemplo de API Route

// pages/api/ola.js export default function handler(req, res) { res.status(200).json({ mensagem: "Olá!" }); }

🪝 Principais Hooks do React

  • useState: controle de estado
  • useEffect: efeitos colaterais (como requisições)
  • useContext: estado global compartilhado

📌 Conclusão

React é uma ferramenta poderosa para criar interfaces modernas, reativas e escaláveis. Com o Next.js, você ainda adiciona SEO, backend, rotas automáticas e performance.

Se você está começando no desenvolvimento web, aprender React (e depois Next.js) é um dos melhores caminhos em 2025.

📚 Fontes