diff --git a/docs/react/_category_.json b/docs/_category_.json
similarity index 100%
rename from docs/react/_category_.json
rename to docs/_category_.json
diff --git a/docs/react/advanced-usage/_category_.json b/docs/advanced-usage/_category_.json
similarity index 100%
rename from docs/react/advanced-usage/_category_.json
rename to docs/advanced-usage/_category_.json
diff --git a/docs/react/advanced-usage/advanced-configuration.md b/docs/advanced-usage/advanced-configuration.md
similarity index 100%
rename from docs/react/advanced-usage/advanced-configuration.md
rename to docs/advanced-usage/advanced-configuration.md
diff --git a/docs/react/advanced-usage/alternatives-to-ejecting.md b/docs/advanced-usage/alternatives-to-ejecting.md
similarity index 100%
rename from docs/react/advanced-usage/alternatives-to-ejecting.md
rename to docs/advanced-usage/alternatives-to-ejecting.md
diff --git a/docs/react/advanced-usage/can-i-use-decorators.md b/docs/advanced-usage/can-i-use-decorators.md
similarity index 100%
rename from docs/react/advanced-usage/can-i-use-decorators.md
rename to docs/advanced-usage/can-i-use-decorators.md
diff --git a/docs/react/advanced-usage/custom-templates.md b/docs/advanced-usage/custom-templates.md
similarity index 100%
rename from docs/react/advanced-usage/custom-templates.md
rename to docs/advanced-usage/custom-templates.md
diff --git a/docs/react/advanced-usage/pre-rendering-into-static-html-files.md b/docs/advanced-usage/pre-rendering-into-static-html-files.md
similarity index 100%
rename from docs/react/advanced-usage/pre-rendering-into-static-html-files.md
rename to docs/advanced-usage/pre-rendering-into-static-html-files.md
diff --git a/docs/react/back-end-integration/DataFetcher.jsx b/docs/back-end-integration/DataFetcher.jsx
similarity index 100%
rename from docs/react/back-end-integration/DataFetcher.jsx
rename to docs/back-end-integration/DataFetcher.jsx
diff --git a/docs/react/back-end-integration/FetchDataComponent.jsx b/docs/back-end-integration/FetchDataComponent.jsx
similarity index 100%
rename from docs/react/back-end-integration/FetchDataComponent.jsx
rename to docs/back-end-integration/FetchDataComponent.jsx
diff --git a/docs/react/back-end-integration/_category_.json b/docs/back-end-integration/_category_.json
similarity index 100%
rename from docs/react/back-end-integration/_category_.json
rename to docs/back-end-integration/_category_.json
diff --git a/docs/react/back-end-integration/fetching-data-with-ajax-requests.md b/docs/back-end-integration/fetching-data-with-ajax-requests.md
similarity index 87%
rename from docs/react/back-end-integration/fetching-data-with-ajax-requests.md
rename to docs/back-end-integration/fetching-data-with-ajax-requests.md
index b6affc280..dca786136 100644
--- a/docs/react/back-end-integration/fetching-data-with-ajax-requests.md
+++ b/docs/back-end-integration/fetching-data-with-ajax-requests.md
@@ -144,6 +144,36 @@ const DataFetcher = () => {
 export default DataFetcher;
 ```
 
+<BrowserWindow>
+     <div id="output_element3" style={{display:"none"}}>
+     <h2>Fetched Data</h2>
+     <p id="load_ing" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
+     <ul id="u_l"></ul>   
+     </div>
+     <button id="hide_btn3" onClick={()=>{
+      let output_element3=document.getElementById("output_element3")
+      output_element3.style.display="block"
+      let hide_btn3=document.getElementById("hide_btn3")
+      hide_btn3.style.display="none"
+      setTimeout(()=>{ 
+               let ele = document.getElementById("load_ing");
+              if (ele) {
+              ele.style.display = "none";
+              }
+              [{id:1,name:"John"},{id:2,name:"sam"},{id:3,name:"Arjun"},{id:4,name:"siva"},{id:5,name:"Anbhu"},{id:6,name:"Krishna"}].map(item=>{
+                let li=document.createElement("li")
+                li.textContent=item.name
+                let ul=document.getElementById("u_l")
+                if(ul){
+                ul.appendChild(li)
+                }
+              }) 
+              },1500) 
+     }}>click to see the output</button>
+</BrowserWindow>
+
+
+
 In this component, we use the `useEffect` hook to fetch data from the API when the component mounts. We store the fetched data in the `data` state variable using the `useState` hook.
 
 ### Step 4: Using the DataFetcher Component
diff --git a/docs/react/back-end-integration/integrating-with-an-api-backend.md b/docs/back-end-integration/integrating-with-an-api-backend.md
similarity index 71%
rename from docs/react/back-end-integration/integrating-with-an-api-backend.md
rename to docs/back-end-integration/integrating-with-an-api-backend.md
index 7532445ee..398b483c6 100644
--- a/docs/react/back-end-integration/integrating-with-an-api-backend.md
+++ b/docs/back-end-integration/integrating-with-an-api-backend.md
@@ -91,6 +91,32 @@ const App = () => {
 export default App;
 ```
 
+<BrowserWindow>
+     <div id="output_element4" style={{display:"none"}}>
+     <h2>My React App</h2>
+     <p id="loa_d_ing" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
+     <ul id="u_l_"></ul> 
+     </div>
+     <button id="hide_btn4" onClick={()=>{
+        let hide_btn4=document.getElementById("hide_btn4")
+        hide_btn4.style.display="none"
+        let output_element4=document.getElementById("output_element4")
+        output_element4.style.display="block"
+        setTimeout(()=>{ 
+              let ele=document.getElementById("loa_d_ing")
+              if(ele){ele.style.display="none";}
+              [{id:1,name:"Leet Code Solutions"},{id:2,name:"Responsive Missing"},{id:3,name:"Amazing work projects"},{id:4,name:"Blogs news"},{id:5,name:"130+ contributors"},{id:6,name:"Our Team Members"}].map(item=>{
+                let li=document.createElement("li")
+                li.textContent=item.name
+                let ul=document.getElementById("u_l_")
+                if(ul){
+                ul.appendChild(li)
+                }
+              }) 
+              },2500) 
+     }}>click to view the output</button>
+</BrowserWindow>
+
 In this code, we use the `useState` and `useEffect` hooks from React to manage the state of the `posts` array. The `useEffect` hook makes an HTTP GET request to `/api/posts` when the component mounts. The response data is then used to update the `posts` state, and the list of posts is displayed in the app.
 
 ### Sending Data to the Backend
@@ -134,7 +160,7 @@ const App = () => {
       </form>
       <ul>
         {posts.map(post => (
-          <li key={post.id}>{post.title}</li>
+          <li key={post.id}><span>{post.title}</span><span>{post.body}</span></li>
         ))}
       </ul>
     </div>
@@ -144,6 +170,36 @@ const App = () => {
 export default App;
 ```
 
+<BrowserWindow>
+     <div>
+     <h2>My React App</h2>
+     <form style={{display:"flex",flexDirection:"column",gap:"0.4rem"}} onSubmit={(event)=>{
+        event.preventDefault();
+        let dispaly_data=document.getElementById("dispaly_data")
+        let li=document.createElement("li")
+        li.style.display="flex"
+        li.style.flexDirection="column"
+        li.style.border="0.1rem solid"
+        li.style.margin="0.5rem"
+        li.style.padding="0.5rem"
+        let span1=document.createElement("span")
+        let span2=document.createElement("span")
+        span1.textContent=`Title: ${event.target.title.value}`
+        span2.textContent=`body: ${event.target.body.value}`
+        li.appendChild(span1)
+        li.appendChild(span2)
+        dispaly_data.appendChild(li)
+     }}>
+        <input type="text" name="title" placeholder="Enter title" required  style={{padding:"0.5rem 2rem 0.5rem 0.5rem"}}/>
+        <textarea name="body" placeholder="Enter body" required style={{padding:"0.5rem 2rem 0.5rem 0.5rem"}}/>
+        <button type="submit" style={{padding:"0.8rem",width:"200px",background:"rgb(0,123,255)",border:"none",borderRadius:"0.5rem",color:"white"}}>Create Post</button>
+     </form>
+     <ul id="dispaly_data">
+        <li style={{display:"flex",flexDirection:"column",border:"0.1rem solid",margin:"0.5rem",padding:"0.5rem"}}><span>Title: Sample Post</span><span>body: Hello Users, This is sample post create you own post</span></li>
+     </ul>
+     </div>
+</BrowserWindow>
+
 In this code, we added a form with inputs for the title and body of the post. When the form is submitted, the `handleSubmit` function is called, which captures the values of the form fields and sends a POST request to `/api/posts`. If the request is successful, the new post is added to the `posts` state, and the list is updated automatically.
 
 ## Conclusion
diff --git a/docs/react/back-end-integration/proxying-api-requests-in-development.md b/docs/back-end-integration/proxying-api-requests-in-development.md
similarity index 89%
rename from docs/react/back-end-integration/proxying-api-requests-in-development.md
rename to docs/back-end-integration/proxying-api-requests-in-development.md
index adb8ac3c2..bd8f0f1d6 100644
--- a/docs/react/back-end-integration/proxying-api-requests-in-development.md
+++ b/docs/back-end-integration/proxying-api-requests-in-development.md
@@ -160,6 +160,33 @@ function App() {
 export default App;
 ```
 
+<BrowserWindow>
+     <div id="output_element2" style={{display:"none"}}>
+     <h1>Welcome to My React app</h1>
+     <p id="loading" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
+     <ul id="ul"></ul>
+     </div>
+     <button id="hide_btn2" onClick={()=>{
+      let output_element2=document.getElementById("output_element2")
+      output_element2.style.display="block"
+      let hide_btn2=document.getElementById("hide_btn2")
+      hide_btn2.style.display="none"
+      setTimeout(()=>{ 
+              let ele=document.getElementById("loading")
+              if(ele){ele.style.display="none";}
+              [{id:1,name:"John"},{id:2,name:"sam"},{id:3,name:"Arjun"},{id:4,name:"siva"},{id:5,name:"Anbhu"},{id:6,name:"Krishna"}].map(item=>{
+                let li=document.createElement("li")
+                li.textContent=item.name
+                let ul=document.getElementById("ul")
+                if(ul){
+                ul.appendChild(li)
+                }
+              }) 
+              },2500)
+     }}>click to see the output</button>
+</BrowserWindow>
+
+
 ## "Invalid Host Header" Error and How to Handle It
 
 In some cases, after configuring the proxy, you might encounter an "Invalid Host Header" error when developing remotely. This issue arises due to stricter host checks to prevent DNS rebinding attacks.
diff --git a/docs/react/back-end-integration/title-and-meta-tags.md b/docs/back-end-integration/title-and-meta-tags.md
similarity index 100%
rename from docs/react/back-end-integration/title-and-meta-tags.md
rename to docs/back-end-integration/title-and-meta-tags.md
diff --git a/docs/react/building-your-app/_category_.json b/docs/building-your-app/_category_.json
similarity index 100%
rename from docs/react/building-your-app/_category_.json
rename to docs/building-your-app/_category_.json
diff --git a/docs/react/building-your-app/adding-a-router.md b/docs/building-your-app/adding-a-router.md
similarity index 100%
rename from docs/react/building-your-app/adding-a-router.md
rename to docs/building-your-app/adding-a-router.md
diff --git a/docs/react/building-your-app/adding-bootstrap.md b/docs/building-your-app/adding-bootstrap.md
similarity index 100%
rename from docs/react/building-your-app/adding-bootstrap.md
rename to docs/building-your-app/adding-bootstrap.md
diff --git a/docs/react/building-your-app/adding-custom-environment-variables.md b/docs/building-your-app/adding-custom-environment-variables.md
similarity index 100%
rename from docs/react/building-your-app/adding-custom-environment-variables.md
rename to docs/building-your-app/adding-custom-environment-variables.md
diff --git a/docs/react/building-your-app/adding-flow.md b/docs/building-your-app/adding-flow.md
similarity index 100%
rename from docs/react/building-your-app/adding-flow.md
rename to docs/building-your-app/adding-flow.md
diff --git a/docs/react/building-your-app/adding-relay.md b/docs/building-your-app/adding-relay.md
similarity index 100%
rename from docs/react/building-your-app/adding-relay.md
rename to docs/building-your-app/adding-relay.md
diff --git a/docs/react/building-your-app/adding-typescript.md b/docs/building-your-app/adding-typescript.md
similarity index 100%
rename from docs/react/building-your-app/adding-typescript.md
rename to docs/building-your-app/adding-typescript.md
diff --git a/docs/react/building-your-app/importing-a-component.md b/docs/building-your-app/importing-a-component.md
similarity index 100%
rename from docs/react/building-your-app/importing-a-component.md
rename to docs/building-your-app/importing-a-component.md
diff --git a/docs/react/building-your-app/installing-a-dependency.md b/docs/building-your-app/installing-a-dependency.md
similarity index 100%
rename from docs/react/building-your-app/installing-a-dependency.md
rename to docs/building-your-app/installing-a-dependency.md
diff --git a/docs/react/building-your-app/making-a-progressive-web-app.md b/docs/building-your-app/making-a-progressive-web-app.md
similarity index 100%
rename from docs/react/building-your-app/making-a-progressive-web-app.md
rename to docs/building-your-app/making-a-progressive-web-app.md
diff --git a/docs/react/building-your-app/measuring-performance.md b/docs/building-your-app/measuring-performance.md
similarity index 100%
rename from docs/react/building-your-app/measuring-performance.md
rename to docs/building-your-app/measuring-performance.md
diff --git a/docs/react/building-your-app/production-build.md b/docs/building-your-app/production-build.md
similarity index 100%
rename from docs/react/building-your-app/production-build.md
rename to docs/building-your-app/production-build.md
diff --git a/docs/react/building-your-app/style.css b/docs/building-your-app/style.css
similarity index 100%
rename from docs/react/building-your-app/style.css
rename to docs/building-your-app/style.css
diff --git a/docs/react/building-your-app/using-global-variables.md b/docs/building-your-app/using-global-variables.md
similarity index 100%
rename from docs/react/building-your-app/using-global-variables.md
rename to docs/building-your-app/using-global-variables.md
diff --git a/docs/react/create-react-app.md b/docs/create-react-app.md
similarity index 100%
rename from docs/react/create-react-app.md
rename to docs/create-react-app.md
diff --git a/docs/react/css/style.css b/docs/css/style.css
similarity index 100%
rename from docs/react/css/style.css
rename to docs/css/style.css
diff --git a/docs/react/deployment/_category_.json b/docs/deployment/_category_.json
similarity index 100%
rename from docs/react/deployment/_category_.json
rename to docs/deployment/_category_.json
diff --git a/docs/react/deployment/deployment.md b/docs/deployment/deployment.md
similarity index 100%
rename from docs/react/deployment/deployment.md
rename to docs/deployment/deployment.md
diff --git a/docs/react/development/_category_.json b/docs/development/_category_.json
similarity index 100%
rename from docs/react/development/_category_.json
rename to docs/development/_category_.json
diff --git a/docs/react/development/analyzing-the-bundle-size.md b/docs/development/analyzing-the-bundle-size.md
similarity index 100%
rename from docs/react/development/analyzing-the-bundle-size.md
rename to docs/development/analyzing-the-bundle-size.md
diff --git a/docs/react/development/developing-components-in-isolation.md b/docs/development/developing-components-in-isolation.md
similarity index 100%
rename from docs/react/development/developing-components-in-isolation.md
rename to docs/development/developing-components-in-isolation.md
diff --git a/docs/react/development/setting-up-your-editor.md b/docs/development/setting-up-your-editor.md
similarity index 100%
rename from docs/react/development/setting-up-your-editor.md
rename to docs/development/setting-up-your-editor.md
diff --git a/docs/react/development/using-https-in-development.md b/docs/development/using-https-in-development.md
similarity index 100%
rename from docs/react/development/using-https-in-development.md
rename to docs/development/using-https-in-development.md
diff --git a/docs/react/getting-started/_category_.json b/docs/getting-started/_category_.json
similarity index 100%
rename from docs/react/getting-started/_category_.json
rename to docs/getting-started/_category_.json
diff --git a/docs/react/getting-started/available-scripts.md b/docs/getting-started/available-scripts.md
similarity index 100%
rename from docs/react/getting-started/available-scripts.md
rename to docs/getting-started/available-scripts.md
diff --git a/docs/react/getting-started/folder-structure.md b/docs/getting-started/folder-structure.md
similarity index 100%
rename from docs/react/getting-started/folder-structure.md
rename to docs/getting-started/folder-structure.md
diff --git a/docs/react/getting-started/forms-in-react.md b/docs/getting-started/forms-in-react.md
similarity index 86%
rename from docs/react/getting-started/forms-in-react.md
rename to docs/getting-started/forms-in-react.md
index f08c598d7..2aa9021ad 100644
--- a/docs/react/getting-started/forms-in-react.md
+++ b/docs/getting-started/forms-in-react.md
@@ -24,6 +24,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<MyForm />);
 ```
 
+<BrowserWindow>
+    <form>
+      <label htmlFor="name">Enter your name: </label>
+      <input type="text" id="name" />
+    </form>
+</BrowserWindow>
+
 This will work as normal, the form will submit and the page will refresh.
 
 But this is generally not what we want to happen in React.
@@ -68,6 +75,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<MyForm />);
 ```
 
+<BrowserWindow>
+    <form>
+      <label htmlFor="name">Enter your name: </label>
+      <input type="text" id="name" />
+    </form>
+</BrowserWindow>
+
 ## Forms
 
 These docs are old and won’t be updated. Go to react.dev for the new React docs.
@@ -133,6 +147,19 @@ class NameForm extends React.Component {
 }
 ```
 
+<BrowserWindow> 
+    <form onSubmit={(event)=>{
+       event.preventDefault();
+        let name = event.target.elements.name.value;
+        alert(`A name was submitted: ${name}`);
+    }}>
+      <label >Name: </label>
+      <input type="text" id="name" required />
+      <br />
+      <input type="submit" />
+    </form>
+</BrowserWindow>
+
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
 With a controlled component, the input’s value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too or reset it from other event handlers.
@@ -183,6 +210,20 @@ class EssayForm extends React.Component {
   }
 }
 ```
+<BrowserWindow> 
+    <form onSubmit={(event)=>{
+       event.preventDefault();
+        let name = event.target.elements.name.value;
+        alert(`An essay was submitted: ${name}`);
+    }}>
+      <div style={{display:"flex",justifyContent:"flex-start",gap:"0.5rem",alignItems:"center"}}>
+          <label >Essay: </label>
+          <textarea type="text" id="name" required />
+      </div>
+      <br />
+      <input type="submit" />
+    </form>
+</BrowserWindow>
 
 Notice that `this.state.value` is initialized in the constructor so that the text area starts off with some text in it.
 
@@ -239,6 +280,26 @@ class FlavorForm extends React.Component {
 }
 ```
 
+<BrowserWindow> 
+    <form onSubmit={(event)=>{
+       event.preventDefault();
+        let name = event.target.elements.name.value;
+        alert(`Your favorite flavor is: ${name}`);
+    }}>
+      <div style={{display:"flex",justifyContent:"flex-start",gap:"0.5rem",alignItems:"center"}}>
+          <label >  Pick your favorite flavor: </label>
+          <select id="name" >
+            <option value="grapefruit">Grapefruit</option>
+            <option value="lime">Lime</option>
+            <option value="coconut">Coconut</option>
+            <option value="mango">Mango</option>
+          </select>
+      </div>
+      <br />
+      <input type="submit" />
+    </form>
+</BrowserWindow>
+
 Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
 
 ### Handling Multiple Inputs
diff --git a/docs/react/getting-started/getting-started.md b/docs/getting-started/getting-started.md
similarity index 100%
rename from docs/react/getting-started/getting-started.md
rename to docs/getting-started/getting-started.md
diff --git a/docs/react/getting-started/supported-browsers-features.md b/docs/getting-started/supported-browsers-features.md
similarity index 100%
rename from docs/react/getting-started/supported-browsers-features.md
rename to docs/getting-started/supported-browsers-features.md
diff --git a/docs/react/getting-started/updating-to-new-releases.md b/docs/getting-started/updating-to-new-releases.md
similarity index 100%
rename from docs/react/getting-started/updating-to-new-releases.md
rename to docs/getting-started/updating-to-new-releases.md
diff --git a/docs/hooks/_category_.json b/docs/hooks/_category_.json
new file mode 100644
index 000000000..5714ba148
--- /dev/null
+++ b/docs/hooks/_category_.json
@@ -0,0 +1,8 @@
+{
+    "label": "Hooks",
+    "position": 5,
+    "link": {
+      "type": "generated-index",
+      "description": "5 minutes to learn the most important RoadMap for React Mastery."
+    }
+  }
\ No newline at end of file
diff --git a/docs/hooks/useCallback.md b/docs/hooks/useCallback.md
new file mode 100644
index 000000000..25ab4d02d
--- /dev/null
+++ b/docs/hooks/useCallback.md
@@ -0,0 +1,47 @@
+---
+id: useCallback hook
+title: useCallback Hook Concept
+sidebar_label: useCallback Hook
+sidebar_position: 5
+tags: [react, create-react-app, useCallback, hooks, react-scripts, react-dom, react-app]
+---
+### useCallback
+
+**Explanation:**
+`useCallback` is used to memoize functions to prevent unnecessary renders in child components. It is particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
+
+When you call `useCallback`, you pass it a function and a dependency array. It returns a memoized version of the callback function that only changes if one of the dependencies has changed.
+
+**Example:**
+```jsx
+import React, { useState, useCallback } from 'react';
+
+function MemoizedCounter() {
+  const [count, setCount] = useState(0);
+  
+  // Memoize 'increment' function to prevent unnecessary renders
+  const increment = useCallback(() => {
+    setCount(count + 1);
+  }, [count]);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      {/* Button uses memoized 'increment' function */}
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+<BrowserWindow>
+    <div>
+       <p>You clicked <span id="display">0</span> times</p>
+       <button onClick={()=>{
+        let display=document.getElementById("display")
+        display.textContent=Number(display.textContent)+1
+       }}>Click me</button>
+    </div>
+</BrowserWindow>
+
+In this example, `useCallback` memoizes the `increment` function to ensure that it only changes when `count` changes. This optimization prevents unnecessary re-renders of `MemoizedCounter` when passed as a prop to child components.
diff --git a/docs/hooks/useContext.md b/docs/hooks/useContext.md
new file mode 100644
index 000000000..7093e508b
--- /dev/null
+++ b/docs/hooks/useContext.md
@@ -0,0 +1,37 @@
+---
+id: useContext hook
+title: useContext Hook Concept
+sidebar_label: useContext Hook
+sidebar_position: 3
+tags: [react, create-react-app, useContext, hooks, react-scripts, react-dom, react-app]
+---
+
+### useContext
+
+**Explanation:**
+`useContext` provides a way to pass data through the component tree without having to pass props down manually at every level. It allows you to access values from the nearest `Context.Provider` in the tree.
+
+When you call `useContext`, you pass it the context object that was created with `React.createContext()`. It returns the current context value for that context, determined by the nearest provider above the calling component in the tree.
+
+**Example:**
+```jsx
+import React, { useContext } from 'react';
+
+// Create a context object with a default value ('light')
+const ThemeContext = React.createContext('light');
+
+function ThemeComponent() {
+  // Use 'useContext' to access the current theme value ('light')
+  const theme = useContext(ThemeContext);
+
+  return <p>Current theme: {theme}</p>;
+}
+```
+
+<BrowserWindow>
+     <div>
+         <p>Current theme:<span id="Theme">light</span></p>
+     </div>
+</BrowserWindow>
+
+In this example, `ThemeComponent` uses `useContext` to consume the current theme value (`'light'`) provided by the nearest `ThemeContext.Provider` higher up in the component tree.
diff --git a/docs/hooks/useEffect-hook.md b/docs/hooks/useEffect-hook.md
new file mode 100644
index 000000000..f9d044417
--- /dev/null
+++ b/docs/hooks/useEffect-hook.md
@@ -0,0 +1,63 @@
+---
+id: useEffect-hook
+title: useEffect Hook Concept
+sidebar_label: useEffect Hook
+sidebar_position: 2
+tags: [react, create-react-app, useEffect, hooks, react-scripts, react-dom, react-app]
+---
+
+### useEffect
+
+**Explanation:**
+`useEffect` is used to perform side effects in function components. Side effects include data fetching, subscriptions, or manually changing the DOM. In class components, side effects were managed in lifecycle methods like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`.
+
+When you call `useEffect`, you pass it a function that contains the code for your side effect. This function runs after every render by default. You can also provide a dependency array (`[]`) to control when the effect runs based on changes in state or props.
+
+**Example:**
+
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function Timer() {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    // This function runs after every render
+    const interval = setInterval(() => {
+      // Update 'seconds' every 1000ms (1 second)
+      setSeconds(seconds => seconds + 1);
+    }, 1000);
+
+    // Return a cleanup function to clear the interval
+    return () => clearInterval(interval);
+  }, []); // Empty array means effect runs only on mount and unmount
+
+  return (
+    <div>
+      <p>Timer: {seconds} seconds</p>
+    </div>
+  );
+}
+```
+
+<BrowserWindow>
+  <div id="output_element" style={{display:"none"}}>
+    <p>Timer: <span id="Timer">0</span></p>
+  </div>
+  <button onClick={()=>{  
+       let output_element=document.getElementById("output_element")
+       output_element.style.display="block"
+       let hide_button=document.getElementById("hide_button")
+       hide_button.style.display="none"
+        setInterval(() => { 
+            let ele = document.getElementById("Timer");
+            if (ele) {
+              ele.textContent = Number(ele.textContent) + 1;
+            } else {
+              return;
+            } 
+        }, 1000)  
+  }} id="hide_button">click see the output</button>
+</BrowserWindow>
+
+In this example, `useEffect` is used to create a timer that updates the `seconds` state every second (`1000ms`). The cleanup function returned by `useEffect` clears the interval when the component unmounts or when `seconds` changes due to a dependency array (`[]`) change.
diff --git a/docs/hooks/useMemo.md b/docs/hooks/useMemo.md
new file mode 100644
index 000000000..603ee752d
--- /dev/null
+++ b/docs/hooks/useMemo.md
@@ -0,0 +1,59 @@
+---
+id: useMemo hook
+title: useMemo Hook Concept
+sidebar_label: useMemo Hook
+sidebar_position: 6
+tags: [react, create-react-app, useMemo, hooks, react-scripts, react-dom, react-app]
+---
+
+### useMemo
+
+**Explanation:**
+`useMemo` is used to memoize expensive calculations or computations so that they are only recomputed when necessary. It is similar to `useCallback`, but instead of memoizing functions, it memoizes the result of a computation.
+
+When you call `useMemo`, you pass it a function that performs the expensive computation and a dependency array. It returns the memoized value that only changes when one of the dependencies has changed.
+
+**Example:**
+```jsx
+import React, { useMemo, useState } from 'react';
+
+function MemoizedFactorial() {
+  const [number, setNumber] = useState(5);
+
+  // Memoize factorial calculation to optimize performance
+  const factorial = useMemo(() => {
+    let fact = 1;
+    for (let i = 1; i <= number; i++) {
+      fact *= i;
+    }
+    return fact;
+  }, [number]);
+
+  return (
+    <div>
+      <p>Factorial of {number} is: {factorial}</p>
+      {/* Input updates 'number' to recompute factorial */}
+      <input type="number" value={number} onChange={(e) => setNumber(Number(e.target.value))} />
+    </div>
+  );
+}
+```
+
+<BrowserWindow>
+      <div>
+          <p>Factorial of <span id="give_num"></span> is: <span id="output_num"></span></p>
+          <input type="number" onChange={(e) => {
+            let number=Number(e.target.value)
+            let give_num=document.getElementById("give_num")
+            let output_num=document.getElementById("output_num")
+            let fact = 1;
+            for (let i = 1; i <= number; i++) {
+            fact *= i;
+            }
+            give_num.textContent=number
+            output_num.textContent=fact
+          }} />
+      </div>
+</BrowserWindow>
+
+In this example, `useMemo` memoizes the `factorial` calculation based on the `number` state. It ensures that the factorial computation is only recalculated when `number` changes, optimizing performance by avoiding unnecessary computations on each render.
diff --git a/docs/hooks/useReducer.md b/docs/hooks/useReducer.md
new file mode 100644
index 000000000..55ae8eb36
--- /dev/null
+++ b/docs/hooks/useReducer.md
@@ -0,0 +1,62 @@
+---
+id: useReducer hook
+title: useReducer Hook Concept
+sidebar_label: useReducer Hook
+sidebar_position: 4
+tags: [react, create-react-app, useReducer, hooks, react-scripts, react-dom, react-app]
+---
+
+### useReducer
+
+**Explanation:**
+`useReducer` is an alternative to `useState` for managing complex state logic within a component. It is often preferable when you have state transitions that involve multiple sub-values or when the next state depends on the previous one.
+
+When you call `useReducer`, you pass it a reducer function and an initial state. It returns an array with the current state (`state`) and a dispatch function (`dispatch`) to trigger state updates based on action objects.
+
+**Example:**
+```jsx
+import React, { useReducer } from 'react';
+
+// Initial state with a 'count' property initialized to 0
+const initialState = { count: 0 };
+
+// Reducer function defines how state updates in response to actions
+function reducer(state, action) {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 }; // Increment 'count'
+    case 'decrement':
+      return { count: state.count - 1 }; // Decrement 'count'
+    default:
+      throw new Error(); // Throw an error for unknown actions
+  }
+}
+
+function Counter() {
+  // Use 'useReducer' with 'reducer' function and 'initialState'
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+      {/* Buttons dispatch 'increment' and 'decrement' actions */}
+      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
+      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
+    </div>
+  );
+}
+```
+
+<BrowserWindow> 
+         <p>Count: <span id="count">0</span></p>
+          <button onClick={() =>{
+            let count=document.getElementById("count")
+            count.textContent=Number(count.textContent)+1
+          }}>Increment</button>
+      <button onClick={() => {
+             let count=document.getElementById("count")
+             count.textContent=Number(count.textContent)-1
+      }}>Decrement</button> 
+</BrowserWindow>
+
+In this example, `useReducer` manages state updates for `count`. `dispatch` is used to trigger actions (`{ type: 'increment' }` or `{ type: 'decrement' }`), which are processed by the `reducer` function to compute the next state.
diff --git a/docs/hooks/useRef.md b/docs/hooks/useRef.md
new file mode 100644
index 000000000..f3937e129
--- /dev/null
+++ b/docs/hooks/useRef.md
@@ -0,0 +1,42 @@
+---
+id: useRef hook
+title: useRef Hook Concept
+sidebar_label: useRef Hook
+sidebar_position: 7
+tags: [react, create-react-app, useRef, hooks, react-scripts, react-dom, react-app]
+---
+
+### useRef
+
+**Explanation:**
+`useRef` is used to maintain mutable references to elements or values across renders without triggering a re-render. It's particularly useful for accessing the DOM elements directly or storing any mutable value that persists for the entire lifetime of the component.
+
+When you call `useRef`, it returns a mutable `ref` object whose `.current` property is initialized to the passed argument (`null` in the absence of an argument). This property can hold any mutable value.
+
+**Example:**
+```jsx
+import React, { useRef } from 'react';
+
+function FocusInput() {
+  // Create a 'ref' object initialized to 'null'
+  const inputRef = useRef(null);
+
+  // Function to focus on the input element
+  const handleClick = () => {
+    inputRef.current.focus(); // Access and focus the input element
+  };
+
+  return (
+    <div>
+      {/* Assign 'inputRef' to the input element */}
+      <input ref={inputRef}
+
+ type="text" />
+      {/* Button uses 'handleClick' function to focus on input */}
+      <button onClick={handleClick}>Focus Input</button>
+    </div>
+  );
+}
+```
+
+In this example, `useRef` is used to create a reference (`inputRef`) to the input element. When the button is clicked, `handleClick` function accesses `inputRef.current` to focus on the input element without causing a re-render of the component.
diff --git a/docs/hooks/useState-hook.md b/docs/hooks/useState-hook.md
new file mode 100644
index 000000000..716d0c199
--- /dev/null
+++ b/docs/hooks/useState-hook.md
@@ -0,0 +1,46 @@
+---
+id: useState hook
+title: useState Hook Concept
+sidebar_label: useState Hook
+sidebar_position: 1
+tags: [react, create-react-app, useState, hooks, react-scripts, react-dom, react-app]
+---
+### useState
+
+**Explanation:**
+`useState` is a fundamental hook in React that allows functional components to manage state. State refers to data that changes over time and causes a component to rerender when updated. Prior to hooks, state management was exclusive to class components using `this.state`.
+
+When you call `useState(initialState)`, it returns an array with two elements:
+- The current state (`count` in our example).
+- A function (`setCount`) that allows you to update the state.
+
+**Example:**
+```jsx
+import React, { useState } from 'react';
+
+function Counter() {
+  // Declare a state variable named 'count' initialized to 0
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      {/* On button click, update 'count' using 'setCount' */}
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+<BrowserWindow>
+    <div>
+       <p>You clicked <span id="display">0</span> times</p>
+       <button onClick={()=>{
+        let display=document.getElementById("display")
+        display.textContent=Number(display.textContent)+1
+       }}>Click me</button>
+    </div>
+</BrowserWindow>
+
+In this example, `count` is the state variable initialized to 0, and `setCount` is the function used to update `count`. When the button is clicked, `setCount` is called with the new value of `count + 1`, causing the component to rerender with the updated count displayed.
\ No newline at end of file
diff --git a/docs/react/img/getting-started-react.svg b/docs/img/getting-started-react.svg
similarity index 100%
rename from docs/react/img/getting-started-react.svg
rename to docs/img/getting-started-react.svg
diff --git a/docs/react/img/local-host-2.gif b/docs/img/local-host-2.gif
similarity index 100%
rename from docs/react/img/local-host-2.gif
rename to docs/img/local-host-2.gif
diff --git a/docs/react/img/logo.svg b/docs/img/logo.svg
similarity index 100%
rename from docs/react/img/logo.svg
rename to docs/img/logo.svg
diff --git a/docs/react/img/react.svg b/docs/img/react.svg
similarity index 100%
rename from docs/react/img/react.svg
rename to docs/img/react.svg
diff --git a/docs/intro-react.md b/docs/intro-react.md
new file mode 100644
index 000000000..3b0ee59d5
--- /dev/null
+++ b/docs/intro-react.md
@@ -0,0 +1,52 @@
+---
+id: react-intro
+title: Welcome to React
+sidebar_label: Welcome
+sidebar_position: 2
+description: Development and implementation the API of interaction of two sites 
+tags: [React, JavaScript library, User interfaces, Virtual DOM, Declarative syntax, UI components, Web development, Front-end, Single-page applications, Performance optimization, State management, Component-based architecture, JavaScript framework]
+---
+
+React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and efficiently update and render them as the data changes. With its virtual DOM and declarative syntax, React makes it easier to build interactive and performant web applications.
+
+## Getting Started with React
+
+To get started with React, you can follow these steps:
+
+**1. Install Node.js:** React requires Node.js, so make sure you have it installed on your machine. You can download and install Node.js from the official website: [https://nodejs.org](https://nodejs.org)
+
+**2. Create a New React Project:** Open your terminal or command prompt and run the following command to create a new React project using Create React App:
+
+   ```sh
+   npx create-react-app my-app
+   ```
+
+   This will create a new directory called `my-app` with a basic React project structure and configuration.
+
+**3. Run the Development Server:** Navigate to the project directory (`my-app`) and start the development server by running the following command:
+
+   ```sh
+   cd my-app
+   npm start
+   ```
+
+   This will start the development server and open your React app in a web browser. You can make changes to the code in the project and see the live updates in the browser.
+
+**4. Learn React Fundamentals:** Once your project is set up, you can start learning the fundamentals of React. The official React documentation is an excellent resource to begin with: [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html)
+
+**5. Build Your React App:** With the knowledge of React fundamentals, you can start building your own React applications. Use React components to structure your UI, manage state and props, and handle user interactions. Combine React with other libraries and tools to create powerful and interactive web applications.
+
+## Resources for Learning React
+
+Here are some additional resources to help you learn React:
+
+- **Official React Documentation:** [https://reactjs.org/docs](https://reactjs.org/docs/getting-started.html)
+- **React Tutorial:** [https://reactjs.org/tutorial/tutorial.html](https://reactjs.org/tutorial/tutorial.html)
+- **React Hooks Documentation:** [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html)
+- **React Router Documentation:** [https://reactrouter.com](https://reactrouter.com)
+- **React Context API Documentation:** [https://reactjs.org/docs/context.html](https://reactjs.org/docs/context.html)
+- **Awesome React:** [https://github.com/enaqx/awesome-react](https://github.com/enaqx/awesome-react)
+
+Remember, practice is key to mastering React. Explore and build various projects to gain hands-on experience and improve your React skills.
+
+Start your journey with React today and enjoy building awesome web applications with ease! If you have any questions or need assistance, feel free to reach out to us. We're here to help you succeed with React.
\ No newline at end of file
diff --git a/docs/react/assets/Frontend-Roadmap.pdf b/docs/react/assets/Frontend-Roadmap.pdf
deleted file mode 100644
index 7c40f8acf..000000000
Binary files a/docs/react/assets/Frontend-Roadmap.pdf and /dev/null differ
diff --git a/docs/react/assets/ReactJS-Guide.pdf b/docs/react/assets/ReactJS-Guide.pdf
deleted file mode 100644
index 988611d76..000000000
Binary files a/docs/react/assets/ReactJS-Guide.pdf and /dev/null differ
diff --git a/docs/react/assets/audio.mp3 b/docs/react/assets/audio.mp3
deleted file mode 100644
index 27cc384fd..000000000
Binary files a/docs/react/assets/audio.mp3 and /dev/null differ
diff --git a/docs/react/hooks/useCallback.md b/docs/react/hooks/useCallback.md
index 8d8defb72..25ab4d02d 100644
--- a/docs/react/hooks/useCallback.md
+++ b/docs/react/hooks/useCallback.md
@@ -34,4 +34,14 @@ function MemoizedCounter() {
 }
 ```
 
+<BrowserWindow>
+    <div>
+       <p>You clicked <span id="display">0</span> times</p>
+       <button onClick={()=>{
+        let display=document.getElementById("display")
+        display.textContent=Number(display.textContent)+1
+       }}>Click me</button>
+    </div>
+</BrowserWindow>
+
 In this example, `useCallback` memoizes the `increment` function to ensure that it only changes when `count` changes. This optimization prevents unnecessary re-renders of `MemoizedCounter` when passed as a prop to child components.
diff --git a/docs/react/hooks/useContext.md b/docs/react/hooks/useContext.md
index 2ded7d2b3..7093e508b 100644
--- a/docs/react/hooks/useContext.md
+++ b/docs/react/hooks/useContext.md
@@ -28,4 +28,10 @@ function ThemeComponent() {
 }
 ```
 
+<BrowserWindow>
+     <div>
+         <p>Current theme:<span id="Theme">light</span></p>
+     </div>
+</BrowserWindow>
+
 In this example, `ThemeComponent` uses `useContext` to consume the current theme value (`'light'`) provided by the nearest `ThemeContext.Provider` higher up in the component tree.
diff --git a/docs/react/hooks/useEffect-hook.md b/docs/react/hooks/useEffect-hook.md
index 285eb3885..f9d044417 100644
--- a/docs/react/hooks/useEffect-hook.md
+++ b/docs/react/hooks/useEffect-hook.md
@@ -1,5 +1,5 @@
 ---
-id: useEffect hook
+id: useEffect-hook
 title: useEffect Hook Concept
 sidebar_label: useEffect Hook
 sidebar_position: 2
@@ -14,6 +14,7 @@ tags: [react, create-react-app, useEffect, hooks, react-scripts, react-dom, reac
 When you call `useEffect`, you pass it a function that contains the code for your side effect. This function runs after every render by default. You can also provide a dependency array (`[]`) to control when the effect runs based on changes in state or props.
 
 **Example:**
+
 ```jsx
 import React, { useState, useEffect } from 'react';
 
@@ -39,4 +40,24 @@ function Timer() {
 }
 ```
 
+<BrowserWindow>
+  <div id="output_element" style={{display:"none"}}>
+    <p>Timer: <span id="Timer">0</span></p>
+  </div>
+  <button onClick={()=>{  
+       let output_element=document.getElementById("output_element")
+       output_element.style.display="block"
+       let hide_button=document.getElementById("hide_button")
+       hide_button.style.display="none"
+        setInterval(() => { 
+            let ele = document.getElementById("Timer");
+            if (ele) {
+              ele.textContent = Number(ele.textContent) + 1;
+            } else {
+              return;
+            } 
+        }, 1000)  
+  }} id="hide_button">click see the output</button>
+</BrowserWindow>
+
 In this example, `useEffect` is used to create a timer that updates the `seconds` state every second (`1000ms`). The cleanup function returned by `useEffect` clears the interval when the component unmounts or when `seconds` changes due to a dependency array (`[]`) change.
diff --git a/docs/react/hooks/useMemo.md b/docs/react/hooks/useMemo.md
index 4395bbfc9..603ee752d 100644
--- a/docs/react/hooks/useMemo.md
+++ b/docs/react/hooks/useMemo.md
@@ -39,4 +39,21 @@ function MemoizedFactorial() {
 }
 ```
 
+<BrowserWindow>
+      <div>
+          <p>Factorial of <span id="give_num"></span> is: <span id="output_num"></span></p>
+          <input type="number" onChange={(e) => {
+            let number=Number(e.target.value)
+            let give_num=document.getElementById("give_num")
+            let output_num=document.getElementById("output_num")
+            let fact = 1;
+            for (let i = 1; i <= number; i++) {
+            fact *= i;
+            }
+            give_num.textContent=number
+            output_num.textContent=fact
+          }} />
+      </div>
+</BrowserWindow>
+
 In this example, `useMemo` memoizes the `factorial` calculation based on the `number` state. It ensures that the factorial computation is only recalculated when `number` changes, optimizing performance by avoiding unnecessary computations on each render.
diff --git a/docs/react/hooks/useReducer.md b/docs/react/hooks/useReducer.md
index 3cbf42cb1..55ae8eb36 100644
--- a/docs/react/hooks/useReducer.md
+++ b/docs/react/hooks/useReducer.md
@@ -47,4 +47,16 @@ function Counter() {
 }
 ```
 
+<BrowserWindow> 
+         <p>Count: <span id="count">0</span></p>
+          <button onClick={() =>{
+            let count=document.getElementById("count")
+            count.textContent=Number(count.textContent)+1
+          }}>Increment</button>
+      <button onClick={() => {
+             let count=document.getElementById("count")
+             count.textContent=Number(count.textContent)-1
+      }}>Decrement</button> 
+</BrowserWindow>
+
 In this example, `useReducer` manages state updates for `count`. `dispatch` is used to trigger actions (`{ type: 'increment' }` or `{ type: 'decrement' }`), which are processed by the `reducer` function to compute the next state.
diff --git a/docs/react/hooks/useState-hook.md b/docs/react/hooks/useState-hook.md
index 896fc3164..716d0c199 100644
--- a/docs/react/hooks/useState-hook.md
+++ b/docs/react/hooks/useState-hook.md
@@ -33,5 +33,14 @@ function Counter() {
   );
 }
 ```
+<BrowserWindow>
+    <div>
+       <p>You clicked <span id="display">0</span> times</p>
+       <button onClick={()=>{
+        let display=document.getElementById("display")
+        display.textContent=Number(display.textContent)+1
+       }}>Click me</button>
+    </div>
+</BrowserWindow>
 
 In this example, `count` is the state variable initialized to 0, and `setCount` is the function used to update `count`. When the button is clicked, `setCount` is called with the new value of `count + 1`, causing the component to rerender with the updated count displayed.
\ No newline at end of file
diff --git a/docs/react/styles-and-assets/_category_.json b/docs/styles-and-assets/_category_.json
similarity index 100%
rename from docs/react/styles-and-assets/_category_.json
rename to docs/styles-and-assets/_category_.json
diff --git a/docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md b/docs/styles-and-assets/adding-a-css-modules-stylesheet.md
similarity index 100%
rename from docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md
rename to docs/styles-and-assets/adding-a-css-modules-stylesheet.md
diff --git a/docs/react/styles-and-assets/adding-a-sass-stylesheet.md b/docs/styles-and-assets/adding-a-sass-stylesheet.md
similarity index 100%
rename from docs/react/styles-and-assets/adding-a-sass-stylesheet.md
rename to docs/styles-and-assets/adding-a-sass-stylesheet.md
diff --git a/docs/react/styles-and-assets/adding-a-stylesheet.md b/docs/styles-and-assets/adding-a-stylesheet.md
similarity index 100%
rename from docs/react/styles-and-assets/adding-a-stylesheet.md
rename to docs/styles-and-assets/adding-a-stylesheet.md
diff --git a/docs/react/styles-and-assets/adding-css-reset.md b/docs/styles-and-assets/adding-css-reset.md
similarity index 100%
rename from docs/react/styles-and-assets/adding-css-reset.md
rename to docs/styles-and-assets/adding-css-reset.md
diff --git a/docs/react/styles-and-assets/adding-images-fonts-and-files.md b/docs/styles-and-assets/adding-images-fonts-and-files.md
similarity index 100%
rename from docs/react/styles-and-assets/adding-images-fonts-and-files.md
rename to docs/styles-and-assets/adding-images-fonts-and-files.md
diff --git a/docs/react/styles-and-assets/code-splitting.md b/docs/styles-and-assets/code-splitting.md
similarity index 100%
rename from docs/react/styles-and-assets/code-splitting.md
rename to docs/styles-and-assets/code-splitting.md
diff --git a/docs/react/styles-and-assets/loading-graphql-files.md b/docs/styles-and-assets/loading-graphql-files.md
similarity index 100%
rename from docs/react/styles-and-assets/loading-graphql-files.md
rename to docs/styles-and-assets/loading-graphql-files.md
diff --git a/docs/react/styles-and-assets/post-processing-css.md b/docs/styles-and-assets/post-processing-css.md
similarity index 100%
rename from docs/react/styles-and-assets/post-processing-css.md
rename to docs/styles-and-assets/post-processing-css.md
diff --git a/docs/react/styles-and-assets/using-the-public-folder.md b/docs/styles-and-assets/using-the-public-folder.md
similarity index 100%
rename from docs/react/styles-and-assets/using-the-public-folder.md
rename to docs/styles-and-assets/using-the-public-folder.md
diff --git a/docs/react/support/troubleshooting.md b/docs/support/troubleshooting.md
similarity index 100%
rename from docs/react/support/troubleshooting.md
rename to docs/support/troubleshooting.md
diff --git a/docs/react/testing/_category_.json b/docs/testing/_category_.json
similarity index 100%
rename from docs/react/testing/_category_.json
rename to docs/testing/_category_.json
diff --git a/docs/react/testing/debugging-tests.md b/docs/testing/debugging-tests.md
similarity index 100%
rename from docs/react/testing/debugging-tests.md
rename to docs/testing/debugging-tests.md
diff --git a/docs/react/testing/running-tests.md b/docs/testing/running-tests.md
similarity index 100%
rename from docs/react/testing/running-tests.md
rename to docs/testing/running-tests.md