Modulo 04 4.2 Componentes Básicos

174 aulas

4.2 — Componentes Básicos

Em breve.

Curso Svelte

Blog

Modulo 01 Primeiros Passos

1.1 O que é o Svelte

1.2 Criando um Projeto com sv create

1.3 Estrutura de Arquivos

1.4 Por que usamos pnpm

1.5 TypeScript ou JavaScript

Modulo 02 Configurações e Vite

2.1 O que é o Vite e por que ele existe

2.2 Arquitetura do Vite

2.3 Criando e Explorando um Projeto Vite

2.4 Configuração do vite.config.js

2.5 Plugins do Vite

2.6 Variáveis de Ambiente e Modos

2.7 Build de Produção e Otimização

2.8 Vite para Diferentes Frameworks

Modulo 03 Frontend: Tailwind e Plugins

3.1 Instalando Tailwind CSS

3.2 Configurando DaisyUI

3.3 Utilitários Essenciais do Tailwind

3.4 Responsividade com Tailwind

3.5 Temas e Dark Mode

3.6 Plugins Úteis

Modulo 04 Svelte apenas no Frontend

4.1 Svelte sem SvelteKit

4.2 Componentes Básicos

4.3 Reatividade Simples

4.4 Eventos e Bindings

4.5 Projeto Frontend Puro

Modulo 05 Svelte vs React

5.1 Filosofia: Compilador vs Runtime

5.2 Reatividade: Atribuição vs Hooks

5.3 Sintaxe de Templates vs JSX

5.4 Estado: Stores vs Context/Redux

5.5 Estilização: CSS com Escopo vs CSS-in-JS

5.6 Performance e Tamanho do Bundle

5.7 Ecossistema e Mercado de Trabalho

5.8 SvelteKit vs Next.js

Modulo 06 Testes Estáticos

6.1 O que são Testes Estáticos

6.2 ESLint: Configuração para Svelte

6.3 Prettier: Formatação Automática

6.4 svelte-check: Checagem de Tipos

6.5 TypeScript Strict Mode

6.6 Pre-commit Hooks (Husky + lint-staged)

Modulo 07 Aula Prática: Primeiro Projeto

7.1 Visão Geral do Projeto

7.2 Setup do Projeto do Zero

7.3 Criando Componentes e Páginas

7.4 Estilização com Tailwind/DaisyUI

7.5 Navegação e Rotas

7.6 Revisão e Próximos Passos

Modulo 08 Svelte 5: Runes

8.1 Introdução ao Svelte 5 e Runes

8.2 $state — Estado Reativo

8.3 $derived — Valores Derivados

8.4 $effect — Efeitos Colaterais

8.5 $props — Props com Runes

8.6 $bindable — Props Bindable

8.7 $inspect — Debug Reativo

8.8 Snippets — Nova Composição

8.9 Event Handlers no Svelte 5

8.10 Migração: Svelte 4 para 5

Modulo 09 Templates e Renderização

9.1 Lógica no Template

9.6 Renderização Condicional Avançada

Modulo 10 Componentes

10.1 Anatomia de um Componente

10.2 Props e Comunicação

10.3 Slots e Children

10.4 Ciclo de Vida

10.5 Composição de Componentes

10.6 Componentes Recursivos

Modulo 11 Estilização CSS

11.1 CSS com Escopo

11.2 Estilos Globais

11.3 Variáveis CSS

11.4 Classes Dinâmicas

11.5 CSS com Tailwind no Svelte

Modulo 12 Diretivas e Ações

12.1 Use Directive

12.2 Ações Customizadas

12.3 Bind Avançado

12.4 Class e Style Directives

12.5 Transition Directive

Modulo 13 Transições e Animações

13.1 Transições Básicas

13.2 Transições Customizadas

13.3 Animate Directive

13.4 Motion e Spring

13.5 Animações de Lista

Modulo 14 Elementos Especiais

14.5 svelte:component

14.6 svelte:boundary

Modulo 15 SvelteKit Fundamentos

15.1 O que é SvelteKit

15.2 Criando um Projeto SvelteKit

15.3 Páginas e Componentes

15.4 Servidor e Cliente

15.5 Adapters

Modulo 16 Roteamento

16.1 Rotas Baseadas em Arquivos

16.2 Parâmetros Dinâmicos

16.3 Rotas Aninhadas

16.4 Grupos de Rotas

16.5 Redirecionamentos

16.6 Páginas de Erro

Modulo 17 Carregamento de Dados

17.1 Função Load

17.2 Page Server Load

17.3 Layout Load

17.4 Invalidação de Dados

17.5 Streaming

Modulo 18 Layouts e Erros

18.1 Layouts Aninhados

18.2 Layout Groups

18.3 Páginas de Erro

18.4 Error Boundaries

18.5 Layout Reset

Modulo 19 API Routes e Form Actions

19.1 Server Routes

19.2 GET, POST, PUT, DELETE

19.3 Form Actions Básico

19.4 Progressive Enhancement

19.5 Validação Server-Side

Modulo 20 Formulários Avançados

20.1 Superforms

20.2 Validação com Zod

20.3 Upload de Arquivos

20.4 Formulários Multi-Step

20.5 UX de Formulários

Modulo 21 ORMs e Banco de Dados

21.1 Prisma Setup

21.2 Drizzle Setup

21.3 Migrations

21.4 Queries e Mutations

21.5 Relações e Joins

Modulo 22 Autenticação

22.1 Conceitos de Autenticação

22.2 Lucia Auth

22.3 OAuth Providers

22.4 Sessões e Cookies

22.5 Protegendo Rotas

Modulo 23 SSR, CSR e SSG

23.1 Server-Side Rendering

23.2 Client-Side Rendering

23.3 Static Site Generation

23.4 Prerendering

23.5 Quando Usar Cada Um

Modulo 24 Deploy

24.1 Deploy na Vercel

24.2 Deploy na Netlify

24.3 Node Adapter

24.4 Static Adapter

24.5 Deploy com Docker

Modulo 25 Integradores

25.1 Stripe: Pagamentos

25.2 Resend: Emails

25.3 UploadThing

25.4 Sentry: Monitoramento

25.5 Analytics

Modulo 26 Estado Avançado

26.1 Stores Globais

26.2 Context API

26.3 State Machines

26.4 Optimistic Updates

26.5 Cache Strategies

Modulo 27 SvelteKit Avançado

Modulo 28 TypeScript Avançado

28.1 Tipos Genéricos

28.2 Inferência no SvelteKit

28.3 app.d.ts

28.4 Type-Safe Forms

28.5 Utilitários de Tipo

Modulo 29 Testes Automatizados

29.1 Teste de Code Blocks e Syntax Highlighting

Modulo 30 Performance e SEO

30.1 Core Web Vitals

30.2 Lazy Loading

30.3 Image Optimization

30.4 SEO e Meta Tags

30.5 Sitemap e Robots

Modulo 31 Ecossistema e Integrações

31.1 Bibliotecas Svelte

31.2 Headless UI

31.3 CMS e Integrações

31.4 Monorepos

31.5 Contribuindo Open Source

Modulo 32 Projeto Final

32.1 Planejamento do Projeto

32.2 Setup e Arquitetura

32.3 Implementação Core

32.4 Estilização e UX

32.5 Deploy e Conclusão