Bilkul, samajhne mein koi dikkat nahi, main aapko bilkul basic se samjhata hoon.

React Component kya hota hai?

React ek JavaScript library hai, jiska use hum UI (User Interface) banane ke liye karte hain.
Ismein hum components banate hain. Har component ek independent unit hota hai jisme
hum apna code likhte hain.

Aapka Code kis cheez ka hai?

Aapka jo code hai, wo ek CRUD Application (Create, Read, Update, Delete) ka hai. Isme
hum users ka data add, update, delete, aur view kar sakte hain.

CRUD ka matlab hai:

● Create: Naye users ka data add karna.

● Read: Pehle se added users ko dekhna.
● Update: Pehle se added user ka data update karna.
● Delete: Kisi user ka data delete karna.

Code ka breakdown:

1. Constructor
js
Copy code
constructor(props) {
super(props);
this.state = {
users: [],
userName: '',
userFatherName: '',
userMotherName: '',
userEmail: '',
userDOB: '',
editId: null,
};
}

● Ye function class component ke constructor me likha gaya hai.

● this.state ek object hota hai jisme hum apne data ko store karte hain. Jab bhi
hum data ko update karte hain, React ko batata hai ki UI ko update karna hai.
○ users: Ye ek list hai, jo users ke data ko rakhega.
○ userName, userFatherName, userMotherName, userEmail,
userDOB: Ye sab wo values hain jo user form mein fill karega.
 ○ editId: Agar hum kisi user ka data edit kar rahe hain, toh us user ka ID
store hoga is field mein.

2. componentDidMount()
js
Copy code
componentDidMount() {
this.fetchUsers();
}

● Ye ek React lifecycle method hai, jo component mount hone ke baad chalti hai.
● Jab component pehli baar screen par dikhayi deta hai, ye method automatically chalti
hai aur fetchUsers() ko call karke users ka data fetch karne ka kaam karti hai.

3. fetchUsers()
js
Copy code
fetchUsers = () => {
fetch('https://676a3a7a863eaa5ac0ddb69d.mockapi.io/users')
.then((response) => response.json())
.then((data) => this.setState({ users: data }));
};

● Ye ek function hai, jo data ko API se fetch karta hai.

● fetch(): Ye ek JavaScript function hai, jo kisi website ya server se data lene ke liye
use hota hai.
● API se data milne ke baad, hum this.setState() ka use karte hain taaki users ki list
ko update kiya ja sake. React ko batata hai ki users me koi change hua hai aur UI
ko dobara render karna hai.

4. handleAddUser()
js
Copy code
handleAddUser = (values) => {
const { userName, userFatherName, userMotherName, userEmail,
userDOB } = values;

if (userName && userFatherName && userMotherName && userEmail &&

userDOB) {
const newUser = { userName, userFatherName, userMotherName,
userEmail, userDOB };
fetch('https://676a3a7a863eaa5ac0ddb69d.mockapi.io/users', {
method: 'POST',
 headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newUser),
})
.then((response) => response.json())
.then(() => {
this.fetchUsers();
});
} else {
alert('Please Enter All Values in Fields');
}
};

● Ye function new user ko add karne ke liye hai.

● values wo data hai jo form ke fields me user ne fill kiya hai.
● Hum if condition se check karte hain ki sab fields filled hain ya nahi.
● Agar filled hain, toh hum ek POST request API ko bhejte hain taaki naya user add
ho jaye.
● Jab data successfully add ho jata hai, fetchUsers() ko call karte hain taaki list
update ho sake.

5. handleUpdateUser()
js
Copy code
handleUpdateUser = (values) => {
const { userName, userFatherName, userMotherName, userEmail,
userDOB, editId } = values;

if (userName && userFatherName && userMotherName && userEmail &&

userDOB) {
const updatedUser = { userName, userFatherName,
userMotherName, userEmail, userDOB };

fetch(`https://676a3a7a863eaa5ac0ddb69d.mockapi.io/users/${editId}`,
{
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updatedUser),
})
.then((response) => response.json())
.then(() => {
this.fetchUsers();
});
 }
};

● Ye function existing user ko update karne ke liye hai.

● Agar hum kisi user ko update kar rahe hain, toh uske data ko PUT request se API ko
bhejte hain.
● editId ko use karke hum wahi user update karte hain.

6. delete()
js
Copy code
delete = (id) => {
fetch(`https://676a3a7a863eaa5ac0ddb69d.mockapi.io/users/${id}`,
{
method: 'DELETE',
}).then(() => {
this.fetchUsers();
});
};

● Ye function user ko delete karne ke liye hai.

● Jab user ka Delete button press hota hai, toh wo user DELETE request ke through
API se remove ho jata hai.

7. render()
js
Copy code
render() {
const { users, editId } = this.state;

return (
<div className="container">
{/* Form section */}
<Formik
initialValues={...}
validate={...}
onSubmit={...}
>
{/* Formik form */}
</Formik>

{/* Table section */}

 <Table className="table-dark mx-auto mt-5" bordered
hover>
<thead>
<tr>
<th>Sr. No.</th>
<th>Your Name</th>
<th>Father Name</th>
<th>Mother Name</th>
<th>Your Email</th>
<th>D.O.B.</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.userName}</td>
<td>{user.userFatherName}</td>
<td>{user.userMotherName}</td>
<td>{user.userEmail}</td>
<td>{user.userDOB}</td>
<td>
<button onClick={() =>
this.edit(user)} className="btn bg-primary mx-1">
Edit
</button>
<button onClick={() =>
this.delete(user.id)} className="btn bg-danger mx-1">
Delete
</button>
</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}

● Ye function UI ko render karne ke liye hai.

 ● Formik ka use karke hum ek form banate hain jisme users ka data add ya update
kiya ja sakta hai.
● Table me hum sabhi users ko list karte hain. Har user ke saamne Edit aur Delete
buttons hote hain.

Summary:

1. React ka use UI banane ke liye hota hai.

2. state me data ko store karte hain aur setState() se update karte hain.
3. API se data fetch karke usko screen par dikhate hain.
4. Formik ko form validation aur submission ke liye use karte hain.
5. CRUD operations ke through users ka data manage karte hain.

Umeed hai ab aapko code samajh aa gaya hoga! Agar koi aur confusion ho toh aap pooch
sakte hain.