Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

React.js, kullanıcı arabirimleri oluşturmak için popüler ve güçlü bir JavaScript kitaplığıdır. Dinamik, etkileşimli ve duyarlı web uygulamaları oluşturmak için kullanabilirsiniz.

React.js ile kullanabileceğiniz yaygın bileşenlerden biri döngüdür. Yerleşik React özellikleriyle veya üçüncü taraf bir kitaplık kullanarak yapmak kolaydır.

Atlıkarınca Nedir ve Kullanım Alanları Nelerdir?

Karusel, resimler veya videolar arasında geçiş yapmanızı sağlayan bir slayt gösterisi bileşenidir. En çok web sitelerinde ürünleri veya hizmetleri sergilemek veya öne çıkan içeriği göstermek için kullanılır. Karusel kullanmanın birçok faydası vardır, örneğin:

  • Önemli içeriğe dikkat çekmenin etkili bir yoludur.
  • Birden çok resim ve videoyu sergilemenin harika bir yolu.
  • Sayfanın düzenli ve görsel olarak çekici kalmasına yardımcı olur.
  • Etkileşimli bir kullanıcı deneyimi oluşturmak için kullanabilirsiniz.
instagram viewer

React.js'de Döngü Nasıl Oluşturulur

React.js'de döngü oluşturmak nispeten kolaydır ve kullanabileceğiniz iki popüler kitaplık vardır. Bir döngü eklemek için yerleşik React özelliklerini de kullanabilirsiniz.

Yerleşik Özellikleri Kullanma

React.js'de bir döngü oluşturmanın ilk yöntemi, yerleşik özelliklerden yararlanmaktır. React, bileşenleri kullanarak bir döngü oluşturmak için güçlü bir yol sağlar. Yapabilirsiniz React kancalarını kullan bir döngü eklemek ve kontrol etmek için.

içe aktarmak Tepki, { useState } itibaren 'tepki';

sabit Karusel = () => {
sabit [index, setIndex] = useState(0);
sabit uzunluk = 3;

sabit handleÖnceki = () => {
sabit newIndex = dizin - 1;
setIndex (yeniIndex < 0? uzunluk - 1: yeniDizin);
};

sabit koluSonraki = () => {
sabit newIndex = dizin + 1;
setIndex (yeniIndex >= uzunluk? 0: yeni Dizin);
};

geri dönmek (
<div sınıfıAdı="atlıkarınca">
<düğme onClick={handlePrevious}>Öncesi</button>
<düğme onClick={handleNext}>Sonraki</button>
<P>{dizin}</P>
</div>
);
};

ihracatvarsayılan atlıkarınca;

Bu kod, index adlı bir durum değişkeni oluşturmak için useState kancasını kullanır. Bu, carousel'deki geçerli konumu takip edecektir.

handlePrevious ve handleNext işlevleri, kullanıcı Öncesi Ve Sonraki düğmeler.

Son olarak, işaretleme, indeks değerini bir paragraf etiketinde görüntüler. İsterseniz metin yerine resim veya video görüntüleyebilirsiniz. Karuseli normal CSS kullanarak da biçimlendirebilirsiniz veya Tailwind CSS gibi bir CSS çerçevesi kullanarak.

Herhangi bir süslü stil olmadan, temel bir çift düğme ve geçerli dizini temsil eden bir sayı görmelisiniz:

pure-react-carousel Kitaplığını kullanma

React.js'de bir döngü oluşturmanın ikinci yöntemi, pure-react-carousel kitaplığıdır. Bu kitaplık, bileşenlerin kullanımıyla bir döngü oluşturmak için güçlü bir yol sağlar. Kitaplığı kullanmak için önce şu komutu kullanarak yüklemeniz gerekir:

npm düzenlemek pure-react-carousel

Kitaplığı yükledikten sonra, bileşeni bir döngü oluşturmak için kullanabilirsiniz. Karusel bileşeninin nasıl kullanılacağına ilişkin bir örneği burada bulabilirsiniz:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak { CarouselProvider, Kaydırıcı, Slayt, ButtonBack, ButtonNext } itibaren "pure-react-carousel";
içe aktarmak 'pure-react-carousel/dist/react-carousel.es.css';

sabit Karusel = () => {
geri dönmek (
<CarouselSağlayıcı
naturalSlideWidth={100}
naturalSlideHeight={120}
toplam Slaytlar={3}
>
<kaydırıcı>
<Slayt dizini={0}>Slayt 1</Slide>
<Slayt dizini={1}>Slayt 2</Slide>
<Slayt dizini={2}>Slayt 3</Slide>
</Slider>
<DüğmeGeri>Geri</ButtonBack>
<DüğmeSonraki>Sonraki</ButtonNext>
</CarouselProvider>
);
};

ihracatvarsayılan atlıkarınca;

Bu kodda, CarouselProvider bileşeninin carousel için naturalSlideWidth, naturalSlideHeight ve totalSlides gibi genel ayarları tanımladığını görebilirsiniz.

Slider bileşeni birkaç Slide örneği içerir. Slayt bileşeni, her bir slaydı tanımlar.

Son olarak, ButtonBack ve ButtonNext bileşenleri carousel navigasyonunu yönetir.

Pure-react-carousel kitaplığını kullanmanın aşağıdakiler gibi birçok faydası vardır:

  • Kullanımı kolay: Yerleşik yöntem bir döngü oluşturmak için daha fazla kod gerektirse de kitaplık, React.js'de bir döngü oluşturmak için daha kolay bir yol sağlar.
  • Duyarlı: Kitaplık, duyarlı döngüler oluşturma yeteneği sağlar. Yerleşik yöntemle, farklı ekran boyutları için ayrı bir döngü oluşturmanız gerekir.
  • özelleştirme: Kitaplık, otomatik oynatma, gezinme okları, sayfalandırma ve daha fazlası gibi döngüyü özelleştirmek için kullanabileceğiniz birçok özellik sağlar.

tepki-duyarlı-karusel Kitaplığı'nı kullanma

React.js'de bir döngü oluşturmanın son yöntemi, tepki veren-karusel kitaplığıdır. Bu kitaplık ile bileşenlerin kullanımıyla bir karusel oluşturabilirsiniz. Kitaplığı kullanmak için önce şu komutu kullanarak yüklemeniz gerekir:

npm düzenlemek tepki-duyarlı-carousel

Kitaplığı yükledikten sonra, bileşeni bir döngü oluşturmak için kullanabilirsiniz. Carousel bileşeninin nasıl kullanılacağına dair bir örnek aşağıda verilmiştir:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak { Atlıkarınca } itibaren 'react-responsive-carousel';
içe aktarmak 'tepki-duyarlı-carousel/lib/styles/carousel.min.css';

sabit Dönen Sayfa = () => {
geri dönmek (
<atlıkarınca>
<div>
<img kaynak="https://placehold.co/100x100" />
<p sınıfAdı="efsane">Efsane 1</P>
</div>
<div>
<img kaynak="https://placehold.co/200x200" />
<p sınıfAdı="efsane">Efsane 2</P>
</div>
<div>
<img kaynak="https://placehold.co/300x300" />
<p sınıfAdı="efsane">Efsane 3</P>
</div>
</Carousel>
);
};

ihracatvarsayılan Dönen Sayfa;

Bu kodda Carousel bileşeninin carouseli tanımladığını görebilirsiniz. Karusel bileşeninin içinde, her bir slaydı bir div içerir. Her slayt bir resim ve o resim için bir açıklama içerebilir. Kitaplık ayrıca karuseli özelleştirmek için kullanabileceğiniz bir dizi seçenek ve ayar sağlar.

React-responsive-carousel kitaplığını kullanmanın aşağıdakiler gibi birçok faydası vardır:

  • En popüler kütüphanelerden biri: Kitaplık, React.js'de döngü oluşturmak için en popüler kitaplıklardan biridir. Böylece, takılırsanız, topluluktan kolayca yardım alabilirsiniz.
  • Kullanımı kolay: Yalnızca birkaç satır kodla kolayca bir döngü oluşturabilirsiniz.
  • Duyarlı: Kitaplık, duyarlı döngüler oluşturma yeteneği sağlar.
  • özelleştirme: Kitaplık ayrıca karuselleri özelleştirmek ve biçimlendirmek için kullanabileceğiniz birçok özellik sunar.

Bir Döngü ile Kullanıcı Deneyimini İyileştirin

Bir döngü ile kullanıcılara daha fazla bilgi sağlayabilir ve web sitenizle daha kolay etkileşim kurmalarına yardımcı olabilirsiniz. Döngüler ayrıca sayfanın düzenli ve görsel olarak çekici kalmasına yardımcı olur. Sonuç olarak, kullanıcı deneyimini iyileştirmenin harika bir yoludur.

Ayrıca, döngülerinizle kullanıcı etkileşimini izleyebilir ve kullanıcı deneyimini optimize etmek için verileri kullanabilirsiniz. Bu, web sitenizde daha iyi bir kullanıcı deneyimi oluşturmanıza yardımcı olacaktır. Ardından, React uygulamanızı Github sayfaları gibi kolay ve uygun maliyetli platformlarda ücretsiz olarak dağıtabilirsiniz.