:react-js:Conteúdo produzido por Profº Vinicius Martins

<aside> <img src="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" alt="notion://custom_emoji/eec5802d-aa68-469e-bd8d-a6acbfcb3167/219b1288-c377-8040-879a-007afa980f7c" width="40px" />

O React é uma biblioteca para interfaces de usuário nativas e da web. O React permite que você crie interfaces de usuário a partir de partes individuais chamadas componentes

</aside>

class09.pdf

Laboratórios para prática de useState()

1️⃣ LAB 1 - ALTERNAR A VISIBILIDADE

• Objetivo: Usar state para exibir ou esconder um texto condicionalmente;

function MostrarTexto() {
  // Crie um estado booleano "visivel", começando em true

  return (
    <div>
      <button onClick={/* troque true/false */}>
        Mostrar/Ocultar
      </button>

      {/* Mostre esse parágrafo só se visivel for true */}
      <p>Você consegue me ver?</p>
    </div>
  );
}

export default MostraTexto;

CORREÇÃO LAB 1

import { useState } from "react";

function MostrarTexto() {
  // Crie um estado booleano "visivel", começando em true
  const [visivel2, setVisivel2] = useState(true);

  let visivel = true;

  function mudarVisibilidade() {
    if (visivel2 === true) {
      visivel = false;
      setVisivel2(false);
    } else {
      visivel = true;
      setVisivel2(true);
    }
  }

  return (
    <div>
      <button onClick={mudarVisibilidade}>
        {visivel2 ? "Ocultar" : "Mostrar"}
      </button>
      {visivel && <p>Você consegue me ver?</p>}
      {visivel2 && <p>Visivel 2 aparecendo</p>}
    </div>
  );
}

export default MostrarTexto;

2️⃣ LAB 2 - PASSAR PROPS PARA UM COMPONENTE FILHO

• Objetivo: Compreender como passar dados e manipuladores de state por props;

function Pai() {
  const [mensagem, setMensagem] = useState("");

  return (
    <div>
      <Filho texto={mensagem} />
      <button onClick={() => setMensagem("Nova mensagem!")}>
        Adicionar mensagem pelo componente Pai
      </button>
    </div>
  );
}

type FilhoProps = {
	texto: string;
}

function Filho(props: FilhoProps) {
  return (
	  <div>
		  <p>{props.texto}</p>
		  <button onClick={/*Alterar mensagem do componente pai, pelo componente Filho*/}>
        Atualizar mensagem pelo componente Filho
      </button>
	  </div>
  );
}

export {
	Pai, 
	Filho
}