Recapitulação: Estado e Eventos
Parte da seção Fundamentos do Journey de React da Coddy. Lição 27 de 42.
Desafio
MédioRecapitulação do capítulo. Construa um painel de controle de um abajur: um contador e um alternador lado a lado em um único componente.
- Adicione dois estados independentes:
brightnesscomeçando em0eoncomeçando emfalse. - Mostre o brilho no span com
id="level". O botãoid="brighter"adiciona 1 a cada clique. - O botão
id="power"alternaon. Quando estiver ligado, mostre um<p>comid="status"e o textoLamp is on; caso contrário, renderizenull.
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 React2Expressões JSX
ChavesMatemática nas ChavesChaves em AtributosChamando Funções no JSXRecapitulação: Expressões JSX5Estado e Eventos
O Que É Estado?Contador de CliquesContar em EtapasAlternar com EstadoEstado IndependenteRecapitulação: Estado e Eventos