react/react_basic.html at main · Calpas/react · 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
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
  <head>
    <title>React Basics</title>
  </head>
  <body>
    <div class="js-container"></div>

    <script src="https://unpkg.com/supersimpledev/dayjs.js"></script>

    <script src="https://unpkg.com/supersimpledev/react.js"></script>
    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>

    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
    <script type="text/babel">

      const button = <button>Press button</button>;

      const productCost = 20 + 8 * 2;
      const shippingCost = 5;
      const totalCost = productCost + shippingCost;

      console.log(productCost);

      const paragraph = <p>Product cost: ${productCost} </p>;

      const cost =(
        <div>
          <p>Today is {dayjs().format('MMMM D')}</p>
          <p>Current time {dayjs().format('MMMM D')}</p>

          <p>Product cost: $ {productCost} </p>
          <p>Shipping cost: $ {shippingCost} </p>
          <p>Total cost: $ {productCost + shippingCost}</p>
          <button>Place your order</button>
        </div>
      );


      console.log(dayjs().format('MMMM D'));

      const container = document.querySelector('.js-container');
      const root = ReactDOM.createRoot(container);

      setInterval(() => {
        const paragraph = <p>Current time: {dayjs().format('HH:mm:ss')}</p>;
        root.render(paragraph);
      }, 1000);


    </script>
  </body>
</html>