Created
July 30, 2022 17:06
-
-
Save porfidev/22081b0a6ba3c6a51c2060368471c048 to your computer and use it in GitHub Desktop.
Cambiar el estado de un texto y aumentar el contador de cambios con un efecto en React.js
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"> | |
| <title>porfi.dev React JS | Prueba 01</title> | |
| </head> | |
| <body> | |
| <div id="app_container"></div> | |
| <!-- Cargar React. --> | |
| <!-- Nota: cuando se despliegue, reemplazar "development.js" con "production.min.js". --> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <script type="text/babel"> | |
| function PlayerStatus() { | |
| const [status, setStatus] = React.useState("online"); | |
| const [counter, setCounter] = React.useState(0); | |
| function toggleStatus() { | |
| const newStatus = status === "online" ? "away" : "online"; | |
| setStatus(newStatus); | |
| } | |
| function incrementCounter() { | |
| const newCounter = counter + 1; | |
| setCounter(newCounter); | |
| } | |
| React.useEffect(incrementCounter, [status]) | |
| return ( | |
| <div> | |
| <h1>{status}</h1> | |
| <h3>{counter}</h3> | |
| <button onClick={toggleStatus}>Toggle status</button> | |
| </div> | |
| ); | |
| } | |
| const domContainer = document.querySelector('#app_container'); | |
| const root = ReactDOM.createRoot(domContainer); | |
| root.render(<PlayerStatus />); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment