Make own React Library

code-with-divyanshu · code-with-divyanshu · commit 4a15aa756c9f · 2024-05-31T15:08:16.000+05:30
diff --git a/custom_React/custom-react.js b/custom_React/custom-react.js
@@ -0,0 +1,32 @@
+function customRender(reactElement, container) {
+  // this is not best way beacuse every time use to setAttribute for every element
+
+  //   const domElement = document.createElement(reactElement.type);
+  //   domElement.innerHTML = reactElement.children;
+  //   domElement.setAttribute("href", reactElement.props.herf);
+  //   domElement.setAttribute("target", reactElement.children.target);
+  //   container.appendChild(domElement);
+
+  // loop base code , best way
+
+  const domElement = document.createElement(reactElement.type);
+  domElement.innerHTML = reactElement.children;
+  for (const prop in reactElement.props) {
+    if (prop == "children") continue; // if prop attr have h children element
+    domElement.setAttribute(prop, reactElement.props[prop]);
+  }
+  container.appendChild(domElement);
+}
+
+const reactElement = {
+  type: "a",
+  props: {
+    herf: "https://google.com",
+    target: "_blank",
+  },
+  children: "Visit Google",
+}; // react give same like this end of the day
+
+const mainContainer = document.querySelector("#root");
+
+customRender(reactElement, mainContainer);
diff --git a/custom_React/index.html b/custom_React/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="./custom-react.js"></script>
+  </body>
+</html>
