[Feature]: Add Output in React.Js Course in Docs section

docs/react/back-end-integration/integrating-with-an-api-backend.md

@@ -91,6 +91,29 @@ const App = () => {
 export default App;
 ```
 
+<BrowserWindow>
+     <div>
+     <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>
+          <script>
+            document.addEventListener("DOMContentLoaded", (event) => {
+              setTimeout(()=>{
+              if(document.getElementById("loa_d_ing")?.style){document.getElementById("loa_d_ing").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)
+            })
+          </script>
+     </div>
+</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 +157,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>
@@ -149,6 +172,3 @@ In this code, we added a form with inputs for the title and body of the post. Wh
 ## Conclusion
 
 Congratulations! You've successfully integrated your React app with an API backend. You can now fetch data from the backend and send data to it, enabling your app to interact with a server and provide a richer user experience.
-
-Remember, this is just the beginning of your journey into building powerful React apps with backend integration. As you progress, you'll encounter more complex scenarios and additional features to implement. Keep exploring and building, and happy coding!
-

docs/react/back-end-integration/proxying-api-requests-in-development.md

@@ -233,4 +233,4 @@ Congratulations! You've successfully learned how to proxy API requests during de
 
 Whether you choose the built-in `proxy` field or the more flexible manual setup, understanding how to handle API requests effectively will boost your productivity and make building React apps a delightful experience.
 
-Now that you've mastered proxying, you're ready to build amazing apps with seamless frontend-backend communication. Keep coding and have fun!
+Now that you've mastered proxying, you're ready to build amazing apps with seamless frontend-backend communication. Keep coding and have fun!

docs/react/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

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.

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.

docs/react/hooks/useEffect-hook.md

@@ -38,5 +38,23 @@ function Timer() {
   );
 }
 ```
+<BrowserWindow>
+    <div>
+       <p>Timer: <span id="Timer" >0</span></p>
+       <script>
+        document.addEventListener("DOMContentLoaded", () => { 
+            setInterval(() => { 
+                if(document.getElementById("Timer")){
+                document.getElementById("Timer").textContent = Number(document.getElementById("Timer").textContent)+1 
+                }
+                else{
+                  return 
+                }
+            }, 1000) 
+        })
+    </script>
+    </div>
+</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.

docs/react/hooks/useMemo.md

@@ -6,9 +6,6 @@ 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.
@@ -31,12 +28,32 @@ function MemoizedFactorial() {
 
   return (
     <div>
+      <span>Enter a number to calculate its factorial: </span>
+      <input type="number" value={number} onChange={(e) => setNumber(Number(e.target.value))} />      
       <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>      
+        <span>Enter a number to calculate its factorial: </span>
+          <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
+          }} />
+            <br />
+            <br />
+          <p>Factorial of <span id="give_num"> </span> is: <span id="output_num"> </span></p>
+      </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.

docs/react/hooks/useReducer.md

@@ -47,4 +47,14 @@ function Counter() {
 }
 ```
 
+<BrowserWindow> 
+         <p>Count: <span id="countValue">0</span></p>
+          <button onClick={() =>{
+            document.getElementById("countValue").textContent=Number(document.getElementById("countValue").textContent)+1
+          }}>Increment</button> &nbsp;
+      <button onClick={() => {
+             document.getElementById("countValue").textContent=Number(document.getElementById("countValue").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.

docs/react/hooks/useState-hook.md

@@ -33,5 +33,11 @@ function Counter() {
   );
 }
 ```
+<BrowserWindow>
+    <div>
+       <p>You clicked <span id="displayCount">0</span> times</p>
+       <button onClick={()=>{document.getElementById("displayCount").textContent=Number(document.getElementById("displayCount").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.
+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.