A jQuery és a React egyaránt népszerű JavaScript-könyvtár a front-end fejlesztéshez. Míg a jQuery egy DOM-manipulációs könyvtár, addig a React egy JavaScript-könyvtár a felhasználói felületek létrehozásához.

Ismerje meg, hogyan migrálhat át egy meglévő alkalmazást a jQuery szolgáltatásból a React rendszerbe.

jQuery vs. Reagál?

A jQuery és a React közötti választás az Ön igényeitől és preferenciáitól függ. Ha olyan könyvtárat keres, amely könnyen használható és nagy közösséggel rendelkezik, akkor a jQuery jó választás. De ha olyan könyvtárat keres, amely alkalmasabb a nagyszabású fejlesztésre, a React a jobb megoldás.

Miért érdemes áttérni a jQuery-ről a Reactre?

Számos oka lehet annak, hogy miért érdemes áttelepíteni az alkalmazást a jQuery szolgáltatásból a React rendszerbe.

  • A React gyorsabb, mint a jQuery: Ha nyers teljesítményről beszélünk, a React gyorsabb, mint a jQuery. Ennek az az oka, hogy a React egy virtuális DOM-ot használ, amely a tényleges DOM JavaScript-reprezentációja. Ez azt jelenti, hogy amikor a felhasználó interakcióba lép egy React alkalmazással, a DOM-nak csak a megváltozott részei frissülnek. Ez hatékonyabb, mint a jQuery teljes DOM-manipulációja.
    instagram viewer
  • A React karbantarthatóbb: A Reactra való átállás másik oka az, hogy jobban karbantartható, mint a jQuery. Ennek az az oka, hogy a React összetevői önállóak, így könnyen újra felhasználhatók. Ez azt jelenti, hogy ha módosítania kell egy React-összetevőt, akkor ezt megteheti anélkül, hogy ez befolyásolná a kódbázis többi részét.
  • A React skálázhatóbb: Végül a React jobban méretezhető, mint a jQuery. Komponens alapú architektúrát használ, amely jobban skálázható, mint a jQuery monolitikus megközelítése. Ez azt jelenti, hogy szükség szerint egyszerűen bővítheti és módosíthatja a React alkalmazást.
  • A React jobban támogatja az egységtesztet: Ami az egységtesztet illeti, a React jobban támogatja, mint a jQuery. Mivel könnyen elkülönítheti a React összetevőit, könnyebb egységteszteket írni hozzájuk.

Az alkalmazás áttelepítése a jQuery-ből a React-ba

Ha azt tervezi, hogy alkalmazását a jQuery-ről a React-ra migrálja, néhány dolgot szem előtt kell tartania. Fontos tudnia, mire van szüksége a kezdéshez, és jó ötletet szerezni arról, hogyan migrálhatja át az alkalmazás egyes részeit.

Előfeltételek

Az áttelepítési folyamat megkezdése előtt néhány dolgot meg kell tennie a dolgok beállításához. Először is kell hozzon létre egy React alkalmazást a create-react-app használatával.

Miután telepítette ezeket a függőségeket, létre kell hoznia egy nevű fájlt index.js a tiédben src Könyvtár. Ez a fájl lesz a React alkalmazás belépési pontja.

Végül továbbléphet a kódbázis egyes részeire, és ennek megfelelően frissítheti azokat.

1. Események kezelése

A jQueryben eseményeket csatolhat az elemekhez. Például, ha van egy gombja, csatolhat egy kattintási eseményt. Ha valaki rákattint a gombra, az eseménykezelő elindul.

$("button").click(funkció() {
// csinálj valamit
});

A React másképp kezeli az eseményeket. Ahelyett, hogy eseményeket csatolna az elemekhez, komponensekben határozza meg azokat. Például, ha van egy gombja, akkor a kattintási eseményt az összetevőben kell meghatároznia:

osztályGombkiterjedReagál.Összetevő{
 handleClick() {
// csinálj valamit
 }
 Vakol() {
Visszatérés (
<button onClick={this.handleClick}>
 Kattints ide!
</button>
 );
 }
}

Itt a Button komponens tartalmazza a handleClick() metódus definícióját. Ha valaki rákattint a gombra, ez a módszer elindul.

Mindegyik módszernek megvannak a maga előnyei és hátrányai. A jQuery alkalmazásban az események könnyen csatolhatók és eltávolíthatók. Azonban nehéz lehet nyomon követni őket, ha sok esemény van. A React alkalmazásban összetevőkben határozhatja meg az eseményeket, ami megkönnyítheti azok nyomon követését. De nem olyan egyszerű rögzíteni és eltávolítani.

Ha Reactot használ, frissítenie kell a kódot az új eseménykezelési módszer használatához. Minden kezelni kívánt eseményhez meg kell határoznia egy metódust az összetevőben. Ez a módszer akkor fut le, amikor az esemény aktiválódik.

2. Hatások

A jQueryben a .show() vagy .hide() metódusokat használhatja egy elem megjelenítésére vagy elrejtésére. Például:

$("#elem").előadás();

A React alkalmazásban a useState() hook segítségével kezelheti az állapotot. Ha például egy elemet szeretne megjeleníteni vagy elrejteni, akkor az állapotot az összetevőben kell megadnia:

import { useState } tól től "reagál";
funkcióÖsszetevő() {
const [isShown, setIsShown] = useState(hamis);
Visszatérés (
<div>
 {megmutatva &&<div>Helló!</div>}
<gomb onClick={() => setIsShown(!isShown)}>
 Váltás
</button>
</div>
 );
}

Ez a kód határozza meg az isShown állapotváltozót és a setIsShown() függvényt. React rendelkezik különböző típusú horgok amelyeket az alkalmazásában használhat, amelyek közül a useState az egyik. Amikor a felhasználó rákattint a gombra, az isShown állapotváltozó frissül, és az elem csak akkor jelenik meg, ha szükséges.

A jQueryben az effektusok könnyen használhatók, és jól működnek. Azonban nehéz lehet kezelni őket, ha sok van belőlük. A React alkalmazásban az effektusok az összetevőkben élnek, ami megkönnyíti a kezelésüket, ha nem is olyan könnyen használhatóvá.

3. Adatlekérés

A jQuery alkalmazásban a $.ajax() metódus használható az adatok lekérésére. Ha például JSON-adatokat szeretne lekérni, ezt a következőképpen teheti meg:

$.ajax({
 url: "https://example.com/data.json",
 adattípus: "json",
 siker: funkció(adat) {
 // csináld valami val vel a adat
 }
});

A React alkalmazásban a fetch() metódus használható az adatok lekérésére. A következőképpen kérheti le a JSON-adatokat ezzel a módszerrel:

fetch("https://example.com/data.json")
 .then (válasz => válasz.json())
 .then (adat => {
 // csináld valami val vel a adat
 });

A jQuery-ben a $.ajax() metódus könnyen használható. A hibák kezelése azonban nehéz lehet. A Reactban a fetch() metódus bőbeszédűbb, de könnyebben kezelhető a hibák.

4. CSS

A jQueryben oldalanként adhatja meg a CSS-t. Ha például egy oldal összes gombjának stílusát szeretné alakítani, ezt a gombelem megcélzásával teheti meg:

gomb {
 háttérszín: piros;
 fehér szín;
}

A Reactban többféleképpen használhatja a CSS-t. Az egyik módja a soron belüli stílusok használata. Például, ha stílust szeretne alakítani egy gombon, ezt úgy teheti meg, hogy hozzáadja a style attribútumot az elemhez:

<gomb style={{backgroundColor: 'piros', szín: 'fehér'}}>
 Kattints ide!
</button>

A React összetevők stílusának másik módja a globális stílusok használata. A globális stílusok olyan CSS-szabályok, amelyeket egy összetevőn kívül határoz meg, és az alkalmazás összes összetevőjére alkalmazza. Ehhez használhat CSS-in-JS könyvtárat, például stílusos összetevőket:

import stílusú tól től „stílusú komponensek”;
const Gomb = stílusos.gomb`
 háttérszín: piros;
 fehér szín;
`;

Nincs jó vagy rossz választás a belső stílusok és a globális stílusok között. Ez valóban az Ön igényeitől függ. Általában a beépített stílusok könnyebben használhatók kis projektekhez. Nagyobb projektek esetén a globális stílusok jobb megoldást jelentenek.

Könnyen üzembe helyezheti React alkalmazását

A React egyik legjelentősebb előnye, hogy nagyon könnyű telepíteni a React alkalmazást. A Reactot bármely statikus webszerverre telepítheti. Csak le kell fordítania a kódot egy olyan eszközzel, mint a Webpack, majd el kell helyeznie a kapott bundle.js fájlt a webszerverére.

A React alkalmazást ingyenesen is tárolhatja a GitHub oldalain.