feat: way1 to create react application

ap221882 · Jan 22, 2023 · 5cef309 · 5cef309 · vercel · Jan 22, 2023
1 parent c6979ce
commit 5cef309
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/Revision/Basic_React/way1/index.html b/Revision/Basic_React/way1/index.html
@@ -0,0 +1,25 @@
+<!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" />
+    <!-- ?React Scripts -->
+    <script
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
+      crossorigin
+      defer
+    ></script>
+    <script
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+      crossorigin
+      defer
+    ></script>
+    <!-- ?Local Script -->
+    <script src="script.js" type="module"></script>
+    <title>Smallest React Application</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/Revision/Basic_React/way1/script.js b/Revision/Basic_React/way1/script.js
@@ -0,0 +1,34 @@
+console.log(React, 'React');
+console.log(ReactDOM, 'ReactDOM');
+
+const element = React.createElement(
+  'h1',
+  { ajay: 'pathak' },
+  'I am learning react'
+);
+
+const rootDOMElement = document.querySelector('#root');
+console.log(rootDOMElement, 'rootDOMElement');
+
+const rootInstance = ReactDOM.createRoot(rootDOMElement);
+
+//~! Mount
+rootInstance.render(element);
+
+ReactDOM.flushSync(() => {
+  rootInstance.render(element);
+});
+
+console.log(rootDOMElement.innerHTML);
+
+//~! SERVER CODE
+// const treeString = ReactDOM.renderToString(element);
+// console.log(treeString, 'treeString');
+
+//~! Unmount
+// rootInstance.unmount();
+
+console.log(rootInstance, 'rootInstance');
+console.dir(rootInstance.unmount, 'rootInstance.unmount');
+
+ReactDOM.unmountComponentAtNode(rootDOMElement);
diff --git a/Revision/Basic_React/way2/index.html b/Revision/Basic_React/way2/index.html
@@ -0,0 +1,13 @@
+<!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" />
+    <script src="script.js" type="module"></script>
+    <title>Smallest React Application</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>