Skip to content

Commit ce8001c

Browse files
sivaprasath2004sivaprasath2004
committed
finish
1 parent 3c39cca commit ce8001c

File tree

10 files changed

+244
-0
lines changed

10 files changed

+244
-0
lines changed

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,31 @@ const DataFetcher = () => {
144144
export default DataFetcher;
145145
```
146146

147+
<BrowserWindow>
148+
<div id="display_output_4" style={{display:"none"}}>
149+
<h2>Fetched Data</h2>
150+
<p id="load_ing" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
151+
<ul id="u_l"></ul>
152+
</div>
153+
<button onClick={()=>{
154+
let display_output_4=documet.getElementById("display_output_4")
155+
display_output_4.style.display="block"
156+
let btn4=document.getElementById("btn4")
157+
btn4.style.display="none"
158+
setTimeout(()=>{
159+
if(document.getElementById("load_ing")?.style){document.getElementById("load_ing").style.display="none";}
160+
[{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=>{
161+
let li=document.createElement("li")
162+
li.textContent=item.name
163+
let ul=document.getElementById("u_l")
164+
if(ul){
165+
ul.appendChild(li)
166+
}
167+
})
168+
},1500)
169+
}} id="btn4">click to see output</button>
170+
</BrowserWindow>
171+
147172
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.
148173

149174
### Step 4: Using the DataFetcher Component

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,32 @@ const App = () => {
9191
export default App;
9292
```
9393

94+
<BrowserWindow>
95+
<div id="output_ele_3" style={{display:"none"}}>
96+
<h2>My React App</h2>
97+
<p id="loa_d_ing" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
98+
<ul id="u_l_"></ul>
99+
</div>
100+
<button id="output_btn3" onClick={()=>{
101+
let output_ele_3=document.getElementById("output_ele_3")
102+
output_ele_3.style.display="block"
103+
let output_btn3=document.getElementById("output_btn3")
104+
output_btn3.style.display="none"
105+
setTimeout(()=>{
106+
let ele=document.getElementById("loa_d_ing")
107+
if(ele){ele.style.display="none";}
108+
[{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=>{
109+
let li=document.createElement("li")
110+
li.textContent=item.name
111+
let ul=document.getElementById("u_l_")
112+
if(ul){
113+
ul.appendChild(li)
114+
}
115+
})
116+
},2500)
117+
}}>click to view output</button>
118+
</BrowserWindow>
119+
94120
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.
95121

96122
### Sending Data to the Backend
@@ -144,6 +170,37 @@ const App = () => {
144170
export default App;
145171
```
146172

173+
174+
<BrowserWindow>
175+
<div>
176+
<h2>My React App</h2>
177+
<form style={{display:"flex",flexDirection:"column",gap:"0.4rem"}} onSubmit={(event)=>{
178+
event.preventDefault();
179+
let dispaly_data=document.getElementById("dispaly_data")
180+
let li=document.createElement("li")
181+
li.style.display="flex"
182+
li.style.flexDirection="column"
183+
li.style.border="0.1rem solid"
184+
li.style.margin="0.5rem"
185+
li.style.padding="0.5rem"
186+
let span1=document.createElement("span")
187+
let span2=document.createElement("span")
188+
span1.textContent=`Title: ${event.target.title.value}`
189+
span2.textContent=`body: ${event.target.body.value}`
190+
li.appendChild(span1)
191+
li.appendChild(span2)
192+
dispaly_data.appendChild(li)
193+
}}>
194+
<input type="text" name="title" placeholder="Enter title" required style={{padding:"0.5rem 2rem 0.5rem 0.5rem"}}/>
195+
<textarea name="body" placeholder="Enter body" required style={{padding:"0.5rem 2rem 0.5rem 0.5rem"}}/>
196+
<button type="submit" style={{padding:"0.8rem",width:"200px",background:"rgb(0,123,255)",border:"none",borderRadius:"0.5rem",color:"white"}}>Create Post</button>
197+
</form>
198+
<ul id="dispaly_data">
199+
<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>
200+
</ul>
201+
</div>
202+
</BrowserWindow>
203+
147204
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.
148205

149206
## Conclusion

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,32 @@ function App() {
160160
export default App;
161161
```
162162

163+
<BrowserWindow>
164+
<div id="output_element2" style={{display:"none"}}>
165+
<h1>Welcome to My React app</h1>
166+
<p id="loading" style={{fontFamily:"monospace",textAlign:'center',fontWeight:"600",fontSize:"1.2rem"}}>Fetching....</p>
167+
<ul id="ul"></ul>
168+
</div>
169+
<button id="output_btn_2" onClick={()=>{
170+
let output_element2=document.getElementById("output_element2")
171+
output_element2.style.display="block"
172+
let output_btn_2=document.getElementById("output_btn_2")
173+
output_btn_2.style.display="none"
174+
setTimeout(()=>{
175+
let ele=document.getElementById("loading")
176+
if(ele){ele.style.display="none";}
177+
[{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=>{
178+
let li=document.createElement("li")
179+
li.textContent=item.name
180+
let ul=document.getElementById("ul")
181+
if(ul){
182+
ul.appendChild(li)
183+
}
184+
})
185+
},2500)
186+
}}>click to see output</button>
187+
</BrowserWindow>
188+
163189
## "Invalid Host Header" Error and How to Handle It
164190

165191
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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
2424
root.render(<MyForm />);
2525
```
2626

27+
<BrowserWindow>
28+
<form>
29+
<label htmlFor="name">Enter your name: </label>
30+
<input type="text" id="name" />
31+
</form>
32+
</BrowserWindow>
33+
2734
This will work as normal, the form will submit and the page will refresh.
2835

2936
But this is generally not what we want to happen in React.
@@ -68,6 +75,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
6875
root.render(<MyForm />);
6976
```
7077

78+
<BrowserWindow>
79+
<form>
80+
<label htmlFor="name">Enter your name: </label>
81+
<input type="text" id="name" />
82+
</form>
83+
</BrowserWindow>
84+
7185
## Forms
7286

7387
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 {
133147
}
134148
```
135149

150+
<BrowserWindow>
151+
<form onSubmit={(event)=>{
152+
event.preventDefault();
153+
let name = event.target.elements.name.value;
154+
alert(`A name was submitted: ${name}`);
155+
}}>
156+
<label >Name: </label>
157+
<input type="text" id="name" required />
158+
<br />
159+
<input type="submit" />
160+
</form>
161+
</BrowserWindow>
162+
163+
136164
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.
137165

138166
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 {
184212
}
185213
```
186214

215+
<BrowserWindow>
216+
<form onSubmit={(event)=>{
217+
event.preventDefault();
218+
let name = event.target.elements.name.value;
219+
alert(`An essay was submitted: ${name}`);
220+
}}>
221+
<div style={{display:"flex",justifyContent:"flex-start",gap:"0.5rem",alignItems:"center"}}>
222+
<label >Essay: </label>
223+
<textarea type="text" id="name" required />
224+
</div>
225+
<br />
226+
<input type="submit" />
227+
</form>
228+
</BrowserWindow>
229+
187230
Notice that `this.state.value` is initialized in the constructor so that the text area starts off with some text in it.
188231

189232
### The `<select>` Tag
@@ -239,6 +282,26 @@ class FlavorForm extends React.Component {
239282
}
240283
```
241284

285+
<BrowserWindow>
286+
<form onSubmit={(event)=>{
287+
event.preventDefault();
288+
let name = event.target.elements.name.value;
289+
alert(`Your favorite flavor is: ${name}`);
290+
}}>
291+
<div style={{display:"flex",justifyContent:"flex-start",gap:"0.5rem",alignItems:"center"}}>
292+
<label > Pick your favorite flavor: </label>
293+
<select id="name" >
294+
<option value="grapefruit">Grapefruit</option>
295+
<option value="lime">Lime</option>
296+
<option value="coconut">Coconut</option>
297+
<option value="mango">Mango</option>
298+
</select>
299+
</div>
300+
<br />
301+
<input type="submit" />
302+
</form>
303+
</BrowserWindow>
304+
242305
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.
243306

244307
### Handling Multiple Inputs

‎docs/react/hooks/useCallback.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,14 @@ function MemoizedCounter() {
3333
);
3434
}
3535
```
36+
<BrowserWindow>
37+
<div>
38+
<p>You clicked <span id="display">0</span> times</p>
39+
<button onClick={()=>{
40+
let display=document.getElementById("display")
41+
display.textContent=Number(display.textContent)+1
42+
}}>Click me</button>
43+
</div>
44+
</BrowserWindow>
3645

3746
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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,10 @@ function ThemeComponent() {
2727
return <p>Current theme: {theme}</p>;
2828
}
2929
```
30+
<BrowserWindow>
31+
<div>
32+
<p>Current theme:<span id="Theme">light</span></p>
33+
</div>
34+
</BrowserWindow>
3035

3136
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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,24 @@ function Timer() {
3939
}
4040
```
4141

42+
<BrowserWindow>
43+
<div id="output_ele_1" style={{display:"none"}}>
44+
<p>Timer: <span id="Timer" >0</span></p>
45+
</div>
46+
<button id="output_btn_1" onClick={()=>{
47+
let output_ele_1=document.getElementById("output_ele_1")
48+
output_ele_1.style.display="block"
49+
let output_btn_1=document.getElementById("output_btn_1")
50+
output_btn_1.style.display="none"
51+
setInterval(() => {
52+
if(document.getElementById("Timer")){
53+
document.getElementById("Timer").textContent = Number(document.getElementById("Timer").textContent)+1
54+
}
55+
else{
56+
return
57+
}
58+
}, 1000)
59+
}}>click to view output</button>
60+
</BrowserWindow>
61+
4262
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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,21 @@ function MemoizedFactorial() {
3939
}
4040
```
4141

42+
<BrowserWindow>
43+
<div>
44+
<p>Factorial of <span id="give_num"></span> is: <span id="output_num"></span></p>
45+
<input type="number" onChange={(e) => {
46+
let number=Number(e.target.value)
47+
let give_num=document.getElementById("give_num")
48+
let output_num=document.getElementById("output_num")
49+
let fact = 1;
50+
for (let i = 1; i <= number; i++) {
51+
fact *= i;
52+
}
53+
give_num.textContent=number
54+
output_num.textContent=fact
55+
}} />
56+
</div>
57+
</BrowserWindow>
58+
4259
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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,16 @@ function Counter() {
4747
}
4848
```
4949

50+
<BrowserWindow>
51+
<p>Count: <span id="count">0</span></p>
52+
<button onClick={() =>{
53+
let count=document.getElementById("count")
54+
count.textContent=Number(count.textContent)+1
55+
}}>Increment</button>
56+
<button onClick={() => {
57+
let count=document.getElementById("count")
58+
count.textContent=Number(count.textContent)-1
59+
}}>Decrement</button>
60+
</BrowserWindow>
61+
5062
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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,14 @@ function Counter() {
3434
}
3535
```
3636

37+
<BrowserWindow>
38+
<div>
39+
<p>You clicked <span id="display">0</span> times</p>
40+
<button onClick={()=>{
41+
let display=document.getElementById("display")
42+
display.textContent=Number(display.textContent)+1
43+
}}>Click me</button>
44+
</div>
45+
</BrowserWindow>
46+
3747
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.

0 commit comments

Comments
 (0)