Merge pull request #3984 from sivaprasath2004/sivaprasath-issues-closes-3922

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

Author: ajay-dhangar

docs/react/back-end-integration/fetching-data-with-ajax-requests.md

@@ -144,6 +144,31 @@ const DataFetcher = () => {
 export default DataFetcher;
 ```
 
+<BrowserWindow>
+     <div id="display_output_4" 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 onClick={()=>{
+      let display_output_4=documet.getElementById("display_output_4")
+      display_output_4.style.display="block"
+      let btn4=document.getElementById("btn4")
+      btn4.style.display="none"
+       setTimeout(()=>{
+              if(document.getElementById("load_ing")?.style){document.getElementById("load_ing").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) 
+     }} id="btn4">click to see 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

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

@@ -91,6 +91,32 @@ const App = () => {
 export default App;
 ```
 
+<BrowserWindow>
+     <div id="output_ele_3" 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="output_btn3" onClick={()=>{
+       let output_ele_3=document.getElementById("output_ele_3")
+       output_ele_3.style.display="block"
+       let output_btn3=document.getElementById("output_btn3")
+       output_btn3.style.display="none"
+       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 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
@@ -144,6 +170,37 @@ 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

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

@@ -160,6 +160,32 @@ 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="output_btn_2" onClick={()=>{
+          let output_element2=document.getElementById("output_element2")
+          output_element2.style.display="block"
+          let output_btn_2=document.getElementById("output_btn_2")
+          output_btn_2.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 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.

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,20 @@ 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.
@@ -184,6 +212,21 @@ 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.
 
 ### The `<select>` Tag
@@ -239,6 +282,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

@@ -33,5 +33,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

@@ -27,5 +27,10 @@ function ThemeComponent() {
   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.

docs/react/hooks/useEffect-hook.md

@@ -39,4 +39,24 @@ function Timer() {
 }
 ```
 
+<BrowserWindow>
+    <div id="output_ele_1" style={{display:"none"}}>
+       <p>Timer: <span id="Timer" >0</span></p>
+    </div>
+    <button id="output_btn_1" onClick={()=>{
+        let output_ele_1=document.getElementById("output_ele_1")
+        output_ele_1.style.display="block"
+        let output_btn_1=document.getElementById("output_btn_1")
+        output_btn_1.style.display="none"
+        setInterval(() => { 
+                if(document.getElementById("Timer")){
+                document.getElementById("Timer").textContent = Number(document.getElementById("Timer").textContent)+1 
+                }
+                else{
+                  return 
+                }
+            }, 1000) 
+    }}>click to view 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.

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.

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.

docs/react/hooks/useState-hook.md

@@ -34,4 +34,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.