React

Técnicas Avançadas de Programação Web e Mobile

Introdução ao React

React é uma biblioteca JavaScript criada pelo Facebook para construir interfaces de usuário (UI) dinâmicas e componentizadas. Seu principal diferencial é o uso do Virtual DOM, que optimiza a renderização, atualizando apenas as partes necessárias da tela. Isso resulta em aplicações mais rápidas e escaláveis.

• Componentização: A UI é dividida em componentes reutilizáveis (como botões, formulários, cabeçalhos).
• JSX: Sintaxe que mistura HTML com JavaScript, facilitando a criação de templates dinâmicos.
• Estado (State): Permite que componentes armazenem e gerenciem dados que podem mudar ao longo do tempo (ex: formulários).
• Hooks: Funções como useState e useEffect que permitem gerenciar estado e side effects em componentes funcionais.

Firebase: Back-end como Serviço (BaaS)

Firebase é uma plataforma da Google que oferece serviços prontos para back-end, eliminando a necessidade de criar servidores do zero. Principais recursos utilizados:

• Firebase Auth: Autenticação de usuários com e-mail/senha, Google, Facebook, etc.
• Firestore: Banco de dados NoSQL em tempo real, ideal para aplicações que exigem sincronização instantânea (ex: chats).
• Armazenamento (Storage): Upload e gerenciamento de arquivos (imagens, vídeos).
• Hosting: Deploy automático da aplicação com SSL gratuito.

"Firebase é ideal para projetos que precisam de escalabilidade sem complexidade de infraestrutura."

Autenticação de Usuários

Implementamos um fluxo completo de autenticação, incluindo:

• Cadastro: Validação de e-mail/senha, criação de contas no Firebase Auth e tratamento de erros (ex: e-mail já cadastrado).
• Login: Verificação de credenciais, redirecionamento pós-autenticação e persistência de sessão.
• Recuperação de senha: Envio de e-mails de redefinição via Firebase.
• Proteção de rotas: Bloqueio de páginas restritas para usuários não autenticados.

Gestão de Dados com Firestore

O Firestore armazena dados em coleções (similares a tabelas) e documentos (registros). Aprendemos:

• CRUD: Operações básicas (Create, Read, Update, Delete) com JavaScript.
• Consultas: Filtros por campos, ordenação e paginação.
• Listeners em tempo real: Atualização automática da UI quando dados mudam no servidor.
• Segurança: Regras de acesso para proteger dados sensíveis.

React Router: Navegação entre Páginas

Em aplicações Single-Page (SPA), o React Router gerencia a navegação sem recarregar a página toda. Trabalhamos com:

• Rotas dinâmicas: URLs parametrizadas (ex: /lojas/:id).
• Navegação programática: Redirecionamento via código (ex: após o login).
• Rotas aninhadas: Layouts hierárquicos (ex: painel administrativo).

Conclusão

A combinação React + Firebase permite desenvolver aplicações completas com front-end moderno e back-end escalável, reduzindo tempo e complexidade. Essas tecnologias são amplamente adotadas no mercado, preparando-nos para desafios reais em desenvolvimento web e mobile.