Visão Geral

Este curso ensina como aplicar Clean Code e Clean Architecture no desenvolvimento front-end com React, criando aplicações mais organizadas, escaláveis, fáceis de manter e profissionais. Você aprenderá padrões de escrita, princípios de arquitetura limpa, separação de responsabilidades, modularização e organização avançada de projetos.

Objetivo

Após realizar este curso, você será capaz de:

• Aplicar princípios de Clean Code em componentes, hooks e serviços.
• Criar uma arquitetura limpa adaptada para o front-end com React.
• Organizar camadas de UI, domínio e dados com clareza.
• Evitar code smells, duplicações e componentes confusos.
• Escrever código mais legível, testável e sustentável.
• Estruturar projetos de forma modular e fácil de escalar.
• Construir aplicações mais profissionais e de longa vida útil.

Publico Alvo

• Desenvolvedores front-end de nível intermediário e avançado.
• Profissionais que querem elevar a qualidade do código em React.
• Pessoas que atuam em times grandes e necessitam padronização.
• Devs que desejam aplicar boas práticas e arquitetura limpa no front.

Pre-Requisitos

• React intermediário.
• JavaScript moderno.
• Conhecimentos básicos sobre testes e APIs.
• Noções gerais de organização de código.

Conteúdo Programatico

Module 1 – Clean Code Foundations

1. What Clean Code means in front-end
2. Principles: readability, simplicity, consistency
3. Naming conventions for React projects
4. Avoiding code smells in components and hooks

Module 2 – Clean Architecture Principles

1. What Clean Architecture looks like in React
2. The four main layers adapted to front-end
3. Dependency rule and separation of concerns
4. Domain-driven thinking applied to UI

Module 3 – Project Structure & Organization

1. Folder-by-feature vs folder-by-layer
2. UI, domain and data boundaries
3. Creating a scalable and predictable file system
4. Strict imports and directional architecture

Module 4 – Clean Components

1. Component responsibilities
2. Splitting large components
3. Avoiding unnecessary complexity
4. Rendering logic vs business logic separation
5. Guidelines for reusable and pure components

Module 5 – Clean Hooks & Reusable Logic

1. Custom hooks architecture
2. Naming and boundary rules
3. Isolating side effects
4. Replacing imperative code with declarative patterns

Module 6 – Data Layer & API Abstraction

1. Service layer principles
2. API adapters and data mapping
3. Handling loading, error and empty states cleanly
4. Centralizing external dependencies

Module 7 – State Architecture & Ownership

1. Clean state management strategies
2. Local vs global vs server state
3. Avoiding overuse of context
4. Reducing shared mutable state

Module 8 – UI Layer Patterns

1. UI primitives and composition
2. Styling strategies: CSS-in-JS, utility-first, component libraries
3. Design tokens and consistency
4. Accessibility as a quality rule

Module 9 – Testing for Clean Architecture

1. Testing components vs domain logic
2. How architecture impacts testability
3. Unit tests for services, hooks and utilities
4. Integration tests for UI flows

Module 10 – Refactoring Techniques

1. Step-by-step refactor patterns
2. Eliminating duplication
3. Extracting functions, hooks and components
4. Introducing new architecture without breaking everything

Module 11 – Final Project

• Refactoring a messy React application applying:

1. Clean Code
2. Clean Architecture layers
3. Domain-centric logic
4. API abstraction
5. Organized components and hooks

• Documenting decisions and improvements