Реацт.јс је популарна и моћна ЈаваСцрипт библиотека за креирање корисничких интерфејса. Можете га користити за прављење динамичких, интерактивних и брзих веб апликација.
Једна од уобичајених компоненти које можете да користите са Реацт.јс је вртешка. То је лако учинити, било са уграђеним Реацт функцијама или коришћењем библиотеке треће стране.
Шта је вртешка и која је њена употреба?
Вртешка је компонента пројекције слајдова која вам омогућава да се крећете кроз слике или видео записе. Најчешће се користи на веб локацијама за представљање производа или услуга или за показивање истакнутог садржаја. Постоје многе предности коришћења вртешке, као што су:
- То је ефикасан начин да се скрене пажња на важан садржај.
- То је одличан начин да прикажете више слика и видео записа.
- Помаже да страница буде организована и визуелно привлачна.
- Можете га користити за креирање интерактивног корисничког искуства.
Како направити вртешку у Реацт.јс
Прављење вртешке у Реацт.јс је релативно једноставно и постоје две популарне библиотеке које можете да користите. Такође можете да користите уграђене Реацт функције за додавање вртешке.
Коришћење уграђених функција
Први метод прављења вртешке у Реацт.јс је коришћење уграђених функција. Реацт пружа моћан начин за креирање вртешке коришћењем компоненти. Можете користите Реацт куке за додавање и контролу вртешке.
увоз Реагујте, { усеСтате } из 'реаговати';конст Вртешка = () => {
конст [индекс, сетИндек] = усеСтате(0);
конст дужина = 3;
конст хандлеПретходно = () => {
конст невИндек = индекс - 1;
сетИндек (невИндек < 0? дужина - 1: невИндек);
};
конст хандлеНект = () => {
конст невИндек = индекс + 1;
сетИндек (невИндек >= дужина? 0: невИндек);
};
повратак (
<див цлассНаме="вртешка">
<дугме онЦлицк={хандлеПревиоус}>Претходна</button>
<дугме онЦлицк={хандлеНект}>Следећи</button>
<стр>{индек}</п>
</div>
);
};
извозУобичајено Цароусел;
Овај код користи закачицу усеСтате да креира променљиву стања која се зове индекс. Ово ће пратити тренутну позицију у вртешци.
Функције хандлеПревиоус и хандлеНект воде рачуна о ажурирању вредности индекса када корисник кликне на Претходна и Следећи дугмад.
Коначно, ознака приказује вредност индекса у ознаци пасуса. Можете приказати слике или видео записе уместо текста ако желите. Такође можете да стилизујете вртешку користећи нормалан ЦСС или користећи ЦСС оквир као што је Таилвинд ЦСС.
Без икаквог фенси стила, требало би да видите основни пар дугмади и број који представља тренутни индекс:
Коришћење библиотеке пуре-реацт-цароусел
Други метод прављења вртешке у Реацт.јс је библиотека чиста реаговање вртешке. Ова библиотека пружа моћан начин за креирање вртешке уз коришћење компоненти. Да бисте користили библиотеку, прво морате да је инсталирате помоћу команде:
нпм инсталирај пуре-реацт-цароуселКада инсталирате библиотеку, можете користити компоненту за креирање вртешке. Ево примера како да користите компоненту Цароусел:
увоз Реаговати из 'реаговати';
увоз { ЦароуселПровидер, клизач, слајд, БуттонБацк, БуттонНект } из 'пуре-реацт-цароусел';
увоз 'пуре-реацт-цароусел/дист/реацт-цароусел.ес.цсс';конст Вртешка = () => {
повратак (
<ЦароуселПровидер
натуралСлидеВидтх={100}
натуралСлидеХеигхт={120}
тоталСлидес={3}
>
<Клизач>
<Индекс слајда={0}>Слајд 1</Slide>
<Индекс слајда={1}>Слајд 2</Slide>
<Индекс слајда={2}>Слајд 3</Slide>
</Slider>
<БуттонБацк>Назад</ButtonBack>
<БуттонНект>Следећи</ButtonNext>
</CarouselProvider>
);
};
извозУобичајено Цароусел;
У овом коду можете видети да компонента ЦароуселПровидер дефинише опште поставке за вртешку као што су натуралСлидеВидтх, натуралСлидеХеигхт и тоталСлидес.
Компонента Слидер садржи неколико инстанци слајда. Компонента Слајд дефинише сваки појединачни слајд.
Коначно, компоненте БуттонБацк и БуттонНект управљају навигацијом кроз вртешку.
Постоје многе предности коришћења библиотеке чисте реакције карусела као што су:
- Једноставан за коришћење: Док уграђени метод захтева више кода за прављење вртешке, библиотека пружа лакши начин за прављење вртешке у Реацт.јс.
- Одговарајући: Библиотека пружа могућност креирања вртешке са одзивом. Са уграђеном методом, морали бисте да направите засебну вртешку за различите величине екрана.
- Подешавање: Библиотека пружа многе функције које можете да користите за прилагођавање вртешке, као што су аутоматска репродукција, стрелице за навигацију, пагинација и још много тога.
Коришћење библиотеке реаговања карусела
Коначни метод за прављење вртешке у Реацт.јс је библиотека реацт-респонсиве-цароусел. Са овом библиотеком можете креирати вртешку уз коришћење компоненти. Да бисте користили библиотеку, прво морате да је инсталирате помоћу команде:
нпм инсталирај реаговати-реаговати-вртешкаКада инсталирате библиотеку, можете користити компоненту за креирање вртешке. Ево примера како да користите компоненту Цароусел:
увоз Реаговати из 'реаговати';
увоз { Вртешка} из 'реацт-респонсиве-цароусел';
увоз 'реацт-респонсиве-цароусел/либ/стилес/цароусел.мин.цсс';конст ЦароуселПаге = () => {
повратак (
<Вртешка>
<див>
<имг срц="https://placehold.co/100x100" />
<п цлассНаме="легенда">Легенда 1</п>
</div>
<див>
<имг срц="https://placehold.co/200x200" />
<п цлассНаме="легенда">Легенда 2</п>
</div>
<див>
<имг срц="https://placehold.co/300x300" />
<п цлассНаме="легенда">Легенда 3</п>
</div>
</Carousel>
);
};
извозУобичајено ЦароуселПаге;
У овом коду можете видети да компонента Цароусел дефинише вртешку. Унутар компоненте Цароусел, див садржи сваки појединачни слајд. Сваки слајд може да садржи слику као и легенду за ту слику. Библиотека такође нуди низ опција и подешавања које можете да користите за прилагођавање вртешке.
Постоје многе предности коришћења библиотеке вртешке која реагује као што су:
- Једна од најпопуларнијих библиотека: Библиотека је једна од најпопуларнијих библиотека за прављење вртешки у Реацт.јс. Дакле, ако се заглавите, лако можете пронаћи помоћ од заједнице.
- Једноставан за коришћење: Са само неколико линија кода, можете лако да креирате вртешку.
- Одговарајући: Библиотека пружа могућност креирања вртешке са одзивом.
- Подешавање: Библиотека такође нуди многе функције које можете користити за прилагођавање и стилизовање вртешки.
Побољшајте корисничко искуство помоћу вртешке
Помоћу вртешке можете пружити више информација корисницима и помоћи им да лакше комуницирају са вашом веб локацијом. Вртешке такође помажу да страница буде организована и визуелно привлачна. Као резултат, то је одличан начин за побољшање корисничког искуства.
Такође можете пратити интеракцију корисника са вашим вртешкама и користити податке за оптимизацију корисничког искуства. Ово ће вам помоћи да креирате боље корисничко искуство на вашој веб локацији. Након тога, своју Реацт апликацију можете бесплатно да примените на платформама као што су Гитхуб странице, што је једноставно и исплативо.
