Migrácia vašej aplikácie z jQuery na React

jQuery a React sú populárne knižnice JavaScriptu pre vývoj front-endov. Zatiaľ čo jQuery je knižnica na manipuláciu DOM, React je knižnica JavaScript na vytváranie používateľských rozhraní.

Zistite, ako migrovať existujúcu aplikáciu z jQuery do React.

jQuery vs. Reagovať?

Pokiaľ ide o výber medzi jQuery a React, závisí to od vašich potrieb a preferencií. Ak hľadáte knižnicu, ktorá sa ľahko používa a má veľkú komunitu, potom je jQuery dobrou voľbou. Ale ak hľadáte knižnicu, ktorá je vhodnejšia pre rozsiahly vývoj, React je lepšia voľba.

Prečo migrovať z jQuery na React?

Existuje niekoľko dôvodov, prečo by ste mohli chcieť migrovať svoju aplikáciu z jQuery na React.

• React je rýchlejšia ako jQuery: Ak hovoríme o surovom výkone, React je rýchlejší ako jQuery. Je to preto, že React používa virtuálny DOM, čo je JavaScriptová reprezentácia skutočného DOM. To znamená, že keď používateľ interaguje s aplikáciou React, aktualizujú sa iba časti DOM, ktoré sa zmenia. Je to efektívnejšie ako úplná manipulácia DOM jQuery.
instagram viewer
• React je udržiavateľnejší: Ďalším dôvodom migrácie na React je, že sa dá lepšie udržiavať ako jQuery. Je to preto, že komponenty React sú samostatné, takže ich môžete jednoducho znova použiť. To znamená, že ak potrebujete vykonať zmenu v komponente React, môžete tak urobiť bez ovplyvnenia zvyšku kódovej základne.
• React je škálovateľnejší: Nakoniec, React je škálovateľnejší ako jQuery. Používa architektúru založenú na komponentoch, ktorá je škálovateľnejšia ako monolitický prístup jQuery. To znamená, že aplikáciu React môžete podľa potreby jednoducho rozširovať a upravovať.
• React má lepšiu podporu pre testovanie jednotiek: Pokiaľ ide o testovanie jednotiek, React má lepšiu podporu ako jQuery. Pretože komponenty React môžete ľahko izolovať, je jednoduchšie pre ne písať jednotkové testy.

Ako migrovať vašu aplikáciu z jQuery do React

Ak plánujete migrovať svoju aplikáciu z jQuery na React, je potrebné mať na pamäti niekoľko vecí. Je dôležité vedieť, čo potrebujete na začiatok, a získať dobrú predstavu o tom, ako môžete migrovať jednotlivé časti vašej aplikácie.

Predpoklady

Pred začatím procesu migrácie je potrebné vykonať niekoľko vecí, aby ste nastavili veci. Najprv musíte vytvorte aplikáciu React pomocou aplikácie create-react-app.

Po nainštalovaní týchto závislostí musíte vytvoriť súbor s názvom index.js v tvojom src adresár. Tento súbor bude vstupným bodom pre vašu aplikáciu React.

Nakoniec môžete prejsť na jednotlivé časti vašej kódovej základne a podľa toho ich aktualizovať.

1. Manipulácia s udalosťami

V jQuery môžete k prvkom pripojiť udalosti. Ak máte napríklad tlačidlo, môžete k nemu pripojiť udalosť kliknutia. Keď niekto klikne na tlačidlo, spustí sa obsluha udalosti.

$("tlačidlo").click(funkciu() {
// urob niečo
});

React spracováva udalosti inak. Namiesto pripájania udalostí k prvkom ich definujete v komponentoch. Napríklad, ak máte tlačidlo, definovali by ste udalosť kliknutia v komponente:

triedaTlačidlopredlžujeReagovať.Komponent{
 handleClick() {
// urob niečo
 }
 render() {
vrátiť (
<button onClick={this.handleClick}>
 Klikni na mňa!
</button>
 );
 }
}

Komponent Button tu obsahuje definíciu metódy handleClick(). Keď niekto klikne na tlačidlo, táto metóda sa spustí.

Každá metóda má svoje pre a proti. V jQuery sa udalosti ľahko pripájajú a odstraňujú. Ak však máte veľa udalostí, môže byť ťažké ich sledovať. V Reacte definujete udalosti v komponentoch, čo môže uľahčiť ich sledovanie. Nie je však také ľahké ich pripevniť a odstrániť.

Ak používate React, budete musieť aktualizovať svoj kód, aby ste mohli používať novú metódu spracovania udalostí. Pre každú udalosť, ktorú chcete spracovať, budete musieť definovať metódu v komponente. Táto metóda sa spustí pri spustení udalosti.

2. Účinky

V jQuery môžete použiť metódy .show() alebo .hide() na zobrazenie alebo skrytie prvku. Napríklad:

$("#element").šou();

V Reacte môžete použiť háčik useState() na správu stavu. Napríklad, ak chcete zobraziť alebo skryť prvok, definujte stav v komponente:

importovať { useState } od "reagovať";
funkciuKomponent() {
konšt [isShown, setIsShown] = useState(falošný);
vrátiť (
<div>
 {je ukázané &&<div>Ahoj!</div>}
<button onClick={() => setIsShown(!isShown)}>
 Prepnúť
</button>
</div>
 );
}

Tento kód definuje stavovú premennú isShown a funkciu setIsShown(). Reagovať má rôzne typy háčikov ktoré môžete použiť vo svojej aplikácii, pričom useState je jedným z nich. Keď používateľ klikne na tlačidlo, stavová premenná isShown sa aktualizuje a prvok sa zobrazí len vtedy, keď je to vhodné.

V jQuery sa efekty ľahko používajú a fungujú dobre. Ak ich však máte veľa, môže byť ťažké ich spravovať. V Reacte efekty žijú vo vnútri komponentov, čo môže uľahčiť ich spravovanie, ak nie také jednoduché.

3. Načítavanie údajov

V jQuery môžete použiť metódu $.ajax() na načítanie údajov. Ak chcete napríklad načítať nejaké údaje JSON, môžete to urobiť takto:

$.ajax({
 url: "https://example.com/data.json",
 Dátový typ: "json",
 úspech: funkciu(údajov) {
 // robiť niečo s na údajov
 }
});

V Reacte môžete použiť metódu fetch() na načítanie údajov. Údaje JSON môžete načítať pomocou tejto metódy:

priniesť ("https://example.com/data.json")
 .potom (odpoveď => response.json())
 .potom (údaje => {
 // robiť niečo s na údajov
 });

V jQuery sa metóda $.ajax() používa jednoducho. Môže však byť ťažké zvládnuť chyby. V Reacte je metóda fetch() podrobnejšia, ale ľahšie sa s ňou manipulujú.

4. CSS

V jQuery môžete špecifikovať CSS podľa stránky. Ak napríklad chcete upraviť štýl všetkých tlačidiel na stránke, môžete to urobiť zacielením na prvok tlačidla:

tlačidlo {
 farba pozadia: červená;
 farba: biela;
}

V Reacte môžete použiť CSS rôznymi spôsobmi. Jedným zo spôsobov je použitie inline štýlov. Ak chcete napríklad upraviť štýl tlačidla, môžete to urobiť pridaním atribútu štýlu do prvku:

<button style={{backgroundColor: 'červená', farba: 'biely'}}>
 Klikni na mňa!
</button>

Ďalším spôsobom úpravy komponentov Reactu je použitie globálnych štýlov. Globálne štýly sú pravidlá CSS, ktoré definujete mimo komponentu a aplikujete na všetky komponenty v aplikácii. Na tento účel môžete použiť knižnicu CSS-in-JS, ako sú napríklad komponenty so štýlom:

importovať štylizované od 'styled-components';
konšt Tlačidlo = štylizované.tlačidlo`
 farba pozadia: červená;
 farba: biela;
`;

Medzi vloženými štýlmi a globálnymi štýlmi neexistuje správna alebo nesprávna voľba. Veľmi záleží na vašich požiadavkách. Vo všeobecnosti sa inline štýly ľahšie používajú pre malé projekty. Pre väčšie projekty sú lepšou voľbou globálne štýly.

Jednoducho nasaďte svoju aplikáciu React

Jednou z najvýznamnejších výhod Reactu je, že je veľmi jednoduché nasadiť vašu React App. React môžete nasadiť na akýkoľvek statický webový server. Stačí skompilovať svoj kód pomocou nástroja, ako je Webpack, a potom umiestniť výsledný súbor bundle.js na váš webový server.

Svoju aplikáciu React môžete tiež bezplatne hostiť na stránkach GitHub.