ReactJS Functional Components In Hindi

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 कर सकते हैं।

What are Functional Components In ReactJs ?

Functional components basically JavaScript functions होते हैं जो React में एक UI का specific part represent करते हैं और JSX return करते हैं।

यह components easily reusable और modular होते हैं और एक clean और readable code structure follow करते हैं।

Structure Of Functional Component

एक functional component का basic syntax simple JavaScript function कि तरह होता है जो JSX return करता है।

●●●

ReactJs Functional Component Example

Functional components को बनाने के लिए हमें बस एक function define करना होता है और उससे export करना होता है , बाद में हम इसे किसी भी दूसरे component में import करके use कर सकते हैं।

File : src/components/Greeting.js

Copy
import React from 'react';

function FunctionalComponent() {
  return (
    <div>
      <h1>Hello from Functional Component!</h1>
    </div>
  );
}

export default FunctionalComponent;

File : src/App.js

Copy
import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

●●●

Props in Functional Components

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

Copy
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

Copy
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;

●●●

ReactJs Functional Components with Hooks

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 करने के लिए।

1. useState Hook

useState hook एक function है जो functional components में state को manage करता है। ये एक array return करता है जिसमे पहला element current state होता है और दूसरा element state update करने का function होता है।

Example of useState Hook

File : src/components/Counter.js

Copy
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 होता है।

2. useEffect Hook

useEffect hook functional components में lifecycle methods जैसे componentDidMount, componentDidUpdate, और componentWillUnmount को replace करता है।

ये hook component mount hone के बाद और dependencies change hone पर execute होता है।

Example of useEffect Hook

File : src/components/Timer.js

Copy
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 होता है।

●●●

ReactJs Nested Functional Components

React में हम components को दूसरे components के अंदर nest कर सकते हैं जो reusability और code organization को improve करता है।

Example of Nested Components

File : src/components/UserProfile.js

Copy
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

Copy
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

Copy
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! 🎉