jQuery a React jsou oblíbené knihovny JavaScriptu pro vývoj front-endu. Zatímco jQuery je knihovna pro manipulaci s DOM, React je knihovna JavaScriptu pro vytváření uživatelských rozhraní.

Zjistěte, jak migrovat existující aplikaci z jQuery do Reactu.

jQuery vs. Reagovat?

Pokud jde o výběr mezi jQuery a React, záleží na vašich potřebách a preferencích. Pokud hledáte knihovnu, která se snadno používá a má velkou komunitu, pak je jQuery dobrou volbou. Ale pokud hledáte knihovnu, která je vhodnější pro rozsáhlý vývoj, React je lepší volba.

Proč migrovat z jQuery na React?

Existuje několik důvodů, proč byste mohli chtít migrovat svou aplikaci z jQuery na React.

  • React je rychlejší než jQuery: Pokud mluvíme o surovém výkonu, React je rychlejší než jQuery. Je to proto, že React používá virtuální DOM, což je JavaScriptová reprezentace skutečného DOM. To znamená, že když uživatel komunikuje s aplikací React, aktualizují se pouze části DOM, které se změní. To je efektivnější než úplná manipulace DOM jQuery.
    • instagram viewer
  • React je lépe udržovatelný: Dalším důvodem k migraci na React je, že je lépe udržovatelný než jQuery. Je to proto, že komponenty React jsou samostatné, takže je můžete snadno znovu použít. To znamená, že pokud potřebujete provést změnu v komponentě React, můžete tak učinit bez ovlivnění zbytku kódové základny.
  • React je škálovatelnější: Konečně, React je škálovatelnější než jQuery. Používá architekturu založenou na komponentách, která je škálovatelnější než monolitický přístup jQuery. To znamená, že můžete snadno rozšířit a upravit aplikaci React podle potřeby.
  • React má lepší podporu pro testování jednotek: Pokud jde o testování jednotek, React má lepší podporu než jQuery. Protože můžete snadno izolovat komponenty Reactu, je jednodušší pro ně psát testy jednotek.

Jak migrovat vaši aplikaci z jQuery do React

Pokud plánujete migraci aplikace z jQuery na React, je třeba mít na paměti několik věcí. Je důležité vědět, co potřebujete pro začátek, a získat dobrou představu o tom, jak můžete migrovat jednotlivé části vaší aplikace.

Předpoklady

Než zahájíte proces migrace, je třeba udělat několik věcí, abyste mohli věci nastavit. Nejprve musíte vytvořit aplikaci React pomocí create-react-app.

Po instalaci těchto závislostí je třeba vytvořit soubor s názvem index.js ve vašem src adresář. Tento soubor bude vstupním bodem pro vaši aplikaci React.

Nakonec můžete přejít k jednotlivým částem vaší kódové základny a podle toho je aktualizovat.

1. Zpracování událostí

V jQuery můžete k prvkům připojit události. Pokud máte například tlačítko, můžete k němu připojit událost kliknutí. Když někdo klepne na tlačítko, spustí se obslužná rutina události.

$("tlačítko").click(funkce() {
// dělej něco
});

React zpracovává události jinak. Místo připojování událostí k prvkům je definujete v komponentách. Pokud máte například tlačítko, definovali byste událost kliknutí v komponentě:

třídaKnoflíkrozšiřujeReagovat.Komponent{
 handleClick() {
// dělej něco
 }
 poskytnout() {
vrátit se (
<button onClick={this.handleClick}>
 Klikni na mě!
</button>
 );
 }
}

Komponenta Button zde obsahuje definici metody handleClick(). Když někdo klikne na tlačítko, tato metoda se spustí.

Každá metoda má své pro a proti. V jQuery se události snadno připojují a odebírají. Může však být obtížné je sledovat, pokud máte mnoho událostí. V Reactu definujete události v komponentách, což může usnadnit jejich sledování. Ale není tak snadné je připevnit a odstranit.

Pokud používáte React, budete muset aktualizovat svůj kód, abyste mohli používat novou metodu zpracování událostí. Pro každou událost, kterou chcete zpracovat, budete muset v komponentě definovat metodu. Tato metoda se spustí, když se událost spustí.

2. Efekty

V jQuery můžete k zobrazení nebo skrytí prvku použít metody .show() nebo .hide(). Například:

$("#živel").ukázat();

V Reactu můžete ke správě stavu použít háček useState(). Pokud například chcete zobrazit nebo skrýt prvek, definujte stav v komponentě:

import { useState } z "reagovat";
funkceKomponent() {
konst [isShown, setIsShown] = useState(Nepravdivé);
vrátit se (
<div>
 {je ukázáno &&<div>Ahoj!</div>}
<button onClick={() => setIsShown(!isShown)}>
 Přepnout
</button>
</div>
 );
}

Tento kód definuje stavovou proměnnou isShown a funkci setIsShown(). React má různé typy háčků které můžete použít ve své aplikaci, z nichž useState je jedním. Když uživatel klepne na tlačítko, stavová proměnná isShown se aktualizuje a prvek se zobrazí pouze tehdy, když je to vhodné.

V jQuery se efekty snadno používají a fungují dobře. Pokud jich však máte hodně, může být obtížné je spravovat. V Reactu efekty žijí uvnitř komponent, což může usnadnit jejich správu, ne-li tak snadné použití.

3. Načítání dat

V jQuery můžete k načtení dat použít metodu $.ajax(). Pokud například chcete načíst některá data JSON, můžete to udělat takto:

$.ajax({
 url: "https://example.com/data.json",
 datový typ: "json",
 úspěch: funkce(data) {
 // dělat něco s a data
 }
});

V Reactu můžete k načtení dat použít metodu fetch(). Zde je návod, jak můžete načíst data JSON pomocí této metody:

vynést("https://example.com/data.json")
 .pak (odpověď => response.json())
 .pak (data => {
 // dělat něco s a data
 });

V jQuery je metoda $.ajax() snadno použitelná. Může však být obtížné zvládnout chyby. V Reactu je metoda fetch() podrobnější, ale je snazší ošetřit chyby.

4. CSS

V jQuery můžete specifikovat CSS podle stránky. Pokud například chcete upravit styl všech tlačítek na stránce, můžete tak učinit zacílením na prvek tlačítka:

knoflík {
 barva pozadí: červená;
 barva bílá;
}

V Reactu můžete CSS používat různými způsoby. Jedním ze způsobů je použití inline stylů. Chcete-li například upravit styl tlačítka, můžete tak učinit přidáním atributu stylu k prvku:

<styl tlačítka={{backgroundColor: 'Červené', barva: 'bílý'}}>
 Klikni na mě!
</button>

Dalším způsobem stylování komponent Reactu je použití globálních stylů. Globální styly jsou pravidla CSS, která definujete mimo komponentu a aplikujete na všechny komponenty v aplikaci. Chcete-li to provést, můžete použít knihovnu CSS-in-JS, jako jsou komponenty styled:

import stylizovaný z 'styled-components';
konst Tlačítko = stylizované.tlačítko`
 barva pozadí: červená;
 barva bílá;
`;

Mezi vloženými styly a globálními styly neexistuje správná nebo špatná volba. Opravdu záleží na vašich požadavcích. Obecně platí, že inline styly se snáze používají pro malé projekty. Pro větší projekty jsou lepší volbou globální styly.

Snadno nasaďte svou aplikaci React

Jednou z nejvýznamnějších výhod Reactu je, že je velmi snadné nasadit vaši React App. React můžete nasadit na jakýkoli statický webový server. Stačí zkompilovat svůj kód pomocí nástroje, jako je Webpack, a poté umístit výsledný soubor bundle.js na svůj webový server.

Svou aplikaci React můžete také zdarma hostovat na stránkách GitHubu.