јКуери и Реацт су популарне ЈаваСцрипт библиотеке за фронт-енд развој. Док је јКуери ДОМ библиотека за манипулацију, Реацт је ЈаваСцрипт библиотека за изградњу корисничких интерфејса.

Сазнајте како да мигрирате постојећу апликацију са јКуери на Реацт.

јКуери вс. Реаговати?

Када је у питању избор између јКуери и Реацт-а, зависи од ваших потреба и преференција. Ако тражите библиотеку која је лака за коришћење и која има велику заједницу, онда је јКуери добар избор. Али ако тражите библиотеку која је погоднија за развој великих размера, Реацт је боља опција.

Зашто прећи са јКуери на Реацт?

Постоји неколико разлога зашто бисте можда желели да мигрирате своју апликацију са јКуери на Реацт.

  • Реацт је бржи од јКуери-ја: Ако говоримо о сировим перформансама, Реацт је бржи од јКуери-ја. То је зато што Реацт користи виртуелни ДОМ, који је ЈаваСцрипт репрезентација стварног ДОМ-а. То значи да када корисник ступи у интеракцију са Реацт апликацијом, само делови ДОМ-а који се промене ће се ажурирати. Ово је ефикасније од јКуери-јеве пуне ДОМ манипулације.
    • instagram viewer
  • Реацт је лакши за одржавање: Још један разлог за прелазак на Реацт је тај што је лакше одржавати него јКуери. То је зато што су Реацт компоненте самосталне, тако да их можете лако поново користити. То значи да ако треба да промените Реацт компоненту, то можете учинити без утицаја на остатак кодне базе.
  • Реацт је скалабилнији: Коначно, Реацт је скалабилнији од јКуери-ја. Користи архитектуру засновану на компонентама, која је скалабилнија од јКуери монолитног приступа. То значи да можете лако проширити и модификовати Реацт апликацију по потреби.
  • Реацт има бољу подршку за тестирање јединица: Када је у питању тестирање јединица, Реацт има бољу подршку од јКуери-ја. Пошто можете лако да изолујете Реацт компоненте, лакше је писати тестове јединица за њих.

Како да пренесете своју апликацију са јКуери на Реацт

Ако планирате да мигрирате своју апликацију са јКуери на Реацт, постоји неколико ствари које треба да имате на уму. Важно је да знате шта треба да почнете и да стекнете добру представу о томе како можете да мигрирате појединачне делове ваше апликације.

Предуслови

Пре него што започнете процес миграције, потребно је да урадите неколико ствари да бисте поставили ствари. Прво, морате креирајте Реацт апликацију користећи цреате-реацт-апп.

Након што сте инсталирали ове зависности, потребно је да креирате датотеку под називом индек.јс у вашем срц именик. Ова датотека ће бити улазна тачка за вашу Реацт апликацију.

Коначно, можете прећи на појединачне делове ваше базе кодова и ажурирати их у складу са тим.

1. Руковање догађајима

У јКуери-ју можете приложити догађаје елементима. На пример, ако имате дугме, можете му приложити догађај клика. Када неко кликне на дугме, покренуће се обрађивач догађаја.

$("дугме").кликни(функција() {
// Уради нешто
});

Реакција другачије обрађује догађаје. Уместо да прилажете догађаје елементима, ви их дефинишете у компонентама. На пример, ако имате дугме, дефинисали бисте догађај клика у компоненти:

класаДугмепротежеРеаговати.Саставни део{
 хандлеЦлицк() {
// Уради нешто
 }
 дати, пружити() {
повратак (
<дугме онЦлицк={тхис.хандлеЦлицк}>
 Кликни ме!
</button>
 );
 }
}

Овде компонента Буттон садржи дефиницију методе хандлеЦлицк(). Када неко кликне на дугме, овај метод ће се покренути.

Свака метода има своје предности и мане. У јКуери-ју, догађаје је лако приложити и уклонити. Међутим, може бити тешко пратити их ако имате много догађаја. У Реацт-у дефинишете догађаје у компонентама, што може олакшати њихово праћење. Али није их тако лако причврстити и уклонити.

Ако користите Реацт, мораћете да ажурирате свој код да бисте користили нови метод руковања догађајима. За сваки догађај који желите да обрадите, мораћете да дефинишете метод у компоненти. Овај метод ће се покренути када се догађај покрене.

2. Ефекти

У јКуери-ју можете користити методе .схов() или .хиде() да бисте приказали или сакрили елемент. На пример:

$("#елемент").Прикажи();

У Реацт-у можете користити закачицу усеСтате() за управљање стањем. На пример, ако желите да прикажете или сакријете елемент, дефинисали бисте стање у компоненти:

увоз { усеСтате } из "реаговати";
функцијаСаставни део() {
конст [исСховн, сетИсСховн] = усеСтате(лажно);
повратак (
<див>
 {је приказан &&<див>Здраво!</div>}
<дугме онЦлицк={() => сетИсСховн(!исСховн)}>
 Искључи
</button>
</div>
 );
}

Овај код дефинише променљиву стања исСховн и функцију сетИсСховн(). Реацт има различите врсте удица које можете да користите у својој апликацији, од којих је усеСтате једно. Када корисник кликне на дугме, променљива стања исСховн се ажурира и елемент се приказује само када је прикладно.

У јКуерију, ефекти су лаки за коришћење и добро функционишу. Међутим, може бити тешко управљати њима ако их имате пуно. У Реацт-у, ефекти живе унутар компоненти што може олакшати управљање њима, ако не и тако једноставно за коришћење.

3. Дохваћање података

У јКуери-ју можете користити методу $.ајак() за преузимање података. На пример, ако желите да преузмете неке ЈСОН податке, то можете учинити овако:

$.ајак({
 урл: "https://example.com/data.json",
 тип података: "јсон",
 успех: функција(података) {
 // урадите нешто са тхе података
 }
});

У Реацт-у можете користити методу фетцх() за преузимање података. Ево како можете да преузмете ЈСОН податке користећи овај метод:

донеси ("https://example.com/data.json")
 .онда (одговор => респонсе.јсон())
 .онда (подаци => {
 // урадите нешто са тхе података
 });

У јКуерију, метод $.ајак() је једноставан за коришћење. Међутим, може бити тешко носити се са грешкама. У Реацт-у, метода фетцх() је опширнија, али је лакше руковати грешкама.

4. ЦСС

У јКуери-ју можете одредити ЦСС по страници. На пример, ако желите да стилизујете сва дугмад на страници, то можете учинити тако што ћете циљати елемент дугмета:

дугме {
 боја позадине: црвена;
 бела боја;
}

У Реацт-у можете користити ЦСС на различите начине. Један од начина је коришћење инлине стилова. На пример, ако желите да стилизујете дугме, то можете учинити додавањем атрибута стиле елементу:

<буттон стиле={{бацкгроундЦолор: 'црвена', боја: 'бео'}}>
 Кликни ме!
</button>

Други начин стилизовања Реацт компоненти је коришћење глобалних стилова. Глобални стилови су ЦСС правила која дефинишете ван компоненте и примењујете на све компоненте у апликацији. Да бисте то урадили, можете користити ЦСС-ин-ЈС библиотеку као што је стилед-цомпонентс:

увоз стилизовано из 'стилед-цомпонентс';
конст Дугме = стилизовано.дугме`
 боја позадине: црвена;
 бела боја;
`;

Не постоји прави или погрешан избор између инлине стилова и глобалних стилова. То заиста зависи од ваших захтева. Генерално, уграђени стилови су лакши за коришћење за мале пројекте. За веће пројекте, глобални стилови су боља опција.

Лако примените своју Реацт апликацију

Једна од најзначајнијих предности Реацт-а је то што је веома лако применити вашу Реацт апликацију. Реацт можете применити на било ком статичком веб серверу. Само треба да компајлирате свој код користећи алатку као што је Вебпацк, а затим ставите резултујућу датотеку бундле.јс на свој веб сервер.

Такође можете бесплатно да хостујете своју Реацт апликацију на ГитХуб страницама.