jQuery и React са популярни библиотеки на JavaScript за разработка в предния край. Докато jQuery е библиотека за манипулиране на DOM, React е JavaScript библиотека за изграждане на потребителски интерфейси.

Разберете как да мигрирате съществуващо приложение от jQuery към React.

jQuery срещу. реагирам?

Когато става въпрос за избор между jQuery и React, това зависи от вашите нужди и предпочитания. Ако търсите библиотека, която е лесна за използване и има голяма общност, тогава jQuery е добър избор. Но ако търсите библиотека, която е по-подходяща за широкомащабно развитие, React е по-добрият вариант.

Защо да мигрирате от jQuery към React?

Има няколко причини, поради които може да искате да мигрирате приложението си от jQuery към React.

  • React е по-бърз от jQuery: Ако говорим за сурова производителност, React е по-бърз от jQuery. Това е така, защото React използва виртуален DOM, който е JavaScript представяне на действителния DOM. Това означава, че когато потребител взаимодейства с React приложение, само частите от DOM, които се променят, ще се актуализират. Това е по-ефективно от пълното манипулиране на DOM на jQuery.
    instagram viewer
  • React е по-поддържаем: Друга причина да мигрирате към React е, че е по-поддържан от jQuery. Това е така, защото компонентите на React са самостоятелни, така че можете лесно да ги използвате повторно. Това означава, че ако трябва да направите промяна в React компонент, можете да го направите, без да засягате останалата част от кодовата база.
  • React е по-мащабируем: И накрая, React е по-мащабируем от jQuery. Той използва базирана на компоненти архитектура, която е по-мащабируема от монолитния подход на jQuery. Това означава, че можете лесно да разширите и модифицирате React приложение, ако е необходимо.
  • React има по-добра поддръжка за тестване на единици: Когато става въпрос за тестване на единици, React има по-добра поддръжка от jQuery. Тъй като можете лесно да изолирате React компонентите, е по-лесно да пишете модулни тестове за тях.

Как да мигрирате приложението си от jQuery към React

Ако планирате да мигрирате приложението си от jQuery към React, има няколко неща, които трябва да имате предвид. Важно е да знаете от какво се нуждаете, за да започнете и да получите добра представа как можете да мигрирате отделни части от вашето приложение.

Предпоставки

Преди да започнете процеса на мигриране, има няколко неща, които трябва да направите, за да настроите нещата. Първо, трябва да създайте приложение React с помощта на create-react-app.

След като инсталирате тези зависимости, трябва да създадете файл, наречен index.js във вашия src указател. Този файл ще бъде входната точка за вашето React приложение.

Накрая можете да преминете към отделни части от вашата кодова база и да ги актуализирате съответно.

1. Обработка на събития

В jQuery можете да прикачвате събития към елементи. Например, ако имате бутон, можете да прикачите събитие за щракване към него. Когато някой щракне върху бутона, манипулаторът на събития ще се стартира.

$("бутон").click(функция() {
// направи нещо
});

React обработва събитията по различен начин. Вместо да прикачвате събития към елементи, вие ги дефинирате в компоненти. Например, ако имате бутон, ще дефинирате събитието за щракване в компонента:

класБутонсе простираРеагирайте.Компонент{
 handleClick() {
// направи нещо
 }
 рендер() {
връщане (
<бутон onClick={this.handleClick}>
 Щракни ме!
</button>
 );
 }
}

Тук компонентът Button съдържа дефиницията на метода handleClick(). Когато някой щракне върху бутона, този метод ще се изпълни.

Всеки метод има своите плюсове и минуси. В jQuery събитията са лесни за прикачване и премахване. Въпреки това може да е трудно да ги следите, ако имате много събития. В React дефинирате събития в компоненти, което може да ги направи по-лесни за проследяване. Но те не са толкова лесни за закрепване и премахване.

Ако използвате React, ще трябва да актуализирате кода си, за да използвате новия метод за обработка на събития. За всяко събитие, което искате да обработите, ще трябва да дефинирате метод в компонента. Този метод ще се изпълнява, когато събитието се задейства.

2. Ефекти

В jQuery можете да използвате методите .show() или .hide(), за да покажете или скриете елемент. Например:

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

В React можете да използвате куката useState() за управление на състоянието. Например, ако искате да покажете или скриете елемент, ще дефинирате състоянието в компонента:

импортиране {useState} от "реагира";
функцияКомпонент() {
конст [isShown, setIsShown] = useState(невярно);
връщане (
<див>
 {е показан &&<див>Здравейте!</div>}
<бутон onClick={() => setIsShown(!isShown)}>
 Превключване
</button>
</div>
 );
}

Този код дефинира променливата на състоянието isShown и функцията setIsShown(). React има различни видове куки които можете да използвате в приложението си, едно от които е useState. Когато потребител щракне върху бутона, променливата на състоянието isShown се актуализира и елементът се показва само когато е подходящо.

В jQuery ефектите са лесни за използване и работят добре. Те обаче могат да бъдат трудни за управление, ако имате много от тях. В React ефектите живеят вътре в компоненти, което може да ги направи по-лесни за управление, ако не и толкова лесни за използване.

3. Извличане на данни

В jQuery можете да използвате метода $.ajax() за извличане на данни. Например, ако искате да извлечете някои JSON данни, можете да го направите по следния начин:

$.ajax({
 URL адрес: "https://example.com/data.json",
 тип данни: "json",
 успех: функция(данни) {
 // направи нещо с на данни
 }
});

В React можете да използвате метода fetch() за извличане на данни. Ето как можете да извлечете JSON данни, като използвате този метод:

извличане ("https://example.com/data.json")
 .след това (отговор => response.json())
 .след това (данни => {
 // направи нещо с на данни
 });

В jQuery методът $.ajax() е лесен за използване. Въпреки това може да е трудно да се справите с грешки. В React методът fetch() е по-подробен, но е по-лесен за обработка на грешки.

4. CSS

В jQuery можете да посочите CSS по страница. Например, ако искате да стилизирате всички бутони на страница, можете да го направите, като насочите елемента бутон:

бутон {
 цвят на фона: червен;
 цвят: бял;
}

В React можете да използвате CSS по различни начини. Един от начините е да използвате вградени стилове. Например, ако искате да стилизирате бутон, можете да го направите, като добавите атрибута style към елемента:

<бутон стил={{backgroundColor: 'червен', цвят: 'бяло'}}>
 Щракни ме!
</button>

Друг начин за стилизиране на React компоненти е използването на глобални стилове. Глобалните стилове са CSS правила, които дефинирате извън компонент и прилагате към всички компоненти в приложението. За да направите това, можете да използвате CSS-in-JS библиотека като styled-components:

импортиране стилизиран от 'стилизирани-компоненти';
конст Бутон = styled.button`
 цвят на фона: червен;
 цвят: бял;
`;

Няма правилен или грешен избор между вградени стилове и глобални стилове. Това наистина зависи от вашите изисквания. Като цяло вградените стилове са по-лесни за използване за малки проекти. За по-големи проекти глобалните стилове са по-добър вариант.

Разположете лесно вашето приложение React

Едно от най-значимите предимства на React е, че е много лесно да внедрите вашето приложение React. Можете да разположите React на всеки статичен уеб сървър. Просто трябва да компилирате кода си с помощта на инструмент като Webpack и след това да поставите получения файл bundle.js на вашия уеб сървър.

Можете също така да хоствате вашето React приложение безплатно на страниците на GitHub.