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.

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. Bir döngü eklemek ve kontrol etmek için React kancalarını kullanabilirsiniz .

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ı Önceki ve Sonraki düğmelerini tıklattığında dizin değerindeki güncellemelerle ilgilenir .

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

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

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 install pure-react-carousel

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

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.

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 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/100×100″ />

<p className=”legend”>Legend 1</p>

</div>

<div>

<img src=”https://placehold.co/200×200″ />

<p className=”legend”>Legend 2</p>

</div>

<div>

<img src=”https://placehold.co/300×300″ />

<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 kitaplıklardan 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, karuselleri özelleştirmek ve biçimlendirmek için kullanabileceğiniz birçok özellik de sağlar.
• 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.