basic-next/index.html at main · anavin-pub/basic-next · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<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');

      {/* This function returns JSX elements */}
      function Header({title}) {
        return (<h1>{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>
            <h1> Hi Bro </h1>
            <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>