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

React.js'de Etkileşimli Döngü Nasıl Oluşturulur
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.



GÜNÜN MAKALE VİDEOSU

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.

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.



google'da seni kimin aradığını görebiliyor musun
import React, { useState } from 'react';

const Carousel = () => {
const [index, setIndex] = useState(0);
const length = 3;

const handlePrevious = () => {
const newIndex = index - 1;
setIndex(newIndex < 0 ? length - 1 : newIndex);
};

const handleNext = () => {
const newIndex = index + 1;
setIndex(newIndex >= length ? 0 : newIndex);
};

return (
<div className="carousel">
<button onClick={handlePrevious}>Previous</button>
<button onClick={handleNext}>Next</button>
<p>{index}</p>
</div>
);
};

export default Carousel;

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:



yerleşik özellikleri kullanarak uygulamaya karuseller ile tepki verin

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 install 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:

spotify'da şarkı nasıl açılır
import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slider>
<Slide index={0}>Slide 1</Slide>
<Slide index={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};

export default Carousel;

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.

Paketi kullanarak uygulamayı carousels ile reaksiyona sokun

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.

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 install react-responsive-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:

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
return (
<Carousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
};

export default CarouselPage;

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.

Paketi kullanarak uygulamayı carousels ile reaksiyona sokun

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ı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.