Workshops

React para iniciantes

Introdução

React: Criação de Interfaces UI

React vs. Frameworks: Diferenças Chave

Fundamentos

Adoção Incremental do React

DOM Virtual no React

Evolução do React

React na Evolução Web

Prós e Contras

Vantagens do React no Desenvolvimento

Desvantagens do React

Escolha de Frameworks Web

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

Exercício

Cores em JSX: Verde ou Vermelho?

Frutas e Seus Tamanhos

Manipulação de Arrays em React

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 de Props

Props e API no React

Passando Dados com Props no React

Props em Componentes React

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

Introdução

React: Criação de Interfaces UI

React vs. Frameworks: Diferenças Chave

Fundamentos

Adoção Incremental do React

DOM Virtual no React

Evolução do React

React na Evolução Web

Prós e Contras

Vantagens do React no Desenvolvimento

Desvantagens do React

Escolha de Frameworks Web

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

Exercício

Cores em JSX: Verde ou Vermelho?

Frutas e Seus Tamanhos

Manipulação de Arrays em React

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 de Props

Props e API no React

Passando Dados com Props no React

Props em Componentes React

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

Acesso exclusivo para membros PRO

Esse conteúdo é exclusivo para nossos assinantes.

Libere esse e muito mais conteúdo assinando o Codante PRO.

Planejando Componentes React

Discutimos como planejar componentes em um projeto de React, usando um design de site como exemplo. Destacamos a seção hero e componentes como navibar e card, além da organização em arquivos e diferenciação das tags em React. Planejamos a estrutura para começar a implementação no código.

Comentários

(0)