jQuery i React to popularne biblioteki JavaScript do programowania front-end. Podczas gdy jQuery jest biblioteką do manipulacji DOM, React jest biblioteką JavaScript do budowania interfejsów użytkownika.

Dowiedz się, jak przeprowadzić migrację istniejącej aplikacji z jQuery do React.

jQuery vs. Reagować?

Jeśli chodzi o wybór między jQuery a React, zależy to od Twoich potrzeb i preferencji. Jeśli szukasz biblioteki, która jest łatwa w użyciu i ma dużą społeczność, jQuery to dobry wybór. Ale jeśli szukasz biblioteki, która jest bardziej odpowiednia do programowania na dużą skalę, React jest lepszą opcją.

Dlaczego warto migrować z jQuery do React?

Istnieje kilka powodów, dla których warto przeprowadzić migrację aplikacji z jQuery do React.

  • React jest szybszy niż jQuery: Jeśli mówimy o surowej wydajności, React jest szybszy niż jQuery. Dzieje się tak, ponieważ React używa wirtualnego DOM, który jest reprezentacją rzeczywistego DOM w JavaScript. Oznacza to, że gdy użytkownik wchodzi w interakcję z aplikacją React, aktualizowane są tylko te części DOM, które uległy zmianie. Jest to bardziej wydajne niż pełna manipulacja DOM w jQuery.
    instagram viewer
  • React jest łatwiejszy w utrzymaniu: Innym powodem migracji do React jest to, że jest łatwiejszy w utrzymaniu niż jQuery. Dzieje się tak dlatego, że komponenty React są samowystarczalne, dzięki czemu można je łatwo ponownie wykorzystać. Oznacza to, że jeśli chcesz wprowadzić zmiany w komponencie React, możesz to zrobić bez wpływu na resztę bazy kodu.
  • React jest bardziej skalowalny: Wreszcie, React jest bardziej skalowalny niż jQuery. Wykorzystuje architekturę opartą na komponentach, która jest bardziej skalowalna niż monolityczne podejście jQuery. Oznacza to, że możesz łatwo rozszerzać i modyfikować aplikację React w razie potrzeby.
  • React ma lepsze wsparcie dla testów jednostkowych: Jeśli chodzi o testy jednostkowe, React ma lepsze wsparcie niż jQuery. Ponieważ możesz łatwo wyizolować komponenty Reacta, łatwiej jest napisać dla nich testy jednostkowe.

Jak przeprowadzić migrację aplikacji z jQuery do React

Jeśli planujesz migrację aplikacji z jQuery do React, musisz pamiętać o kilku rzeczach. Ważne jest, aby wiedzieć, od czego zacząć i dobrze zorientować się, w jaki sposób można przeprowadzić migrację poszczególnych części aplikacji.

Wymagania wstępne

Zanim rozpoczniesz proces migracji, musisz wykonać kilka czynności, aby wszystko skonfigurować. Po pierwsze, musisz stworzyć aplikację React za pomocą aplikacji twórz-reaguj.

Po zainstalowaniu tych zależności należy utworzyć plik o nazwie indeks.js w Twoim źródło informator. Ten plik będzie punktem wejścia dla Twojej aplikacji React.

Na koniec możesz przejść do poszczególnych części bazy kodu i odpowiednio je zaktualizować.

1. Obsługa zdarzeń

W jQuery możesz dołączać zdarzenia do elementów. Na przykład, jeśli masz przycisk, możesz dołączyć do niego zdarzenie kliknięcia. Gdy ktoś kliknie przycisk, zostanie uruchomiony program obsługi zdarzeń.

$("przycisk").click(funkcjonować() {
// Zrób coś
});

React obsługuje zdarzenia inaczej. Zamiast dołączać zdarzenia do elementów, definiujesz je w komponentach. Na przykład, jeśli masz przycisk, zdefiniuj zdarzenie kliknięcia w komponencie:

klasaPrzyciskrozciąga sięReagować.Część{
 uchwytKliknij() {
// Zrób coś
 }
 renderowanie() {
powrót (
<button onClick={this.handleClick}>
 Kliknij!
</button>
 );
 }
}

Tutaj komponent Button zawiera definicję metody handleClick(). Gdy ktoś kliknie przycisk, ta metoda zostanie uruchomiona.

Każda metoda ma swoje wady i zalety. W jQuery zdarzenia można łatwo dołączać i usuwać. Jednak śledzenie ich może być trudne, jeśli masz wiele wydarzeń. W React definiujesz zdarzenia w komponentach, co może ułatwić ich śledzenie. Ale nie są tak łatwe do zamocowania i usunięcia.

Jeśli używasz React, będziesz musiał zaktualizować swój kod, aby korzystać z nowej metody obsługi zdarzeń. Dla każdego zdarzenia, które chcesz obsłużyć, musisz zdefiniować metodę w komponencie. Ta metoda zostanie uruchomiona po wyzwoleniu zdarzenia.

2. Efekty

W jQuery możesz użyć metod .show() lub .hide() do pokazania lub ukrycia elementu. Na przykład:

$("#element").pokazywać();

W React możesz użyć haka useState() do zarządzania stanem. Na przykład, jeśli chcesz pokazać lub ukryć element, zdefiniuj stan w komponencie:

import { stan użycia } z "reagować";
funkcjonowaćCzęść() {
konst [isShown, setIsShown] = useState(FAŁSZ);
powrót (
<dz>
 {jest pokazane &&<dz>Cześć!</div>}
<przycisk onClick={() => setIsPokazano(!pokazano)}>
 Przełącznik
</button>
</div>
 );
}

Ten kod definiuje zmienną stanu isShown i funkcję setIsShown(). Reaguj ma różne rodzaje haków których możesz użyć w swojej aplikacji, z których jednym jest useState. Gdy użytkownik kliknie przycisk, zmienna stanu isShown zostanie zaktualizowana, a element zostanie wyświetlony tylko wtedy, gdy będzie to konieczne.

W jQuery efekty są łatwe w użyciu i działają dobrze. Jednak zarządzanie nimi może być trudne, jeśli masz ich dużo. W React efekty znajdują się wewnątrz komponentów, co może ułatwić zarządzanie nimi, jeśli nie tak łatwe w użyciu.

3. Pobieranie danych

W jQuery możesz użyć metody $.ajax() do pobierania danych. Na przykład, jeśli chcesz pobrać niektóre dane JSON, możesz to zrobić w następujący sposób:

$.ajax({
 Adres URL: "https://example.com/data.json",
 typ danych: "json",
 powodzenie: funkcjonować(dane) {
 // Do coś z the dane
 }
});

W React możesz użyć metody fetch() do pobierania danych. Oto jak możesz pobrać dane JSON przy użyciu tej metody:

aportować("https://example.com/data.json")
 .to (odpowiedź => odpowiedź.json())
 .to (dane => {
 // Do coś z the dane
 });

W jQuery metoda $.ajax() jest łatwa w użyciu. Jednak obsługa błędów może być trudna. W React metoda fetch() jest bardziej szczegółowa, ale łatwiej jest obsługiwać błędy.

4. CSS

W jQuery możesz określić CSS według strony. Na przykład, jeśli chcesz nadać styl wszystkim przyciskom na stronie, możesz to zrobić, kierując element przycisku:

przycisk {
 kolor tła: czerwony;
 kolor biały;
}

W React możesz używać CSS na różne sposoby. Jednym ze sposobów jest użycie stylów wbudowanych. Na przykład, jeśli chcesz nadać styl przyciskowi, możesz to zrobić, dodając atrybut style do elementu:

<styl przycisku={{kolor tła: 'czerwony', kolor: 'biały'}}>
 Kliknij!
</button>

Innym sposobem stylizowania komponentów Reacta jest używanie globalnych stylów. Style globalne to reguły CSS definiowane poza komponentem i stosowane do wszystkich komponentów w aplikacji. Aby to zrobić, możesz użyć biblioteki CSS-in-JS, takiej jak styled-components:

import stylizowany z „stylizowane komponenty”;
konst Przycisk = stylizowany przycisk`
 kolor tła: czerwony;
 kolor biały;
`;

Nie ma dobrego ani złego wyboru między stylami wbudowanymi a stylami globalnymi. To naprawdę zależy od twoich wymagań. Ogólnie rzecz biorąc, style wbudowane są łatwiejsze w użyciu w przypadku małych projektów. W przypadku większych projektów lepszą opcją są style globalne.

Łatwe wdrażanie aplikacji React

Jedną z najważniejszych zalet React jest to, że wdrożenie aplikacji React jest bardzo łatwe. Możesz wdrożyć React na dowolnym statycznym serwerze WWW. Wystarczy skompilować kod za pomocą narzędzia takiego jak Webpack, a następnie umieścić wynikowy plik bundle.js na serwerze internetowym.

Możesz także hostować swoją aplikację React za darmo na stronach GitHub.