React-paginate Kullanarak React'te Sayfalandırmaya Giriş

Büyük miktarda veriyi kullanıcı dostu bir şekilde düzenlemek ve görüntülemek, kullanıcı deneyimini geliştirir. Bunu başarmak için kullanılan tekniklerden biri sayfalandırmadır.

React'te, tepki sayfalandırma kitaplığı, uygulamayı basitleştirmenize yardımcı olabilir.

tepki sayfalandırma Kitaplığına giriş

tepki sayfalandırma kitaplığı, React'te sayfalandırmayı kolaylaştırır. Sayfalardaki öğeleri listelemenizi sağlar ve sayfa boyutu, sayfa aralığı ve sayfa sayısı gibi şeyler için özelleştirilebilir seçenekler sunar. Ayrıca, sayfa değişikliklerine yanıt vermek için kod yazabilmeniz için yerleşik bir olay işleyiciye sahiptir.

Aşağıda, bir API'den alınan verileri sayfalandırmak için tepki sayfalandırmayı nasıl kullanabileceğinizi göreceksiniz.

Proje Kurulumu

Başlamak için, create-react-app komutunu veya Vite'ı kullanarak bir React projesi oluşturun. Bu eğitimde Vite kullanılmaktadır. Talimatları bu gönderide bulabilirsiniz.

Projeyi oluşturduktan sonra, App.jsx'teki içeriğin bir kısmını silin, böylece bu kodla eşleşir:

işlevUygulama() {
geri dönmek (
 </div>
 );
}
ihracatvarsayılan Uygulama;

Bu size tepki sayfalandırma ile çalışmaya başlamanız için temiz bir dosya verir.

Verileri Ayarlama

JSON yer tutucu API'sinden veri alacaksınız. Bu API gönderiler, yorumlar, albümler, fotoğraflar, yapılacaklar ve kullanıcılar için uç noktalar sağlar. Gönderi uç noktası aracılığıyla, Axios kullanarak API'den veri getirme, bir HTTP istemci kitaplığı.

Başlamak için, bu terminal komutunu kullanarak Axios'u kurun:

npm kurulum eksenleri

Ardından, en üstteki useEffect kancasını ve axios kitaplığını içe aktarın. Uygulama.jsx, ardından aşağıda gösterildiği gibi API'den gönderileri getirin.

içe aktarmak eksenler itibaren"eksen";
içe aktarmak { useEffect, useState } itibaren"tepki";
işlevUygulama() {
sabit [veri, setData] = useState([]);

 useEffect(() => {
 eksenler.get(' https://jsonplaceholder.typicode.com/posts').Daha sonra((cevap) => {
 setData (yanıt.veri);
 });
 }, []);
geri dönmek (

 </div>
 );
}
ihracatvarsayılan Uygulama;

useState kancası, boş bir dizi ile data adlı bir durum değişkenini başlatır. API gönderileri döndürdüğünde durumu güncellemek için setData işlevini kullanacaksınız.

React-paginate ile Sayfalandırmayı Uygulamak

Artık projeyi kurduğunuza ve verileri getirdiğinize göre, tepki sayfalandırmayı kullanarak sayfalandırma eklemenin zamanı geldi. İzlemeniz gereken adımlar aşağıdadır:

1. tepki sayfalandırmasını yükleyin

React-paginate'i yüklemek için aşağıdaki komutu çalıştırın npm kullanarak.

npm tepki sayfalandırmasını kurun

2. Sayfaların İlk Durumunu Ayarlayın

Geçerli sayfayı ve toplam sayfa sayısını takip etmek için useState kancasını kullanın.

sabit [currentPage, setCurrentPage] = useState(0);
sabit [totalPages, setTotalPages] = useState(0);

Ayrıca bir sayfanın sahip olabileceği toplam öğe sayısını da belirtmelisiniz.

sabit itemPerPage = 10

Veri uzunluğuna ve sayfa başına öğe sayısına bağlı olarak toplam sayfa sayısını hesaplamak için useEffect kancasında aşağıdaki satırı ekleyin. Ardından, totalPages durum değişkeninde saklayın.

toplamSayfaları ayarla(Matematik.ceil (response.data.length / itemPerPage));

useEffect kancanız şimdi şöyle görünmelidir:

useEffect(() => {
 eksenler.get(' https://jsonplaceholder.typicode.com/posts').Daha sonra((cevap) => {
 setData (yanıt.veri);
 toplamSayfaları ayarla(Matematik.ceil (response.data.length / itemPerPage))
 });
 }, []);

3. Sayfa Değişikliklerini İşleyecek Bir İşlev Tanımlayın

Geçerli sayfa numarasına dayalı olarak verilerin alt kümesini işlemek için önce startIndex, endIndex ve subset değişkenlerini tanımlayın.

sabit startIndex = currentPage * itemPerPage;
sabit endIndex = startIndex + itemPerPage;
sabit altküme = data.slice (startIndex, endIndex);

Bu kod, currentPage durum değeri ve itemsPerPage değerine göre startIndex ve endIndex değerlerini hesaplar. Daha sonra, veri dizisini öğelerin bir alt kümesine bölmek için bu değişkenleri kullanır.

Ardından, handlePageChange işlevini ekleyin. Bu, bir kullanıcı İleri düğmesine tıkladığında çalışacak bir olay işleyicisidir.

sabit handlePageChange = (seçiliSayfa) => {
 setCurrentPage (selectedPage.selected);
};

Toplamda, başvurunuz şöyle görünmelidir:

içe aktarmak eksenler itibaren"eksen";
içe aktarmak { useEffect, useState } itibaren"tepki";
işlevUygulama() {
sabit [veri, setData] = useState([]);
sabit [currentPage, setCurrentPage] = useState(0);
sabit [totalPages, setTotalPages] = useState(0);
sabit itemPerPage = 10;
 useEffect(() => {
 eksenler.get(' https://jsonplaceholder.typicode.com/posts/').Daha sonra((cevap) => {
 setData (yanıt.veri);
 });
 toplamSayfaları ayarla(Matematik.ceil (response.data.length / itemPerPage));
 }, []);
sabit startIndex = currentPage * itemPerPage;
sabit endIndex = startIndex + itemPerPage;
sabit altküme = data.slice (startIndex, endIndex);
sabit handlePageChange = (seçiliSayfa) => {
 setCurrentPage (selectedPage.selected);
 };
geri dönmek (

 </div>
 );
}
ihracatvarsayılan Uygulama;

4. Sayfalandırma Ekle

Son adım, sayfaları ReactPaginate bileşenini kullanarak oluşturmaktır. Boş olanı değiştirerek aşağıdakini return ifadesine ekleyin div.

 {altküme.harita((öğe) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Bu, geçerli alt kümedeki öğeleri yineler ve bunları işler ve pageCount, onPageChange ve forceChange props'u ReactPaginate'e iletir.

Tepki sayfalandırmayı özelleştirme

tepki-paginate, uygulamanızın gereksinimlerine uyacak şekilde sayfalandırma bileşeninin görünümünü ve hissini özelleştirmenize izin veren birkaç destek sağlar.

İşte bazı örnekler.

• öncekiLabel ve nextLabel donanımlarını kullanarak sonraki ve önceki düğmeleri özelleştirin. Örneğin, aşağıda gösterildiği gibi şerit etiketleri kullanabilirsiniz.

   öncekiEtiket={"<}
   sonrakiEtiket={">>"}
  />
  

• breakLabel desteğini kullanarak break etiketini özelleştirin. Kesme etiketi, sayfa sayısı fazla olduğunda görüntülenen etikettir ve sayfalandırma bileşeni tüm sayfa bağlantılarını görüntüleyememektedir. Bunun yerine, bağlantılar arasında ara etiketiyle temsil edilen bir ara görüntüler. İşte üç nokta kullanan bir örnek.

   etiketi kırmak={"..."}
  />
  

• Görüntülenecek sayfa sayısını özelleştirin. Tüm sayfaları görüntülemek istemiyorsanız, pageCount prop'u kullanarak sayfa sayısını belirleyebilirsiniz. Aşağıdaki kod sayfa sayısını 5 olarak belirtir.

   sayfa Sayısı={5}
  />
  

• Konteyner ve Aktif Sınıfları Özelleştirme. Sırasıyla containerClassName ve activeClassName props'u kullanarak sayfalandırma kabı ve aktif sayfa bağlantısı için sınıf adlarını özelleştirebilirsiniz. Ardından, uygulamanızın görünümüne uyana kadar bu sınıfları kullanarak sayfalandırma bileşenine stil uygulayabilirsiniz.

   containerClassName={"sayfalandırma kabı"}
   aktifSınıfAdı={"etkin sayfa"}
  />
  

Bu, mevcut özelleştirme seçeneklerinin kapsamlı bir listesi değildir. geri kalanını içinde bulabilirsiniz tepki sayfalandırma kitaplığı belgeleri.

Sayfalandırmayı Kullanarak Kullanıcı Deneyimini İyileştirin

Sayfalandırma, büyük miktarda veri görüntüleyen herhangi bir uygulamada önemli bir özelliktir. Sayfalandırma olmadan, kullanıcıların ihtiyaç duydukları bilgileri bulmak için uzun listelerde gezinmesi gerekir ki bu da zaman alıcıdır.

Sayfalandırma, kullanıcıların aradıkları belirli verileri daha küçük, daha yönetilebilir parçalara bölerek kolayca gezinmelerine olanak tanır. Bu sadece zamandan tasarruf sağlamakla kalmaz, aynı zamanda kullanıcıların bilgileri işlemesini kolaylaştırır.