Todos

Mini Projetos

Resolução do Mini Projeto

Formulário de OTP com React

Login

Introdução e Setup

  • Introdução
  • Requisitos do Projeto
  • Instalando Vite , React e Tailwind
  • Construindo o HTML
  • Estilizando a Página
  • Extraindo o Formulário para um componente à parte
  • Lógica do Formulário

  • maxLength e required nos inputs
  • Salvando os dados do input no estado
  • Validação: dígitos numéricos
  • Foco no primeiro dígito ao carregar a página
  • Mudar o foco para o próximo input após digitar
  • Mudar o foco quando apagar um input
  • Colando um código no input
  • Navegando nos inputs com as setas do teclado
  • Propriedades inputMode e autoComplete
  • Finalização
  • Introdução e Setup

  • Introdução
  • Requisitos do Projeto
  • Instalando Vite , React e Tailwind
  • Construindo o HTML
  • Estilizando a Página
  • Extraindo o Formulário para um componente à parte
  • Lógica do Formulário

  • maxLength e required nos inputs
  • Salvando os dados do input no estado
  • Validação: dígitos numéricos
  • Foco no primeiro dígito ao carregar a página
  • Mudar o foco para o próximo input após digitar
  • Mudar o foco quando apagar um input
  • Colando um código no input
  • Navegando nos inputs com as setas do teclado
  • Propriedades inputMode e autoComplete
  • Finalização
  • Instalando Vite , React e Tailwind

    No vídeo, realizamos o fork do projeto no GitHub. Iniciamos o projeto usando VS Code e Vite, e limpamos o código inicial. Em seguida, instalamos e configuramos o Tailwind CSS, ajustamos arquivos irrelevantes e preparamos o ambiente de desenvolvimento. Finalmente, preparamos para a implementação dos requisitos do projeto.

    Comentários

    (0)