mikansc/App.jsx

## App.jsx
import { useState } from "react";

const corInicial = "btn-primary";

function App() {
  const [nome, setNome] = useState("Turma Itaguaçu!!!!!!!!!!!!!!");
  const [cor, setCor] = useState(corInicial);

  document.title = nome;

  function handleAlterarCor() {
    console.log("evento disparado");
    setCor("btn-danger");
  }

  return (
    <div
      onMouseLeave={() => {
        alert("Não se vá!");
      }}
    >
      <nav className="navbar bg-dark" data-bs-theme="dark">
        <div className="container-fluid">
          <span className="navbar-brand mb-0 h1">{nome}</span>
        </div>
      </nav>

      <main className="container mt-4">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, quasi?
        Aliquam officiis quos libero optio deleniti ab necessitatibus asperiores
        id cupiditate, recusandae temporibus repellendus ipsa harum quisquam
        quibusdam. Asperiores, nam.
        <br />
        <button
          onClick={() => {
            setNome("Turma Itaguaçu! A melhor turma do Floripa + Tech");
          }}
          type="button"
          className={`btn ${cor} mt-5`}
        >
          Primary
        </button>
        <br />
        <div
          onMouseOver={handleAlterarCor}
          className="w-25  bg-dark text-light"
        >
          oi
        </div>
      </main>
    </div>
  );
}

export default App;

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <title>Vite + React</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
    integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
    crossorigin="anonymous"></script>
</body>

</html>
	import { useState } from "react";

	const corInicial = "btn-primary";

	function App() {
	const [nome, setNome] = useState("Turma Itaguaçu!!!!!!!!!!!!!!");
	const [cor, setCor] = useState(corInicial);

	document.title = nome;

	function handleAlterarCor() {
	console.log("evento disparado");
	setCor("btn-danger");
	}

	return (
	<div
	onMouseLeave={() => {
	alert("Não se vá!");
	}}
	>
	<nav className="navbar bg-dark" data-bs-theme="dark">
	<div className="container-fluid">
	<span className="navbar-brand mb-0 h1">{nome}</span>
	</div>
	</nav>

	<main className="container mt-4">
	Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, quasi?
	Aliquam officiis quos libero optio deleniti ab necessitatibus asperiores
	id cupiditate, recusandae temporibus repellendus ipsa harum quisquam
	quibusdam. Asperiores, nam.
	<br />
	<button
	onClick={() => {
	setNome("Turma Itaguaçu! A melhor turma do Floripa + Tech");
	}}
	type="button"
	className={`btn ${cor} mt-5`}
	>
	Primary
	</button>
	<br />
	<div
	onMouseOver={handleAlterarCor}
	className="w-25 bg-dark text-light"
	>
	oi
	</div>
	</main>
	</div>
	);
	}

	export default App;
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
	<title>Vite + React</title>
	</head>

	<body>
	<div id="root"></div>
	<script type="module" src="/src/main.jsx"></script>

	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
	integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"
	integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
	crossorigin="anonymous"></script>
	</body>

	</html>