React JS में पृष्ठांकन | React में पेजिनेशन की अवधारणा को समझें

पैगिनेशन सुविधा केवल सीमित डेटा डिस्प्ले करने के साथ पारित करने के लिए जानी जाने वाली एक महत्वपूर्ण विशेषता है। यह उपयोगकर्ताओं को बड़े संख्या में डेटा एंट्री देखने में मदद करता है जिससे सुविधा को अधिक उपयोगी बनाया जा सकता है। इस लेख में, हम रिएक्ट जेएस में पैगिनेशन की समझ करेंगे और कैसे इसका उपयोग करके एक पृष्ठनिर्देशन कंपोनेंट बना सकते हैं।

पहले, रिएक्ट ऐप्लिकेशन बनाने के लिए नया प्रोजेक्ट शुरू करें। आपको टर्मिनल में निम्नलिखित कमांड का उपयोग करना होगा:

npx create-react-app pagination-app
cd pagination-app

अब, अपने प्रोजेक्ट के लिए आवश्यकतानुसार इनस्टॉल करें:

npm install axios react-bootstrap

जब आपके पास सभी पुराने डेटा उपलब्ध होते हैं, और अपने उपयोगकर्ताओं को वैज्ञानिक रूप से हैंडल करने के लिए, तो एक पृष्ठनिर्देशन बनाने के लिए पहला कदम है कि आप एपीआई से डेटा प्राप्त करें। इस पाठ में, हम एक डमी एपीआई का उपयोग करेंगे जिसमें अनुक्रमित डेटा उपलब्ध है। आपको टर्मिनल में निम्नलिखित कमांड का उपयोग करके डमी एपीआई सर्वर को चला सकते हैं:

npx json-server --watch data/db.json --port 8000

इसके बाद, अपने प्रोजेक्ट में एक नया फ़ोल्डर बनाएं और ush API.js नामक एक नया फ़ाइल उत्पन्न करें। उसेओ एपीआई सर्वर से डेटा प्राप्त करने के लिए उपयोग किया जाएगा। निम्नलिखित कोड काउंट करें:

import axios from 'axios';

const API = axios.create({
  baseURL: 'http://localhost:8000'
});

export const getTodos = async (page = 1) => {
  const response = await API.get(`/todos?_page=${page}&_limit=10`);
  return response.data;
};

अब, एक नई फ़ाइल बनाएं और उसे Pagination.js नामक कोम्पोनेन्ट के रूप में सहेजें। इस कंपोनेन्ट का उद्देश्य पृष्ठनिर्देशन के लिए बटन जेनरेट करना है। निम्नलिखित कोडद्वारा यह करें:

import React from 'react';
import { Pagination } from 'react-bootstrap';

const PaginationComponent = ({currentPage, totalPages, onChangePage}) => {
  const items = [];

  for (let i = 1; i <= totalPages; i++) {
    items.push(
      <Pagination.Item key={i} active={i === currentPage} onClick={() => onChangePage(i)}>
        {i}
      </Pagination.Item>
    );
  }

  return (
    <Pagination>
      {items}
    </Pagination>
  );
};

export default PaginationComponent;

आखिर में, App.js फ़ाइल में एप्लिकेशन के मूल स्थिति और कम्पोनेन्ट चालू करने के लिए निम्नलिखित कोड का उपयोग करें:

import React, { useState, useEffect } from 'react';
import PaginationComponent from './Pagination';
import { getTodos } from './API';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);

  useEffect(() => {
    const fetchTodos = async () => {
      const data = await getTodos(currentPage);
      setTodos(data);
    };

    fetchTodos();
  }, [currentPage]);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <h2>{todo.title}</h2>
          <p>{todo.description}</p>
        </div>
      ))}
      <PaginationComponent
        currentPage={currentPage}
        totalPages={totalPages}
        onChangePage={handlePageChange}
      />
    </div>
  );
};

export default App;

इसके बाद, आप अपने ब्राउज़र में अपनी रिएक्ट एप्लिकेशन को ऐक्सेस कर सकते हैं। यह पृष्ठनिर्देशन कंपोनेंट का उपयोग करके एक व्यावहारिक पृष्ठनिर्देशन दर्शाएगा जो उपयोगकर्ताओं को अधिक डेटा प्रदर्शित करने में मदद करेगा।

इस लेख में, हमने रिएक्ट जेएस में पृष्ठनिर्देशन के कॉन्सेप्ट को समझा और कैसे एक पृष्ठनिर्देशन कंपोनेंट बनाया जा सकता है, इसके बारे में विस्तार से समझाया। यह उत्तरजीवित एप्लिकेशन डेवलपमेंट में अत्यधिक उपयोगी है, जो एक बड़े संख्या में डेटा प्रदर्शित करने के लिए साहायक हो सकता है। उम्मीद है कि यह ट्यूटोरियल आपके लिए उपयोगी होगा!