Manual de React js e Arquitetura de Componentes

Prévia do material em texto

VOLUME 03 • FRAMEWORKS & BIBLIOTECAS
React.js: Arquitetura de Componentes e Hooks
Criação de interfaces reativas, gerenciamento de estado e fluxo de dados unidirecional.
1. Ciclo de Vida e React Hooks Fundamentais
useState: Gerencia o estado local de um
componente. Atualizações disparam a re-
renderização do elemento na DOM Virtual.
useEffect: Controla efeitos colaterais (busca de
dados, inscrições em eventos, alteração manual
do DOM).
2. Exemplo Integrado: Componente Funcional React
import React, { useState, useEffect } from 'react'; export function UserList() { const 
[users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() 
=> { fetch('https://api.exemplo.com/users') .then(res => res.json()) .then(data => { 
setUsers(data); setLoading(false); }); }, []); // Array de dependências vazio = executa no 
mount if (loading) return Carregando dados...; return ( 
{users.map(user => ( {user.name} ))} ); }
3. Boas Práticas de Arquitetura
Divisão de Responsabilidades: Separe componentes de apresentação (UI) dos componentes
contêineres (Lógica).
Imutabilidade do Estado: Nunca altere o estado diretamente. Sempre utilize a função atualizadora (ex:
setUsers([...users, newUser])).
Elevação de Estado (Lifting State Up): Compartilhe dados entre componentes irmãos movendo o estado
para o pai comum mais próximo.
Desenvolvimento Front-End • Módulo 3 Página 1 de 1