Menu

Tech

COMEÇAR A APRENDER

Português

Recapitulação: Estado e Eventos

Parte da seção Fundamentos do Journey de React da Coddy — lição 27 de 42.

Desafio

Médio

Recapitulação do capítulo. Crie um painel de controle para uma luminária de mesa: um contador e um alternador (toggle) lado a lado em um único componente.

Adicione dois estados independentes: brightness iniciando em 0 e on iniciando em false.
Exiba o brilho no span com id="level". O botão com id="brighter" adiciona 1 a cada clique.
O botão com id="power" alterna on. Quando ligado, exiba um <p> com id="status" e o texto Lamp is on; caso contrário, faça o render de null.

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 componente Regra do elemento pai único JSX não é HTML Recapitulação: Conheça o React

4Props

O Que São Props?Passando Props Duas Props Mesmo Componente, Novos Dados A Prop Children Recapitulando: Props

7Condições e Listas

Renderização Ternária Exibir com &&Renderizar uma Lista A Importância das Keys Filtrar e Mapear Recapitulando: Condições e Listas

2Expressões JSX

Chaves Matemática nas Chaves Chaves em Atributos Chamando Funções no JSX Recapitulação: Expressões JSX

5Estado e Eventos

O Que É Estado?Contador de Cliques Contar em Etapas Alternar com Estado Estado IndependenteRecapitulação: Estado e Eventos

8Projeto: Cartão de Perfil

Passo 1: Estrutura do Cartão Passo 2: Cartão com Props Passo 3: Botão de Curtir Passo 4: Alternador de Seguir

3Componentes

Blocos de Construção Seu Segundo Componente Reutilize Componentes Componha uma Página Recapitulação: Componentes

6Formulários e Entradas

Inputs Controlados Ecoar a Entrada Contador de Caracteres Botão Limpar Recapitulando: Formulários e Entradas