Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN
Neste vídeo, exploramos a estrutura gerada pelo Create React App, entendendo como os arquivos estão organizados e como funcionam os principais conceitos por trás de um projeto React.
Pasta Public
Contém arquivos estáticos essenciais para a aplicação:
- index.html: Arquivo HTML principal que serve como container para a aplicação React
- favicon.ico: Ícone exibido na aba do navegador
- manifest.json: Configurações para Progressive Web Apps (PWA)
- robots.txt: Instruções para robôs de busca
A div com id="root" no index.html é onde toda a aplicação React será renderizada.
Pasta src - O Coração da Aplicação
Contém os arquivos fonte principais:
- index.tsx: Ponto de entrada da aplicação
- App.tsx: Componente raiz da aplicação
- Arquivos .css: Estilos para os componentes
Como o React Funciona
Principais conceitos abordados:
- Virtual DOM: Representação em memória do DOM real que permite atualizações eficientes
- ReactDOM: Biblioteca que conecta o React ao navegador
- JSX/TSX: Sintaxe que permite escrever HTML no JavaScript
- StrictMode: Ferramenta de desenvolvimento que ajuda a identificar problemas
Componentes e JSX
Características importantes:
- Componentes são funções que retornam elementos visuais (JSX)
- JSX é uma extensão de sintaxe que combina JavaScript com HTML
- Diferenças de sintaxe em relação ao HTML puro (ex: className ao invés de class)
- O código JSX é compilado para chamadas de React.createElement()
Estilização com CSS
No projeto React:
- Arquivos CSS podem ser importados diretamente nos componentes
- Classes são definidas no CSS e referenciadas via className no JSX
- Existem várias abordagens alternativas (CSS Modules, Styled Components, etc.)
Próximos Passos
Nas próximas aulas vamos:
- Modificar a estrutura atual do projeto
- Criar nossos próprios componentes
- Implementar funcionalidades específicas
- Aprofundar nos conceitos de props e state
Considerações Finais
Esta base estrutural é fundamental para o desenvolvimento com React. Algumas observações importantes:
- A estrutura gerada pelo Create React App segue as melhores práticas
- Entender a separação entre public e src é crucial
- O Virtual DOM é um dos pilares do desempenho do React
- JSX/TSX pode parecer estranho no início, mas se torna natural com a prática
Compreender esta estrutura inicial nos prepara para as implementações mais complexas que virão nas próximas aulas.
