jQuery in React sta priljubljeni knjižnici JavaScript za front-end razvoj. Medtem ko je jQuery knjižnica za manipulacijo DOM, je React knjižnica JavaScript za gradnjo uporabniških vmesnikov.

Ugotovite, kako preseliti obstoječo aplikacijo iz jQuery v React.

jQuery proti reagirati?

Ko gre za izbiro med jQuery in React, je odvisno od vaših potreb in preferenc. Če iščete knjižnico, ki je enostavna za uporabo in ima veliko skupnost, potem je jQuery dobra izbira. Če pa iščete knjižnico, ki je bolj primerna za razvoj v velikem obsegu, je React boljša možnost.

Zakaj preiti z jQuery na React?

Obstaja več razlogov, zakaj bi morda želeli svojo aplikacijo preseliti iz jQuery v React.

  • React je hitrejši od jQuery: Če govorimo o surovi zmogljivosti, je React hitrejši od jQueryja. To je zato, ker React uporablja virtualni DOM, ki je JavaScript predstavitev dejanskega DOM-a. To pomeni, da ko uporabnik komunicira z aplikacijo React, se posodobijo samo deli DOM-a, ki se spremenijo. To je bolj učinkovito kot popolna manipulacija DOM jQuery.
    • instagram viewer
  • React je bolj vzdržljiv: Drug razlog za prehod na React je, da je lažje vzdrževati kot jQuery. To je zato, ker so komponente React samostojne, tako da jih lahko enostavno ponovno uporabite. To pomeni, da če morate spremeniti komponento React, lahko to storite brez vpliva na preostalo kodno zbirko.
  • React je bolj razširljiv: Končno je React bolj razširljiv kot jQuery. Uporablja arhitekturo, ki temelji na komponentah in je bolj razširljiva kot monolitni pristop jQuery. To pomeni, da lahko preprosto razširite in spremenite aplikacijo React, kot je potrebno.
  • React ima boljšo podporo za testiranje enot: Ko gre za testiranje enot, ima React boljšo podporo kot jQuery. Ker lahko preprosto izolirate komponente React, je lažje napisati teste enot zanje.

Kako svojo aplikacijo preseliti iz jQuery v React

Če nameravate svojo aplikacijo preseliti iz jQuery v React, morate upoštevati nekaj stvari. Pomembno je, da veste, kaj morate začeti, in da dobite dobro predstavo o tem, kako lahko preselite posamezne dele svoje aplikacije.

Predpogoji

Preden začnete postopek selitve, morate narediti nekaj stvari, da nastavite stvari. Najprej morate ustvarite aplikacijo React z aplikacijo create-react-app.

Ko namestite te odvisnosti, morate ustvariti datoteko z imenom index.js v tvojem src imenik. Ta datoteka bo vstopna točka za vašo aplikacijo React.

Končno se lahko premaknete na posamezne dele vaše kodne baze in jih ustrezno posodobite.

1. Ravnanje z dogodki

V jQuery lahko elementom pripnete dogodke. Na primer, če imate gumb, mu lahko pripnete dogodek klika. Ko nekdo klikne gumb, se zažene obravnavalec dogodkov.

$("gumb").click(funkcijo() {
// naredi kaj
});

React dogodke obravnava drugače. Namesto da dogodke pripnete elementom, jih definirate v komponentah. Na primer, če imate gumb, bi dogodek klika definirali v komponenti:

razredGumbse raztezaReagiraj.Komponenta{
 handleClick() {
// naredi kaj
 }
 render() {
vrnitev (
<gumb onClick={this.handleClick}>
 Kliknite me!
</button>
 );
 }
}

Tukaj komponenta Button vsebuje definicijo metode handleClick(). Ko nekdo klikne gumb, se ta metoda zažene.

Vsaka metoda ima svoje prednosti in slabosti. V jQuery je dogodke enostavno pripeti in odstraniti. Vendar pa jim je težko slediti, če imate veliko dogodkov. V Reactu definirate dogodke v komponentah, kar lahko olajša sledenje. Vendar jih ni tako enostavno pritrditi in odstraniti.

Če uporabljate React, boste morali posodobiti svojo kodo, da bo uporabljala nov način obravnavanja dogodkov. Za vsak dogodek, ki ga želite obravnavati, boste morali v komponenti definirati metodo. Ta metoda se bo zagnala, ko se dogodek sproži.

2. Učinki

V jQuery lahko uporabite metode .show() ali .hide(), da prikažete ali skrijete element. Na primer:

$("#element").show();

V Reactu lahko za upravljanje stanja uporabite kavelj useState(). Na primer, če želite prikazati ali skriti element, bi definirali stanje v komponenti:

uvoz {useState} od "reagirati";
funkcijoKomponenta() {
konst [isShown, setIsShown] = useState(lažno);
vrnitev (
<div>
 {isShown &&<div>Zdravo!</div>}
<gumb onClick={() => setIsShown(!isShown)}>
 Preklopi
</button>
</div>
 );
}

Ta koda definira spremenljivko stanja isShown in funkcijo setIsShown(). React ima različne vrste kavljev ki jih lahko uporabite v svoji aplikaciji, med katerimi je useState. Ko uporabnik klikne gumb, se spremenljivka stanja isShown posodobi in element se prikaže le, ko je to primerno.

V jQuery so učinki enostavni za uporabo in dobro delujejo. Vendar jih je težko upravljati, če jih imate veliko. V Reactu učinki živijo znotraj komponent, zaradi česar jih je lažje upravljati, če ne tako enostavno uporabljati.

3. Pridobivanje podatkov

V jQuery lahko za pridobivanje podatkov uporabite metodo $.ajax(). Na primer, če želite pridobiti nekaj podatkov JSON, lahko to storite takole:

$.ajax({
 url: "https://example.com/data.json",
 dataType: "json",
 uspeh: funkcijo(podatke) {
 // narediti nekaj z the podatke
 }
});

V Reactu lahko za pridobivanje podatkov uporabite metodo fetch(). Tukaj je opisano, kako lahko pridobite podatke JSON s to metodo:

prinesi ("https://example.com/data.json")
 .potem (odgovor => response.json())
 .potem (podatki => {
 // narediti nekaj z the podatke
 });

V jQuery je metoda $.ajax() enostavna za uporabo. Vendar pa je lahko težko obravnavati napake. V Reactu je metoda fetch() bolj podrobna, vendar je lažje obravnavati napake.

4. CSS

V jQuery lahko določite CSS po straneh. Na primer, če želite stilizirati vse gumbe na strani, lahko to storite tako, da ciljate na element gumba:

gumb {
 barva ozadja: rdeča;
 barva: bela;
}

V Reactu lahko CSS uporabljate na različne načine. Eden od načinov je uporaba vstavljenih slogov. Na primer, če želite stilizirati gumb, lahko to storite tako, da elementu dodate atribut style:

<gumb style={{backgroundColor: 'rdeča', barva: 'bela'}}>
 Kliknite me!
</button>

Drug način oblikovanja komponent React je uporaba globalnih slogov. Globalni slogi so pravila CSS, ki jih določite zunaj komponente in uporabite za vse komponente v aplikaciji. Če želite to narediti, lahko uporabite knjižnico CSS-in-JS, kot je styled-components:

uvoz stilizirano od 'styled-components';
konst Gumb = styled.button`
 barva ozadja: rdeča;
 barva: bela;
`;

Med vgrajenimi slogi in globalnimi slogi ni prave ali napačne izbire. Res je odvisno od vaših zahtev. Na splošno je vgrajene sloge lažje uporabljati za majhne projekte. Za večje projekte so globalni slogi boljša možnost.

Preprosto uvedite svojo aplikacijo React

Ena najpomembnejših prednosti Reacta je, da je zelo enostavno namestiti vašo aplikacijo React. React lahko namestite na kateri koli statični spletni strežnik. Samo prevesti morate svojo kodo z orodjem, kot je Webpack, in nato na svoj spletni strežnik vnesti nastalo datoteko bundle.js.

Svojo aplikacijo React lahko tudi brezplačno gostite na straneh GitHub.