Menu
Coddy logo textTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon

Recapitulando: Formulários e Entradas

Parte da seção Fundamentos do Journey de React da Coddy. Lição 32 de 42.

challenge icon

Desafio

Médio

Recapitulação do capítulo. Crie um seletor de apelidos com o ciclo completo de entrada controlada: digitar, acompanhar o feedback em tempo real, limpar.

  1. Torne a entrada (id="nick") controlada com o estado nick, começando vazio.
  2. O parágrafo (id="meter") mostra N of 12, em que N é o comprimento atual do apelido (por exemplo, ao digitar Coddy → 5 of 12), derivado, não armazenado.
  3. O botão id="clear" esvazia o apelido e a caixa com ele.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Todas as lições de Fundamentos

1Conheça o React

O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React

4Props

O Que São Props?Passando PropsDuas PropsMesmo Componente, Novos DadosA Prop ChildrenRecapitulando: Props

7Condições e Listas

Renderização TernáriaExibir com &&Renderizar uma ListaA Importância das KeysFiltrar e MapearRecapitulando: Condições e Listas

2Expressões JSX

ChavesMatemática nas ChavesChaves em AtributosChamando Funções no JSXRecapitulação: Expressões JSX

5Estado e Eventos

O Que É Estado?Contador de CliquesContar em EtapasAlternar com EstadoEstado IndependenteRecapitulação: Estado e Eventos

8Projeto: Cartão de Perfil

Passo 1: Estrutura do CartãoPasso 2: Cartão com PropsPasso 3: Botão de CurtirPasso 4: Alternador de Seguir

3Componentes

Blocos de ConstruçãoSeu Segundo ComponenteReutilize ComponentesComponha uma PáginaRecapitulação: Componentes

6Formulários e Entradas

Inputs ControladosEcoar a EntradaContador de CaracteresBotão LimparRecapitulando: Formulários e Entradas