New: Added js and css

3 years ago · 0b40b17aec
parent d0c066fcb9
commit 0b40b17aec
3 changed files with 51 additions and 0 deletions
--- a/practice/index.html
+++ b/practice/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React App</title>
+
+    <!-- Fonts and other CDN links -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react@16/umd/react.development.js"
+      defer
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+      defer
+    ></script>
+    <script
+      src="https://unpkg.com/@babel/standalone/babel.min.js"
+      defer
+    ></script>
+
+    <!-- Local links -->
+    <link rel="stylesheet" href="./style.css" />
+    <script src="./main.js" defer type="text/babel"></script>
+  </head>
+  <body>
+    <div class="root"></div>
+  </body>
+</html>
--- a/practice/main.js
+++ b/practice/main.js
@ -0,0 +1,14 @@
+import React from "react";
+import { ReactDOM } from "react-dom";
+
+// To get the root element from the HTML document
+const rootElement = document.querySelector(".root");
+
+// JSX element, header
+const header = <h1>Welcome to react</h1>;
+
+// JSX element, app
+const app = <div className="app">{header}</div>;
+
+// we render the JSX element using the ReactDOM package
+ReactDOM.render(app, rootElement);
--- a/practice/style.css
+++ b/practice/style.css