react-CDN-with-Babel/index.html at main · replyre/react-CDN-with-Babel · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN Example</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://unpkg.com/react/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return (
          <div style={{ fontFamily: "poppins " }}>
            <h1
              style={{
                borderTop: "2px solid black",
                marginTop: "30px",
                fontWeight: "400",
              }}
            >
              Learn Web Development{" "}
            </h1>
            <div>
              {" "}
              <p>
                {" "}
                Welcome to MDN learning area. This set of articles aims to guide
                complete beginners with all that they nned to start coding
                website.
              </p>
            </div>

            <div>
              {" "}
              <p>
                The aim of this area of MDN is not to take you from "beginner"
                to "expert" but to take you from "beginner" to "comfortable."
                From there, you should be able to start making your way,
                learning from
                <a href="#"> the rest of MDN</a>, and other intermediate to
                advanced resources that assume a lot of previous knowledge.
              </p>
            </div>

            <div>
              {" "}
              <p>
                If you are a complete beginner, web development can be
                challenging — we will hold your hand and provide enough detail
                for you to feel comfortable and learn the topics properly. You
                should feel at home whether you are a student learning web
                development (on your own or as part of a class), a teacher
                looking for class materials, a hobbyist, or someone who just
                wants to understand more about how web technologies work.
              </p>
            </div>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>