From 53c2766eb9e7359727f4b65a4a37cea631b12c4a Mon Sep 17 00:00:00 2001
From: santhosh <santhosh@frontlinetech.in>
Date: Fri, 23 Aug 2024 09:57:26 +0000
Subject: [PATCH] Upload files to "/"

---
 Basic understanding of React.html | 93 +++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 Basic understanding of React.html
diff --git a/Basic understanding of React.html b/Basic understanding of React.html
new file mode 100644
index 0000000..667e8a0
--- /dev/null
+++ b/Basic understanding of React.html	
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!-- saved from url=(0083)https://d.139.84.136.103.sslip.io/s/react/p/basic-understanding-of-react-n9dMu9M4zW -->
+<html lang="en" data-mantine-color-scheme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    
+    <link rel="icon" type="image/png" sizes="32x32" href="https://d.139.84.136.103.sslip.io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://d.139.84.136.103.sslip.io/favicon-16x16.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>  Basic understanding of React</title>
+    <script type="module" crossorigin="" src="./Basic understanding of React_files/index-DJdCLBd7.js.download"></script>
+    <link rel="stylesheet" crossorigin="" href="./Basic understanding of React_files/index-CT2D-Jxj.css">
+  <style data-tiptap-style="">.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+  white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+  white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0
+}</style></head>
+  <body>
+    <div id="root"><style data-mantine-styles="true">:root{--mantine-color-blue-0: #e7f3ff;--mantine-color-blue-1: #d0e4ff;--mantine-color-blue-2: #a1c6fa;--mantine-color-blue-3: #6ea6f6;--mantine-color-blue-4: #458bf2;--mantine-color-blue-5: #2b7af1;--mantine-color-blue-6: #0b60d8;--mantine-color-blue-7: #1b72f2;--mantine-color-blue-8: #0056c1;--mantine-color-blue-9: #004aac;}:root[data-mantine-color-scheme="dark"]{--mantine-color-blue-light: rgba(11, 96, 216, 0.15);--mantine-color-blue-light-hover: rgba(11, 96, 216, 0.2);--mantine-color-blue-outline-hover: rgba(69, 139, 242, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-blue-light: rgba(11, 96, 216, 0.1);--mantine-color-blue-light-hover: rgba(11, 96, 216, 0.12);--mantine-color-blue-outline-hover: rgba(11, 96, 216, 0.05);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><style data-mantine-styles="inline">:root{--app-shell-navbar-width:calc(18.75rem * var(--mantine-scale));--app-shell-navbar-offset:calc(18.75rem * var(--mantine-scale));--app-shell-aside-width:calc(21.875rem * var(--mantine-scale));--app-shell-aside-offset:calc(21.875rem * var(--mantine-scale));--app-shell-header-height:calc(2.8125rem * var(--mantine-scale));--app-shell-header-offset:calc(2.8125rem * var(--mantine-scale));--app-shell-padding:var(--mantine-spacing-md);}@media(min-width: 48em){:root{--app-shell-aside-transform:translateX(var(--app-shell-aside-width));--app-shell-aside-transform-rtl:translateX(calc(var(--app-shell-aside-width) * -1));--app-shell-aside-offset:0px !important;}}@media(max-width: 47.99375em){:root{--app-shell-navbar-width:100%;--app-shell-navbar-offset:0px;--app-shell-navbar-transform:translateX(calc(var(--app-shell-navbar-width) * -1));--app-shell-navbar-transform-rtl:translateX(var(--app-shell-navbar-width));--app-shell-aside-width:100%;--app-shell-aside-offset:0px;--app-shell-aside-transform:translateX(var(--app-shell-aside-width));--app-shell-aside-transform-rtl:translateX(calc(var(--app-shell-aside-width) * -1));}}</style><div class="m_89ab340 mantine-AppShell-root" style="--app-shell-transition-duration: 200ms; --app-shell-transition-timing-function: ease;"><header class="m_3b16f56b mantine-AppShell-header right-scroll-bar-position _header_1wc1a_1" data-with-border="true" style="--app-shell-header-z-index: 100; padding-inline: var(--mantine-spacing-md);"><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap; padding-inline: var(--mantine-spacing-md); height: 100%;"><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: nowrap;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root mantine-hidden-from-sm" data-variant="subtle" data-size="sm" type="button" aria-label="sidebar toggle" style="--ai-size: var(--ai-size-sm); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-layout-sidebar-right-collapse "><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M15 4v16"></path><path d="M9 10l2 2l-2 2"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root mantine-visible-from-sm" data-variant="subtle" data-size="sm" type="button" aria-label="sidebar toggle" style="--ai-size: var(--ai-size-sm); --ai-bg: transparent; --ai-hover: var(--mantine-color-gray-light-hover); --ai-color: var(--mantine-color-gray-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-layout-sidebar-right-expand "><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M15 4v16"></path><path d="M10 10l-2 2l2 2"></path></svg></span></button><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="lg" style="--text-fz: var(--mantine-font-size-lg); --text-lh: var(--mantine-line-height-lg); cursor: pointer; user-select: none; font-weight: 600;">Docmost</p><div class="m_4081bf90 mantine-Group-root mantine-visible-from-sm" style="--group-gap: calc(0.3125rem * var(--mantine-scale)); --group-align: center; --group-justify: flex-start; --group-wrap: wrap; margin-left: calc(3.125rem * var(--mantine-scale));"><a class="_link_14bkk_10" href="https://d.139.84.136.103.sslip.io/home">Home</a></div></div><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap; padding-inline: var(--mantine-spacing-xl);"><button class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-mrzycb2ay-dropdown" id="mantine-mrzycb2ay-target"><div class="m_4081bf90 mantine-Group-root" style="--group-gap: calc(0.4375rem * var(--mantine-scale)); --group-align: center; --group-justify: flex-start; --group-wrap: nowrap;"><div class="m_f85678b6 mantine-Avatar-root" data-variant="filled" data-size="sm" style="--avatar-size: var(--avatar-size-sm); --avatar-bg: var(--mantine-color-violet-filled); --avatar-color: var(--mantine-color-white); --avatar-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"><span class="m_104cd71f mantine-Avatar-placeholder" title="Frontline Tech">FT</span></div><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="sm" style="--text-fz: var(--mantine-font-size-sm); --text-lh: var(--mantine-line-height-sm); margin-right: calc(0.1875rem * var(--mantine-scale)); font-weight: 500; line-height: 1;">Frontline Tech</p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down "><path d="M6 9l6 6l6 -6"></path></svg></div></button></div></div></header><nav class="m_45252eee mantine-AppShell-navbar _navbar_1wc1a_1" style="--app-shell-navbar-z-index: calc(100 + 1);"><div class="_navbar_116z2_1"><div class="_section_116z2_11" style="border: none; margin-bottom: 0px;"><button class="mantine-focus-auto _spaceName_16199_1 m_87cf2631 mantine-UnstyledButton-root" type="button"><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"><div style="flex: 1 1 0%;"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="md" data-line-clamp="true" style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md); --text-line-clamp: 1; font-weight: 500;">React</p></div></div></button></div><div class="_section_116z2_11"><div class="_menuItems_116z2_21"><a class="mantine-focus-auto _menu_116z2_21 m_87cf2631 mantine-UnstyledButton-root" href="https://d.139.84.136.103.sslip.io/s/react"><div class="_menuItemInner_116z2_43"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-home _menuItemIcon_116z2_49"><path d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg><span>Overview</span></div></a><button class="mantine-focus-auto _menu_116z2_21 m_87cf2631 mantine-UnstyledButton-root" type="button"><div class="_menuItemInner_116z2_43"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search _menuItemIcon_116z2_49"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg><span>Search</span></div></button><button class="mantine-focus-auto _menu_116z2_21 m_87cf2631 mantine-UnstyledButton-root" type="button"><div class="_menuItemInner_116z2_43"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-settings _menuItemIcon_116z2_49"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path></svg><span>Space settings</span></div></button><button class="mantine-focus-auto _menu_116z2_21 m_87cf2631 mantine-UnstyledButton-root" type="button"><div class="_menuItemInner_116z2_43"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus _menuItemIcon_116z2_49"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg><span>New page</span></div></button></div></div><div class="_section_116z2_11"><div class="_pagesHeader_116z2_60 m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: wrap;"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root" data-size="xs" style="--text-fz: var(--mantine-font-size-xs); --text-lh: var(--mantine-line-height-xs); color: var(--mantine-color-dimmed); font-weight: 500;">Pages</p><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-xs); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Space menu" style="--ai-size: calc(1.125rem * var(--mantine-scale)); --ai-bg: var(--mantine-color-default); --ai-hover: var(--mantine-color-default-hover); --ai-color: var(--mantine-color-default-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots "><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-label="Create page" style="--ai-size: calc(1.125rem * var(--mantine-scale)); --ai-bg: var(--mantine-color-default); --ai-hover: var(--mantine-color-default-hover); --ai-color: var(--mantine-color-default-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div><div class="_pages_116z2_54"><div class="_treeContainer_1lbp9_5"><div role="tree" tabindex="0" style="height: 480.344px; width: 280px; min-height: 0px; min-width: 0px;"><div class="_tree_1lbp9_1" style="position: relative; height: 480.344px; width: 280px; overflow: auto; will-change: transform; direction: ltr;"><div style="height: 240px; width: 100%; position: absolute; left: 0px; right: 0px;"></div><div style="height: 240px; width: 100%;"><div role="treeitem" aria-level="1" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 0px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal" draggable="true" style="padding-left: 0px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-3flqecm9y-dropdown" id="mantine-3flqecm9y-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">Email</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-x4vx0xyuy-dropdown" id="mantine-x4vx0xyuy-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="1" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 30px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal" draggable="true" style="padding-left: 0px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-q0w2xssrq-dropdown" id="mantine-q0w2xssrq-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">Git</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-ty9sg1k2d-dropdown" id="mantine-ty9sg1k2d-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="1" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 60px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isInternal isOpen" draggable="true" style="padding-left: 0px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down "><path d="M6 9l6 6l6 -6"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-x38ldext2-dropdown" id="mantine-x38ldext2-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">React</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-3pah9jfsb-dropdown" id="mantine-3pah9jfsb-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="2" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 90px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal" draggable="true" style="padding-left: 24px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-al0a9xamy-dropdown" id="mantine-al0a9xamy-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">Navbar</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-ickgjbhhd-dropdown" id="mantine-ickgjbhhd-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="2" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 120px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal" draggable="true" style="padding-left: 24px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-pf2iok3gm-dropdown" id="mantine-pf2iok3gm-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">untitled</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-fgtie25ab-dropdown" id="mantine-fgtie25ab-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="1" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 150px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isInternal isOpen" draggable="true" style="padding-left: 0px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down "><path d="M6 9l6 6l6 -6"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-ymp4rrf1m-dropdown" id="mantine-ymp4rrf1m-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">REACT</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-ug29srnfp-dropdown" id="mantine-ug29srnfp-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="2" aria-selected="true" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 180px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal isSelected isSelectedEnd isSelectedStart" draggable="true" style="padding-left: 24px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-b166ms5j3-dropdown" id="mantine-b166ms5j3-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">Basic understanding of React</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-vse32wg3c-dropdown" id="mantine-vse32wg3c-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div><div role="treeitem" aria-level="2" aria-selected="false" tabindex="-1" class="_row_1lbp9_67" style="position: absolute; left: 0px; top: 210px; height: 30px; width: 100%;"><div class="_node_1lbp9_12 isClosed isInternal" draggable="true" style="padding-left: 24px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" type="button" style="--ai-size: calc(1.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-blue-light-hover); --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-point-filled "><path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z"></path></svg></span></button><div style="margin-right: 4px;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="mantine-0hyil6hey-dropdown" id="mantine-0hyil6hey-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-file-description "><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path><path d="M9 17h6"></path><path d="M9 13h6"></path></svg></span></button></div><span class="_text_1lbp9_90">untitled</span><div class="_actions_1lbp9_28"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-yxo7sns1h-dropdown" id="mantine-yxo7sns1h-target" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots-vertical " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" type="button" style="--ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-blue-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-gray-text);"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus " style="width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale));"><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></span></button></div></div></div></div></div></div></div></div></div></div></nav><main class="m_8983817 mantine-AppShell-main"><div><div class="_header_1bqa0_1"><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap; padding-inline: var(--mantine-spacing-md); height: 100%;"><div style="overflow: hidden;"><div class="_breadcrumbs_1yc3n_1 m_8b3717df mantine-Breadcrumbs-root"><a class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb _truncatedText_1yc3n_17 m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="never" href="https://d.139.84.136.103.sslip.io/s/react/p/react-4ylt6ISJ2L" style="font-size: var(--mantine-font-size-sm);">REACT</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb _truncatedText_1yc3n_17 m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="never" href="https://d.139.84.136.103.sslip.io/s/react/p/basic-understanding-of-react-n9dMu9M4zW" style="font-size: var(--mantine-font-size-sm);">Basic understanding of React</a></div></div><div class="m_4081bf90 mantine-Group-root" style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-end; --group-wrap: nowrap; padding-inline: var(--mantine-spacing-md); height: 100%;"><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" style="--ai-bg: var(--mantine-color-default); --ai-hover: var(--mantine-color-default-hover); --ai-color: var(--mantine-color-default-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border); border: none;"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-message "><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"></path></svg></span></button><button class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="default" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="mantine-nebcrh6hs-dropdown" id="mantine-nebcrh6hs-target" style="--ai-bg: var(--mantine-color-default); --ai-hover: var(--mantine-color-default-hover); --ai-color: var(--mantine-color-default-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border); border: none;"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-dots "><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></span></button></div></div></div><div class="_editor_rupcc_1 m_7485cace mantine-Container-root" style="--container-size: calc(53.125rem * var(--mantine-scale));"><div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><h1>Basic understanding of React</h1></div></div><div><div><div aria-expanded="false"><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><strong><span class="selection">Introduction;</span></strong></p><ul><li><p><span class="selection">React is a </span><span style="color: rgb(0, 0, 0)"><span class="selection">frontend </span></span><span class="selection">JavaScript library for building user interfaces.</span></p><p><span class="selection">[Difference between Library and Framework:  </span><strong><span class="selection">We can say that a library implements a particular function.</span></strong><span style="color: rgb(0, 0, 0)"><span class="selection"> </span></span><strong><span class="selection">We can define a framework as a collection of libraries implementing one specific methodology</span></strong><span style="color: rgb(0, 0, 0)"><span class="selection">.]</span></span></p></li><li><p><span class="selection">React is used to build single-page applications.</span></p></li><li><p><span class="selection">React.JS was first used in 2011 for Facebook's Newsfeed feature.</span></p></li><li><p><span class="selection">Facebook Software Engineer, Jordan Walke, created it.</span></p><p><br class="ProseMirror-trailingBreak"></p></li></ul><p><strong><span class="selection">React file Installation;</span></strong></p><p><strong><em><span class="selection">To use React we need NPM [Node package manager] </span></em></strong></p><ul><li><p><strong><span class="selection">npx</span></strong><span class="selection"> create-react-app [ This command line Creates a new React file in Our project.]</span></p></li><li><p><strong><span class="selection">npm</span></strong><span class="selection"> uninstall -g create-react-app [Uninstalled the React file.]</span></p></li><li><p><strong><span class="selection">npm</span></strong><span class="selection"> start [ Run this command to execute the React application.] </span></p></li></ul><p><strong><span class="selection">How does React work;</span></strong></p><ul><li><p><span style="color: rgb(0, 0, 0)"><span class="selection">React creates a virtual DOM in memory and before making the changes in the browser DOM.</span></span></p></li><li><p><span style="color: rgb(0, 0, 0)"><span class="selection">React only changes what needs to be changed.</span></span></p></li></ul><p><br class="ProseMirror-trailingBreak"></p></div><div draggable="true" data-drag-handle="" class="drag-handle" style="left: 457.4px; top: 299.275px;"></div></div><div></div></div></div></div></div></main><aside class="m_9cdde9a mantine-AppShell-aside _aside_1wc1a_1" style="--app-shell-aside-z-index: calc(100 + 1); padding: var(--mantine-spacing-md);"><div class="" style="padding: var(--mantine-spacing-md);"></div></aside></div></div>
+
+    <script>window.CONFIG={"ENV":"production","APP_URL":"https://d.139.84.136.103.sslip.io","IS_CLOUD":false};</script>
+
+  
+
+<div data-portal="true"><div><div class="m_9df02822 mantine-Modal-root" style="--modal-y-offset: 5dvh; --mb-z-index: 201;"></div></div></div><div data-portal="true"><div class="m_b37d9ac7 mantine-Notifications-root" style="--notifications-z-index: 400; --notifications-bottom: var(--mantine-spacing-md); --notifications-left: 50%; --notifications-transform: translateX(-50%); --notifications-container-width: calc(27.5rem * var(--mantine-scale));"><div></div></div></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"><div><div class="m_9df02822 mantine-Modal-root" style="--modal-size: calc(37.5rem * var(--mantine-scale)); --modal-y-offset: 10vh; --modal-x-offset: 0rem; --mb-z-index: 200; --mb-padding: var(--mantine-spacing-xl); max-height: calc(25rem * var(--mantine-scale));"></div></div></div><div data-portal="true"></div><div data-portal="true"><div><div class="m_9df02822 mantine-Modal-root" style="--modal-size: calc(37.5rem * var(--mantine-scale)); --modal-y-offset: 10vh; --modal-x-offset: 0rem; --mb-z-index: 200; --mb-padding: var(--mantine-spacing-xl); max-height: calc(25rem * var(--mantine-scale));"></div></div></div><div data-portal="true"><div><div class="m_d2b315db m_9df02822 mantine-Spotlight-root" data-scrollable="true" style="--modal-size: calc(37.5rem * var(--mantine-scale)); --modal-y-offset: calc(5rem * var(--mantine-scale)); --spotlight-max-height: calc(25rem * var(--mantine-scale)); --mb-z-index: 9999; --mb-padding: 0rem;"></div></div></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"><div><div class="m_9df02822 mantine-Modal-root" style="--modal-size: calc(31.25rem * var(--mantine-scale)); --modal-y-offset: 10vh; --modal-x-offset: 0rem; --mb-z-index: 200; --mb-padding: var(--mantine-spacing-xl); max-height: calc(25rem * var(--mantine-scale));"></div></div></div><div data-portal="true"><div><div class="m_9df02822 mantine-Modal-root" style="--modal-size: calc(75rem * var(--mantine-scale)); --modal-y-offset: 5dvh; --mb-z-index: 200;"></div></div></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div><div data-portal="true"></div></body></html>
\ No newline at end of file
