diff options
| author | Kyle K <kylek389@gmail.com> | 2023-04-04 22:47:28 -0500 |
|---|---|---|
| committer | Kyle K <kylek389@gmail.com> | 2023-04-04 22:47:28 -0500 |
| commit | 31bad5aac05354d57288551ef20021b4e721ff35 (patch) | |
| tree | 241f98faa8a16afcf6704b1f27e9d4fbeefa3a75 | |
| parent | 1c420ebf6e53af11c66434c01c6749f292b75044 (diff) | |
| download | jsexamples-31bad5aac05354d57288551ef20021b4e721ff35.tar.gz jsexamples-31bad5aac05354d57288551ef20021b4e721ff35.tar.bz2 jsexamples-31bad5aac05354d57288551ef20021b4e721ff35.zip | |
| -rw-r--r-- | react-1page-example.html | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/react-1page-example.html b/react-1page-example.html new file mode 100644 index 0000000..b5d4fa1 --- /dev/null +++ b/react-1page-example.html @@ -0,0 +1,43 @@ +<!-- courtesy of https://nextjs.org/learn/foundations/from-react-to-nextjs --> +<html> + <body> + <div id="app"></div> + + <script src="https://unpkg.com/react@17/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> + + <script type="text/jsx"> + const app = document.getElementById("app") + + function Header({ title }) { + return <h1>{title ? title : "Default title"}</h1> + } + + function HomePage() { + const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"] + + const [likes, setLikes] = React.useState(0) + + function handleClick() { + setLikes(likes + 1) + } + + return ( + <div> + <Header title="Develop. Preview. Ship. 🚀" /> + <ul> + {names.map((name) => ( + <li key={name}>{name}</li> + ))} + </ul> + + <button onClick={handleClick}>Like ({likes})</button> + </div> + ) + } + + ReactDOM.render(<HomePage />, app) + </script> + </body> +</html> |