⚛️ Primeiros Passos com React: Conceitos, Componentes, Vite e Exports
Se você está aprendendo React ou quer reforçar os fundamentos da principal biblioteca do frontend moderno, este artigo é pra você! Bora entender como o React funciona, criar projetos do jeito certo e dominar conceitos como SPA, SSR, Bundlers e muito mais.
1. De onde veio o React?
O React nasceu dentro do Facebook em 2011 e foi lançado para o público em 2013.
O principal objetivo era simples: facilitar a criação de interfaces interativas, sem aquela bagunça de mexer diretamente no DOM (como era feito com jQuery, por exemplo).
A grande sacada? Criar componentes reutilizáveis e atualizar a tela de maneira eficiente usando o Virtual DOM.
🎯 Resumo rápido:
React é sobre dividir a interface em componentes independentes que se atualizam de forma rápida e organizada.
2. SPA, SSR, CSR e SSG: o que significam?
Quando falamos de renderização de páginas, temos algumas abordagens principais. Cada uma serve para diferentes tipos de projeto.
| Sigla | Significado | Quando Usar |
|---|---|---|
| SPA | Single Page Application | Aplicações ricas em interatividade |
| CSR | Client Side Rendering | Apps que priorizam velocidade após o primeiro carregamento |
| SSR | Server Side Rendering | Melhor para SEO e carregamento rápido inicial |
| SSG | Static Site Generation | Blogs, portfólios, sites que mudam pouco |
Um pouco mais de cada:
- SPA: A página não recarrega ao navegar. Tudo é carregado no início. Usado em redes sociais, dashboards, apps modernos.
- CSR: Parecido com SPA. O conteúdo é carregado e renderizado no navegador.
- SSR: O servidor gera o HTML pronto. Mais rápido no primeiro acesso. Ótimo para e-commerce e sites públicos.
- SSG: O HTML é gerado no momento do build. Ideal para sites que não mudam toda hora.
3. React na Web 2.0 e na Web 3.0
O React surgiu com a Web 2.0, época em que a internet ficou mais interativa (blogs, redes sociais, vídeos).
Hoje, ele também é muito usado na Web 3.0 (blockchain, criptomoedas, descentralização).
Por exemplo:
- Web 2.0: apps como Instagram, Facebook, Twitter usam React.
-
Web 3.0: apps como marketplaces de NFTs, carteiras digitais, Dapps usam React integrados a bibliotecas como
ethers.jsewagmi.
🧠 React é flexível para evoluir junto com a internet.
4. Como o React funciona?
O React gira em torno de três grandes conceitos:
- Componentes: São funções que retornam JSX, ou seja, HTML misturado com JavaScript.
- Estado (state): Armazena valores que mudam ao longo do tempo dentro dos componentes.
- Props: Informações enviadas de um componente pai para um filho.
Virtual DOM
O React cria uma "cópia leve" da estrutura da página chamada Virtual DOM.
Quando algo muda, ele compara o novo Virtual DOM com o antigo (processo de "diff") e atualiza só o que mudou no navegador, tornando tudo muito mais rápido.
5. Bundlers e Compilers: quem são esses caras?
Para rodar React no navegador, precisamos transformar o nosso código moderno em algo que o navegador entenda.
Compilers
Compiler = tradutor de código moderno para código velho
Exemplos:
- Babel: transforma JSX e ES6+ para JavaScript puro.
- SWC: nova geração, ultra rápido.
-
TypeScript: compila
.tspara.js.
Bundlers
Bundler = empacotador de arquivos para o navegador
Exemplos:
- Webpack: super customizável, usado há anos.
- Vite: moderno, rápido, fácil de configurar.
- Parcel: zero configuração inicial.
Fluxo resumido:
JSX/ES6+ → Compiler (Babel) → Bundler (Vite) → Navegador
6. Criando um projeto React moderno com Vite
Quer começar seu projeto React do jeito certo? Use o Vite:
npm create vite@latest meu-projeto-react
cd meu-projeto-react
npm install
npm run dev
- Selecione o template React.
- O projeto já vem pronto para rodar e otimizado.
Você acessa o projeto no navegador geralmente em http://localhost:5173.
7. Componentes React: a base de tudo
Exemplo de componente simples:
function Header() {
return <h1>Bem-vindo!</h1>
}
Exemplo de componente com props:
function Saudacao({ nome }) {
return <p>Olá, {nome}!</p>
}
-
nomeé uma prop passada para o componente.
8. Default Export vs Named Export
Exportação padrão (default export)
export default Header;
Importação:
import Header from './Header';
Exportação nomeada (named export)
export const Footer = () => <footer>Rodapé</footer>;
Importação:
import { Footer } from './Footer';
Quando usar cada um?
| Default Export | Named Export |
|---|---|
| Um único componente por arquivo | Vários componentes ou funções por arquivo |
| Importação mais livre no nome | Precisa usar o nome exato da exportação |
Dica prática:
Use export default para componentes principais.
Use named exports para utilitários, hooks ou vários componentes juntos.
9. Libs úteis para React
Se quiser turbinar seu projeto React, aqui estão algumas libs fundamentais:
- React Router → Rotas dinâmicas
- Zustand → Gerenciamento de estado simples
- React Hook Form → Formulários com validação
- TailwindCSS → Estilo rápido e moderno
- TanStack Query → Gerenciar dados assíncronos (como requisições)
Conclusão
React é uma biblioteca poderosa e muito flexível.
Entender os fundamentos — componentes, props, estado, bundlers, compilers e exports — é o que separa um iniciante de um dev pleno preparado para enfrentar projetos reais.
🚀 Se curtiu o conteúdo, compartilha com a galera e me segue pra mais dicas práticas de desenvolvimento!
📌 Sugestões de próximos passos:
- Criar seu primeiro projeto pessoal com React + Vite
- Aprender a usar o React Router
- Montar um CRUD simples (Create, Read, Update, Delete)
- Estilizar seu app com Tailwind ou Material UI
Referências
https://medium.com/@ppternunes/a-hist%C3%B3ria-do-react-ba346c416fe1
https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web
https://www.youtube.com/watch?v=ttfRRdONvxM
Top comments (0)