S04L06 - Props, useEffect और Async, एल्बम शो पृष्ठ

html

मास्टरिंग रिएक्ट: Props, useEffect, और Asynchronous Operations में Albums Show Page

विषय सूची

परिचय ........................................................... 1
React Props को समझना ..................................... 3

Props क्या हैं? ................................................. 3
Components में Props पास करना ................................... 4


useState के साथ State प्रबंधन ....................................... 6
Side Effects के लिए useEffect का उपयोग ........................... 8

useEffect का बुनियादी ज्ञान ......................................... 8
सामान्य useEffect पैटर्न .................................... 9


Asynchronous Operations को लागू करना ......................... 11

Network Calls बनाना ............................................ 11
Asynchronous Data को संभालना .................................... 13


Albums Show Page बनाना .................................... 15

Photo Grid सेट अप करना ........................................ 15
Dynamic Content के लिए APIs एकीकृत करना ........................ 17
Asynchronous Loading के साथ User Experience बढ़ाना . 19


निष्कर्ष .............................................................. 21
अतिरिक्त संसाधन ................................................... 23
SEO ऑप्टिमाइज़्ड कीवर्ड्स ............................................ 25


परिचय
मास्टरिंग रिएक्ट: Props, useEffect, और Asynchronous Operations में Albums Show Page में आपका स्वागत है। यह ईबुक शुरुआती और डेवलपर्स के लिए तैयार की गई है जिनके पास React का बुनियादी ज्ञान है, जिसका उद्देश्य आपके essential React अवधारणाओं—props, useState, और useEffect—और उनके practical अनुप्रयोगों को गहरा करना है Albums Show Page बनाने में।
आज के तेज़-तर्रार वेब विकास के परिदृश्य में, प्रतिक्रियाशील और इंटरएक्टिव यूजर इंटरफेस बनाना अत्यंत महत्वपूर्ण है। React, एक शक्तिशाली JavaScript लाइब्रेरी, इस तरह के इंटरफेस को कुशलतापूर्वक बनाने के लिए आवश्यक उपकरण प्रदान करती है। यह गाइड React के मूल अवधारणाओं में गहराई से उतरती है, यह दर्शाती है कि डेटा प्रवाह, state, और side effects को कैसे प्रबंधित किया जाए ताकि एक सहज यूजर अनुभव बनाया जा सके।
क्यों React?
React अपने component-based आर्किटेक्चर के लिए विशिष्ट है, जो डेवलपर्स को पुन: प्रयोज्य UI components बनाने की अनुमति देता है। इसकी state प्रबंधन और lifecycle विधियाँ dynamic applications बनाने में सक्षम बनाती हैं जो real-time data और user interactions को सुचारू रूप से संभाल सकते हैं।
मुख्य बिंदु

Props: Components के बीच डेटा पास करने का तरीका समझें।
useState: Component की state को प्रभावी रूप से प्रबंधित करें।
useEffect: Side effects जैसे डेटा fetching और subscriptions को संभालें।
Asynchronous Operations: नेटवर्क कॉल्स को लागू करें ताकि डेटा लोड करना user experience को बाधित न करे।

इस ईबुक के अंत तक, आपको इन React अवधारणाओं की व्यापक समझ हो जाएगी और आप उन्हें Asynchronous Data Loading के साथ Albums Show Page बनाने में कैसे लागू करना है, इस पर निपुण हो जाएंगे।

React Props को समझना
2.1. Props क्या हैं?
React में, props ("properties" का संक्षिप्त रूप) केवल पढ़े जाने वाले attributes हैं जो एक component से दूसरे component में डेटा पास करने के लिए उपयोग किए जाते हैं। Props डेटा को component tree के नीचे की ओर प्रवाहित करने में सहायता करते हैं, जिससे parent components अपने child components के साथ संवाद कर सकते हैं।
Props की मुख्य विशेषताएँ:

Read-Only: Props को प्राप्‍त करने वाले component द्वारा संशोधित नहीं किया जा सकता है।
Immutable: वे एक-तरफ़ा डेटा प्रवाह सुनिश्चित करते हैं, जिससे component का व्यवहार पूर्वानुमेय रहता है।
Reusable: Props के साथ components को parameterize करके, आप बहुमुखी और पुन: प्रयोज्य UI तत्व बना सकते हैं।

2.2. Components में Props पास करना
Props पास करना involves rendering के दौरान child component पर attributes specify करना। Child component फिर इन props को props ऑब्जेक्ट के माध्यम से access करता है।
उदाहरण:




		
		
			
			
Java
			
			// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const photoURLs = [
    { id: 1, url: 'photo1.jpg', title: 'Sunset' },
    { id: 2, url: 'photo2.jpg', title: 'Mountain' },
    // अतिरिक्त फोटो...
  ];

  return (
    <div>
      <ChildComponent photos={photoURLs} />
    </div>
  );
};

export default ParentComponent;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const photoURLs = [
    { id: 1, url: 'photo1.jpg', title: 'Sunset' },
    { id: 2, url: 'photo2.jpg', title: 'Mountain' },
    // अतिरिक्त फोटो...
  ];
 
  return (
    <div>
      <ChildComponent photos={photoURLs} />
    </div>
  );
};
 
export default ParentComponent;
 
					
				
			
		





		
		
			
			
Java
			
			// ChildComponent.jsx
import React from 'react';

const ChildComponent = ({ photos }) => {
  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>
          <img src={photo.url} alt={photo.title} />
          <p>{photo.title}</p>
        </div>
      ))}
    </div>
  );
};

export default ChildComponent;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						// ChildComponent.jsx
import React from 'react';
 
const ChildComponent = ({ photos }) => {
  return (
    <div>
      {photos.map((photo) => (
        <div key={photo.id}>
          <img src={photo.url} alt={photo.title} />
          <p>{photo.title}</p>
        </div>
      ))}
    </div>
  );
};
 
export default ChildComponent;
 
					
				
			
		


इस उदाहरण में:

ParentComponent photoURLs array को ChildComponent में photos prop के माध्यम से पास करता है।
ChildComponent photos prop प्राप्त करता है और प्रत्येक फोटो को प्रदर्शित करने के लिए इसे iterate करता है।


useState के साथ State प्रबंधन
React का useState hook आपको functional components में state जोड़ने की अनुमति देता है। State गतिशील डेटा को दर्शाता है जो समय के साथ बदल सकता है, जिससे component के render और व्यवहार पर प्रभाव पड़ता है।
State की घोषणा करना
State variable की घोषणा करने के लिए, आप useState hook का उपयोग करते हैं, जो दो तत्वों की एक युग्म प्रदान करता है: वर्तमान state मान और इसे अपडेट करने के लिए एक function।
Syntax:




		
		
			
			
Java
			
			const [state, setState] = useState(initialState);
			
				
					
				
					1
				
						const [state, setState] = useState(initialState);
					
				
			
		


उदाहरण:




		
		
			
			
Java
			
			import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // count को 0 पर initialize करना

  const increment = () => {
    setCount(count + 1); // state अपडेट करना
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						import React, { useState } from 'react';
 
const Counter = () => {
  const [count, setCount] = useState(0); // count को 0 पर initialize करना
 
  const increment = () => {
    setCount(count + 1); // state अपडेट करना
  };
 
  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};
 
export default Counter;
 
					
				
			
		


इस उदाहरण में:

count state variable है जिसे 0 पर initialize किया गया है।
setCount वह function है जिसका उपयोग count को अपडेट करने के लिए किया जाता है।
"Increment" बटन पर क्लिक करने से count अपडेट होता है, जिससे नया मान प्रदर्शित करने के लिए component पुन: render होता है।

जटिल State का प्रबंधन
और अधिक जटिल state objects या arrays को प्रबंधित करने के लिए, यह सुनिश्चित करें कि अपडेट immutably किए जाएं ताकि predictable state transitions बनी रहें।
Arrays के साथ उदाहरण:




		
		
			
			
Java
			
			const [photos, setPhotos] = useState([]);

const addPhoto = (newPhoto) => {
  setPhotos((prevPhotos) => [...prevPhotos, newPhoto]);
};
			
				
					
				
					1
2
3
4
5
				
						const [photos, setPhotos] = useState([]);
 
const addPhoto = (newPhoto) => {
  setPhotos((prevPhotos) => [...prevPhotos, newPhoto]);
};
					
				
			
		


यहाँ, addPhoto मौजूदा photos array में एक नई फोटो जोड़ता है बिना सीधे इसे mutate किए।

Side Effects के लिए useEffect का उपयोग
useEffect hook आपको functional components में side effects perform करने की अनुमति देता है, जैसे डेटा fetching, subscriptions, या मैन्युअली DOM को बदलना।
4.1. useEffect का बुनियादी ज्ञान
useEffect दो arguments स्वीकार करता है:

Effect Function: एक function जिसमें side-effect logic होता है।
Dependency Array (optional): dependencies की एक array जो निर्धारित करती है कि effect को कब फिर से चलाना चाहिए।

Syntax:




		
		
			
			
Java
			
			useEffect(() => {
  // Side-effect logic यहाँ

  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);
			
				
					
				
					1
2
3
4
5
6
7
				
						useEffect(() => {
  // Side-effect logic यहाँ
 
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);
					
				
			
		


उदाहरण:




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup on unmount
    return () => clearInterval(interval);
  }, []); // Empty dependency array ensures this runs once on mount

  return <p>Seconds Elapsed: {seconds}</p>;
};

export default Timer;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						import React, { useState, useEffect } from 'react';
 
const Timer = () => {
  const [seconds, setSeconds] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
 
    // Cleanup on unmount
    return () => clearInterval(interval);
  }, []); // Empty dependency array ensures this runs once on mount
 
  return <p>Seconds Elapsed: {seconds}</p>;
};
 
export default Timer;
 
					
				
			
		


इस उदाहरण में:

useEffect एक timer सेट करता है जो हर सेकंड seconds को बढ़ाता है।
Cleanup function component unmount होने पर interval को clear करता है।
खाली dependency array ([]) सुनिश्चित करती है कि effect केवल एक बार component के mount होने पर चले।

4.2. सामान्य useEffect पैटर्न

Data Fetching on Mount: जब component mount होता है तब data fetch करना।
Events पर Subscription: window resizing या key presses जैसे events को सुनना।
Document Title अपडेट करना: state के आधार पर ब्राउज़र टैब का शीर्षक बदलना।

Data Fetching उदाहरण:




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch('/api/albums');
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error('Error fetching albums:', error);
      }
    };

    fetchAlbums();
  }, []); // एक बार mount होने पर fetch करना

  return (
    <div>
      {albums.map((album) => (
        <div key={album.id}>{album.title}</div>
      ))}
    </div>
  );
};

export default DataFetcher;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
				
						import React, { useState, useEffect } from 'react';
 
const DataFetcher = () => {
  const [albums, setAlbums] = useState([]);
 
  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch('/api/albums');
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error('Error fetching albums:', error);
      }
    };
 
    fetchAlbums();
  }, []); // एक बार mount होने पर fetch करना
 
  return (
    <div>
      {albums.map((album) => (
        <div key={album.id}>{album.title}</div>
      ))}
    </div>
  );
};
 
export default DataFetcher;
 
					
				
			
		


यहाँ, useEffect component के mount होने पर API से album data fetch करता है और albums state को अपडेट करता है।

Asynchronous Operations को लागू करना
Asynchronous operations, जैसे API से data fetch करना, आधुनिक वेब अनुप्रयोगों के लिए अभिन्न हैं। इन operations को प्रभावी ढंग से प्रबंधित करने से एक responsive और कुशल user experience सुनिश्चित होता है।
5.1. Network Calls बनाना
Network calls external sources से data पुनः प्राप्त करते हैं, जिससे आपके application में dynamic content सक्षम होता है।
Fetch API उदाहरण:




		
		
			
			
Java
			
			const fetchPhotos = async () => {
  try {
    const response = await fetch('https://api.example.com/photos');
    const photos = await response.json();
    setPhotos(photos);
  } catch (error) {
    console.error('Failed to fetch photos:', error);
  }
};
			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const fetchPhotos = async () => {
  try {
    const response = await fetch('https://api.example.com/photos');
    const photos = await response.json();
    setPhotos(photos);
  } catch (error) {
    console.error('Failed to fetch photos:', error);
  }
};
					
				
			
		


5.2. Asynchronous Data को संभालना
Asynchronous data को प्रबंधित करने में डेटा प्राप्त होने पर state को अपडेट करना और loading states तथा संभावित errors को संभालना शामिल है।
Enhanced Data Fetching उदाहरण:




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';

const PhotoGallery = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadPhotos = async () => {
      try {
        const response = await fetch('/api/photos');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const photosData = await response.json();
        setPhotos(photosData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    loadPhotos();
  }, []);

  if (loading) return <p>Loading photos...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} />
      ))}
    </div>
  );
};

export default PhotoGallery;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
				
						import React, { useState, useEffect } from 'react';
 
const PhotoGallery = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const loadPhotos = async () => {
      try {
        const response = await fetch('/api/photos');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const photosData = await response.json();
        setPhotos(photosData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
 
    loadPhotos();
  }, []);
 
  if (loading) return <p>Loading photos...</p>;
  if (error) return <p>Error: {error}</p>;
 
  return (
    <div>
      {photos.map((photo) => (
        <img key={photo.id} src={photo.url} alt={photo.title} />
      ))}
    </div>
  );
};
 
export default PhotoGallery;
 
					
				
			
		


इस उदाहरण में:

Loading State: यह इंगित करता है कि data fetch हो रहा है।
Error Handling: fetch के दौरान किसी भी error को पकड़ता है और प्रदर्शित करता है।
Data Rendering: सफलतापूर्वक fetch होने पर photos को प्रदर्शित करता है।


Albums Show Page बनाना
props, useState, useEffect, और asynchronous operations को एकीकृत करके, हम एक dynamic Albums Show Page बना सकते हैं जो कुशलतापूर्वक photo albums को लोड और प्रदर्शित करता है।
6.1. Photo Grid सेट अप करना
Photo Grid component संरचित grid layout में photos प्रदर्शित करने के लिए जिम्मेदार है। props का उपयोग करते हुए, यह प्रदर्शित करने के लिए photos की सूची प्राप्त करता है।
PhotoGrid.jsx




		
		
			
			
Java
			
			import React from 'react';
import { Grid, Card, CardMedia, CardContent, Typography } from '@material-ui/core';

const PhotoGrid = ({ photoURLs }) => {
  return (
    <Grid container spacing={2}>
      {photoURLs.map((photo) => (
        <Grid item xs={12} sm={6} md={4} lg={3} key={photo.id}>
          <Card>
            <CardMedia
              component="img"
              alt={photo.title}
              height="140"
              image={photo.url}
              title={photo.title}
            />
            <CardContent>
              <Typography variant="h6">{photo.title}</Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

export default PhotoGrid;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						import React from 'react';
import { Grid, Card, CardMedia, CardContent, Typography } from '@material-ui/core';
 
const PhotoGrid = ({ photoURLs }) => {
  return (
    <Grid container spacing={2}>
      {photoURLs.map((photo) => (
        <Grid item xs={12} sm={6} md={4} lg={3} key={photo.id}>
          <Card>
            <CardMedia
              component="img"
              alt={photo.title}
              height="140"
              image={photo.url}
              title={photo.title}
            />
            <CardContent>
              <Typography variant="h6">{photo.title}</Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};
 
export default PhotoGrid;
 
					
				
			
		


व्याख्या:

Material-UI Grid: एक responsive grid layout बनाता है।
Card Component: प्रत्येक photo को उसके title के साथ प्रदर्शित करता है।
Props Usage: photos को dynamically रेंडर करने के लिए photoURLs prop प्राप्त करता है।

6.2. Dynamic Content के लिए APIs एकीकृत करना
Albums Show Page को वास्तविक डेटा से populated करने के लिए, हम API endpoints को integrate करेंगे ताकि album और photo जानकारी fetch कर सकें।
AlbumShow.jsx




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';

const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAlbumPhotos = async () => {
      try {
        // Albums की सूची fetch करना
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();

        // मान लें कि हम ID 2 वाले album में रुचि रखते हैं
        const album = albums.find((alb) => alb.id === 2);

        // चुने हुए album के लिए photos fetch करना
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();

        setPhotoURLs(photos);
      } catch (err) {
        setError('Failed to load album photos.');
      } finally {
        setLoading(false);
      }
    };

    fetchAlbumPhotos();
  }, []);

  if (loading) return <p>Loading album...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <h1>{`Album: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
    </div>
  );
};

export default AlbumShow;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
				
						import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';
 
const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchAlbumPhotos = async () => {
      try {
        // Albums की सूची fetch करना
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
 
        // मान लें कि हम ID 2 वाले album में रुचि रखते हैं
        const album = albums.find((alb) => alb.id === 2);
 
        // चुने हुए album के लिए photos fetch करना
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();
 
        setPhotoURLs(photos);
      } catch (err) {
        setError('Failed to load album photos.');
      } finally {
        setLoading(false);
      }
    };
 
    fetchAlbumPhotos();
  }, []);
 
  if (loading) return <p>Loading album...</p>;
  if (error) return <p>{error}</p>;
 
  return (
    <div>
      <h1>{`Album: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
    </div>
  );
};
 
export default AlbumShow;
 
					
				
			
		


व्याख्या:

Fetching Albums: backend से albums की सूची प्राप्त करता है।
Selecting an Album: एक specific album (जैसे, ID 2) चुनता है।
Fetching Photos: चुने हुए album से संबंधित photos प्राप्त करता है।
State Management: photoURLs, loading, और error state को अपडेट करता है।

6.3. Asynchronous Loading के साथ User Experience बढ़ाना
एक smooth user experience सुनिश्चित करने के लिए, विशेषकर बड़ी संख्या में photos के साथ, हम asynchronous loading implement करेंगे। यह approach photos को incremental रूप से लोड करता है, जिससे डेटा retrieval के दौरान UI freeze नहीं होता।
Asynchronous Loading के साथ Modified AlbumShow.jsx




		
		
			
			
Java
			
			import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';

const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadPhotosAsync = async () => {
      try {
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
        const album = albums.find((alb) => alb.id === 2);
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();

        // विलंब के साथ asynchronous loading का simulation
        for (const photo of photos) {
          await new Promise((resolve) => setTimeout(resolve, 1000)); // 1-second delay
          setPhotoURLs((prevPhotos) => [...prevPhotos, photo]);
        }
      } catch (err) {
        setError('Failed to load album photos.');
      } finally {
        setLoading(false);
      }
    };

    loadPhotosAsync();
  }, []);

  if (loading && photoURLs.length === 0) return <p>Loading album...</p>;

  return (
    <div>
      <h1>{`Album: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
      {loading && <p>Loading more photos...</p>}
      {error && <p>{error}</p>}
    </div>
  );
};

export default AlbumShow;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
				
						import React, { useState, useEffect } from 'react';
import PhotoGrid from './PhotoGrid';
 
const AlbumShow = () => {
  const [photoURLs, setPhotoURLs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const loadPhotosAsync = async () => {
      try {
        const albumsResponse = await fetch('/api/albums');
        const albums = await albumsResponse.json();
        const album = albums.find((alb) => alb.id === 2);
        const photosResponse = await fetch(`/api/albums/${album.id}/photos`);
        const photos = await photosResponse.json();
 
        // विलंब के साथ asynchronous loading का simulation
        for (const photo of photos) {
          await new Promise((resolve) => setTimeout(resolve, 1000)); // 1-second delay
          setPhotoURLs((prevPhotos) => [...prevPhotos, photo]);
        }
      } catch (err) {
        setError('Failed to load album photos.');
      } finally {
        setLoading(false);
      }
    };
 
    loadPhotosAsync();
  }, []);
 
  if (loading && photoURLs.length === 0) return <p>Loading album...</p>;
 
  return (
    <div>
      <h1>{`Album: ${photoURLs[0]?.albumTitle}`}</h1>
      <PhotoGrid photoURLs={photoURLs} />
      {loading && <p>Loading more photos...</p>}
      {error && <p>{error}</p>}
    </div>
  );
};
 
export default AlbumShow;
 
					
				
			
		


व्याख्या:

Incremental Loading: photos को एक-एक करके जोड़ने के लिए loop का उपयोग करता है जो delay के साथ चलता है, network latency को simulate करता है।
User Feedback: users को ongoing data retrieval के बारे में सूचित करने के लिए loading messages प्रदर्शित करता है।
Responsive UI: users को बिना सभी network calls के पूरा होने का इंतजार किए धीरे-धीरे photos देखने की अनुमति देता है।


निष्कर्ष
इस ईबुक में, हमने essential React अवधारणाओं—props, useState, और useEffect—और उनके practical अनुप्रयोगों को Albums Show Page बनाने में explore किया। डेटा प्रवाह, state, और side effects को प्रभावी ढंग से प्रबंधित करके, आप responsive और interactive user interfaces बना सकते हैं जो कुल मिलाकर user experience को बढ़ाते हैं।
मुख्य बिंदु

Props components के बीच seamless data sharing सक्षम करते हैं, जिससे reusable और maintainable code को बढ़ावा मिलता है।
useState functional components के भीतर dynamic data को प्रबंधित करने का straightforward तरीका प्रदान करता है।
useEffect side effects, जैसे data fetching और subscriptions, को संभालने की अनुमति देता है, जिससे आपके components changes के प्रति उपयुक्त प्रतिक्रिया देते हैं।
Asynchronous Operations data लोड करने के लिए vital हैं बिना आपके application की responsiveness को प्रभावित किए।

अगले कदम

State Management में गहराई से: Redux या Context API जैसे अधिक advanced state management solutions explore करें।
Advanced useEffect पैटर्न: dependencies, cleanup functions, और useEffect के साथ performance को optimize करने के बारे में जानें।
Error Handling और User Feedback: अधिक robust error handling implement करें और user feedback mechanisms को enhance करें।
Performance Optimization: rendering को optimize करने और आपके React applications के performance को सुधारने के techniques की जांच करें।

इन अवधारणाओं में महारत हासिल करके, आप अधिक जटिल React projects को tackle करने और sophisticated web applications बनाने के लिए अच्छी तरह से सुसज्जित होंगे।

अतिरिक्त संसाधन

React आधिकारिक दस्तावेज़
React Hooks को समझना
Material-UI दस्तावेज़
JavaScript Async/Await
React में State Management


SEO ऑप्टिमाइज़्ड कीवर्ड्स
React Props, useEffect, useState, Asynchronous Operations, Albums Show Page, React Hooks, Photo Grid, Data Fetching in React, React State Management, Material-UI Grid, React Functional Components, React Lifecycle Methods, Asynchronous Data Loading, React Component Communication, React Tutorial for Beginners, Building Photo Galleries in React, Responsive Design with Material-UI, React API Integration, Handling Side Effects in React, React Best Practices
Note: यह लेख AI द्वारा उत्पन्न किया गया है।