Last active
March 16, 2023 23:37
-
-
Save mikansc/4031bdcab3fb51e01600423923713e5b to your computer and use it in GitHub Desktop.
Arquivo React da aula
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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/[email protected]/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/[email protected]/dist/umd/popper.min.js" | |
| integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" | |
| crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" | |
| integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" | |
| crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment