If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
ReactJS में Functional Components सबसे commonly used और recommended approach है UI बनाने के लिए। Functional components React के simplified और modular coding style को follow करते हैं और आज के modern React applications में widely preferred हैं।
यह lightweight और easy-to-understand components होते हैं जो JSX के साथ integrate हो के interactive और efficient UI बनाने में help करते हैं।
इस topic में हम React Functional Components को detail में समझेंगे - यह क्या होते हैं, कैसे बनाये जाते हैं, और कैसे हम Hooks
का use करके उनमें state और lifecycle functionality add कर सकते हैं।
Functional components basically JavaScript functions होते हैं जो React में एक UI का specific part represent करते हैं और JSX return करते हैं।
यह components easily reusable और modular होते हैं और एक clean और readable code structure follow करते हैं।
एक functional component का basic syntax simple JavaScript function कि तरह होता है जो JSX return करता है।
●●●
Functional components को बनाने के लिए हमें बस एक function
define करना होता है और उससे export करना होता है , बाद में हम इसे किसी भी दूसरे component में import
करके use कर सकते हैं।
File : src/components/Greeting.js
import React from 'react';
function FunctionalComponent() {
return (
<div>
<h1>Hello from Functional Component!</h1>
</div>
);
}
export default FunctionalComponent;
File : src/App.js
import React from 'react';
import Greeting from './components/Greeting';
function App() {
return (
<div>
<Greeting />
</div>
);
}
export default App;
●●●
Functional components में data pass करने के लिए हम props
का use करते हैं। Props एक way है जो parent component को child component में data pass करने में help करता है।
Props immutable होते हैं, मतलब ये child component के अंदर change नहीं किये जा सकते।
File : src/components/UserCard.js
import React from 'react';
function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
</div>
);
}
export default UserCard;
File : src/App.js
import React from 'react';
import UserCard from './components/UserCard';
function App() {
return (
<div>
<UserCard name="Alice" age={25} />
<UserCard name="Bob" age={30} />
</div>
);
}
export default App;
●●●
React functional components को Hooks
के साथ और भी powerful बनाया गया है। Hooks
functional components में state और lifecycle methods को manage करने में help करते हैं।
Common hooks जो functional components में mostly use होते हैं -
useState: State को manage करने के लिए।
useEffect: Side effects (जैसे data fetching, subscriptions) को handle करने के लिए।
useState
hook एक function है जो functional components में state को manage करता है। ये एक array
return करता है जिसमे पहला element current state होता है और दूसरा element state update करने का function होता है।
File : src/components/Counter.js
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;
Explanation
useState(0)
initial state को 0 set करता है, और count और setCount
variables को return करता है।
increment function setCount
को call करके state को update करता है जब button click होता है।
useEffect hook functional components में lifecycle methods जैसे componentDidMount, componentDidUpdate, और componentWillUnmount को replace करता है।
ये hook component mount
hone के बाद और dependencies change hone पर execute होता है।
File : src/components/Timer.js
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <h2>Seconds: {seconds}</h2>;
}
export default Timer;
Explanation
useEffect
के अंदर एक interval set किया गया है जो हर second seconds को increment करता है।
Interval clear करने के लिए return () => clearInterval(interval);
cleanup function दिया गया है जो component unmount hone पर call होता है।
●●●
React में हम components को दूसरे components के अंदर nest कर सकते हैं जो reusability और code organization को improve करता है।
File : src/components/UserProfile.js
import React from 'react';
import UserInfo from './UserInfo';
function UserProfile() {
return (
<div>
<h2>User Profile</h2>
<UserInfo name="Alice" age={25} />
</div>
);
}
export default UserProfile;
File : src/components/UserInfo.js
import React from 'react';
function UserInfo({ name, age }) {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
export default UserInfo;
File : src/App.js
import React from 'react';
import UserProfile from './components/UserProfile';
function App() {
return (
<div>
<UserProfile />
</div>
);
}
export default App;
Explanation
UserProfile
component UserInfo
component को nest करता है जो user का नाम और age show करता है।
App.js
में UserProfile
component को include किया गया है।
●●●
React के Functional Components को समझना React applications को efficiently build करने में help करेगा और आपके code को modular और maintainable बनाएगा।
Happy coding! 🎉