Configuração e Ambiente
Iniciando Aplicativo com JavaScript
Configurando Ambiente Node & React
Gerenciando Node.js com NVM
Servidor Node.js Local Setup
Primeiros Passos com React
Elementos Dinâmicos com JavaScript
Facilitando o JavaScript com React
Criando Elementos HTML com React
React: Do Imperativo ao Declarativo
JSX e Compilação
Entendendo JSX no React
Babel e a Transformação JSX
Configurando React com Vite
Servidor Local com Vite
Tour pelo Projeto Vite
Ajustando alguns detalhes
Limpando Arquivos no Vite
Configuração do S-Link e Exportações
Automatizando Código com Prettier
Estilização React com Vite
Estilização com Tailwind CSS
Tailwind Configuração Rápida
Tailwind: Produtividade vs. HTML Sujo
Tailwind CSS IntelliSense no VS Code
Customização Tailwind e React
Conceitos Fundamentais
Anatomia dos Componentes React
Dividindo Componentes no React
Dividindo Componentes no Figma
Estrutura de Componentes React
Planejando Componentes React
Construindo Aplicação React
Exportação e JSX no React
Exportando Componentes no React
Entendendo o JSX
React: Variáveis e Componentes JSX
Eventos JSX Simplificados
Manipulação de Listas
Renderização Condicional no React
Transformando Listas com `map`
JSX: className no React
Renderização Condicional em JSX
React na prática!
Introdução ao React Prático
Iniciando com React: Guia Básico
Organização de Pastas de Projeto
Barra de Navegação React
Ícones: Lucide vs React
Navbar com Tailwind e React
Design da aplicação
Design e Desenvolvimento Conectados
Componente Hero: Design e Implementação
Hero Responsivo com Tailwind
Design Harmonioso com Tailwind
Otimização e Performance
Tags Alt e Performance WebP
Otimização de Imagens Online
Carregamento Inteligente de Imagens
Estruturando Imóveis com CSS Grid
Fundamentos da Componentização
Exibindo Imóveis com CSS Grid
Componentização com Property Card
Componentes React com Tailwind CSS
Fundamentos de Props e Componentização
Corrigindo Imagens Ausentes
Estilização e Layout
Integração de Props e Dicas VS Code
Atualização no Property Card
Badge Destacado em Imóveis
Passando Props no React
Spread Operator em JavaScript
Formulário de Contato React
JSX e Atributos HTML
Estado e Gerenciamento
Footer Semântico e Dicas VS Code
React: Props e Estado Explorados
Estado vs Props no React
Gerenciamento de Estado com useState
Formulários React: Controlados vs. Não Controlados
React DevTools no Chrome
Conceito sobre useEffect
Formulário Controlado React: Dicas Essenciais
Efeitos no React com useEffect
Chamadas de API com useEffect
API Simulada com React
Context API e Gerenciamento Global
Context API no React
Context API para Propriedades Destacadas
Otimização com Context API
Separação da Lógica com Provider
Hooks Customizados
Hooks Customizados e Importações React
Criando hook customizado
Filtro de Imóveis no Site
Input de Pesquisa Dinâmico
Filtragem de Imóveis com Context API
Busca Avançada de Imóveis
Encerramento
Encerramento do Workshop React
Configuração e Ambiente
Iniciando Aplicativo com JavaScript
Configurando Ambiente Node & React
Gerenciando Node.js com NVM
Servidor Node.js Local Setup
Primeiros Passos com React
Elementos Dinâmicos com JavaScript
Facilitando o JavaScript com React
Criando Elementos HTML com React
React: Do Imperativo ao Declarativo
JSX e Compilação
Entendendo JSX no React
Babel e a Transformação JSX
Configurando React com Vite
Servidor Local com Vite
Tour pelo Projeto Vite
Ajustando alguns detalhes
Limpando Arquivos no Vite
Configuração do S-Link e Exportações
Automatizando Código com Prettier
Estilização React com Vite
Estilização com Tailwind CSS
Tailwind Configuração Rápida
Tailwind: Produtividade vs. HTML Sujo
Tailwind CSS IntelliSense no VS Code
Customização Tailwind e React
Conceitos Fundamentais
Anatomia dos Componentes React
Dividindo Componentes no React
Dividindo Componentes no Figma
Estrutura de Componentes React
Planejando Componentes React
Construindo Aplicação React
Exportação e JSX no React
Exportando Componentes no React
Entendendo o JSX
React: Variáveis e Componentes JSX
Eventos JSX Simplificados
Manipulação de Listas
Renderização Condicional no React
Transformando Listas com `map`
JSX: className no React
Renderização Condicional em JSX
React na prática!
Introdução ao React Prático
Iniciando com React: Guia Básico
Organização de Pastas de Projeto
Barra de Navegação React
Ícones: Lucide vs React
Navbar com Tailwind e React
Design da aplicação
Design e Desenvolvimento Conectados
Componente Hero: Design e Implementação
Hero Responsivo com Tailwind
Design Harmonioso com Tailwind
Otimização e Performance
Tags Alt e Performance WebP
Otimização de Imagens Online
Carregamento Inteligente de Imagens
Estruturando Imóveis com CSS Grid
Fundamentos da Componentização
Exibindo Imóveis com CSS Grid
Componentização com Property Card
Componentes React com Tailwind CSS
Fundamentos de Props e Componentização
Corrigindo Imagens Ausentes
Estilização e Layout
Integração de Props e Dicas VS Code
Atualização no Property Card
Badge Destacado em Imóveis
Passando Props no React
Spread Operator em JavaScript
Formulário de Contato React
JSX e Atributos HTML
Estado e Gerenciamento
Footer Semântico e Dicas VS Code
React: Props e Estado Explorados
Estado vs Props no React
Gerenciamento de Estado com useState
Formulários React: Controlados vs. Não Controlados
React DevTools no Chrome
Conceito sobre useEffect
Formulário Controlado React: Dicas Essenciais
Efeitos no React com useEffect
Chamadas de API com useEffect
API Simulada com React
Context API e Gerenciamento Global
Context API no React
Context API para Propriedades Destacadas
Otimização com Context API
Separação da Lógica com Provider
Hooks Customizados
Hooks Customizados e Importações React
Criando hook customizado
Filtro de Imóveis no Site
Input de Pesquisa Dinâmico
Filtragem de Imóveis com Context API
Busca Avançada de Imóveis
Encerramento
Encerramento do Workshop React
Facilitando o JavaScript com React
Estamos revisitando como o React pode simplificar certas operações que, em JavaScript puro, exigem mais etapas. Criamos uma pasta com arquivos index.html e script.js, demonstrando o uso do React e React DOM através de importações de módulos. Exploramos uma técnica moderna para importar bibliotecas sem NPM, utilizando um site que fornece esses pacotes como módulos, mas explicamos que essa abordagem deve ser evitada em produção. A seguir, utilizamos a função createElement do React.