jQuery i React su popularne JavaScript biblioteke za front-end razvoj. Dok je jQuery biblioteka za manipulaciju DOM-om, React je JavaScript biblioteka za izgradnju korisničkih sučelja.

Saznajte kako migrirati postojeću aplikaciju iz jQueryja u React.

jQuery vs. Reagirati?

Što se tiče odabira između jQueryja i Reacta, to ovisi o vašim potrebama i preferencijama. Ako tražite biblioteku koja je jednostavna za korištenje i ima veliku zajednicu, onda je jQuery dobar izbor. Ali ako tražite biblioteku koja je prikladnija za razvoj velikih razmjera, React je bolja opcija.

Zašto prijeći s jQueryja na React?

Postoji nekoliko razloga zašto biste mogli migrirati svoju aplikaciju s jQueryja na React.

  • React je brži od jQueryja: Ako govorimo o sirovoj izvedbi, React je brži od jQueryja. To je zato što React koristi virtualni DOM, koji je JavaScript reprezentacija stvarnog DOM-a. To znači da kada korisnik komunicira s React aplikacijom, ažurirat će se samo dijelovi DOM-a koji se mijenjaju. Ovo je učinkovitije od jQueryjeve pune DOM manipulacije.
  • React se lakše održava: Još jedan razlog za prelazak na React je to što se lakše održava od jQueryja. To je zato što su komponente Reacta samostalne pa ih možete jednostavno ponovno upotrijebiti. To znači da ako trebate promijeniti React komponentu, to možete učiniti bez utjecaja na ostatak baze koda.
  • React je skalabilniji: Konačno, React je skalabilniji od jQueryja. Koristi arhitekturu temeljenu na komponentama, koja je skalabilnija od jQueryjevog monolitnog pristupa. To znači da možete jednostavno proširiti i modificirati React aplikaciju po potrebi.
  • React ima bolju podršku za jedinično testiranje: Kada je riječ o jediničnom testiranju, React ima bolju podršku od jQueryja. Budući da možete lako izolirati React komponente, lakše je napisati jedinične testove za njih.

Kako premjestiti svoju aplikaciju s jQueryja na React

Ako planirate migrirati svoju aplikaciju s jQueryja na React, morate imati na umu nekoliko stvari. Važno je znati što vam je potrebno za početak i dobiti dobru predodžbu o tome kako možete migrirati pojedinačne dijelove svoje aplikacije.

Preduvjeti

Prije nego započnete proces migracije, morate učiniti nekoliko stvari da biste postavili stvari. Prvo, trebate izraditi React aplikaciju koristeći create-react-app.

Nakon što ste instalirali ove ovisnosti, morate stvoriti datoteku pod nazivom index.js u vašem src imenik. Ova će datoteka biti ulazna točka za vašu React aplikaciju.

Konačno, možete prijeći na pojedinačne dijelove svoje baze kodova i ažurirati ih u skladu s tim.

1. Rukovanje događajima

U jQueryju možete priložiti događaje elementima. Na primjer, ako imate gumb, možete mu priložiti događaj klika. Kada netko klikne gumb, pokrenut će se rukovatelj događajima.

$("gumb").click(funkcija() {
// učini nešto
});

React drugačije obrađuje događaje. Umjesto dodavanja događaja elementima, definirate ih u komponentama. Na primjer, ako imate gumb, definirali biste događaj klika u komponenti:

razredaDugmeproteže seReagirati.komponenta{
 handleClick() {
// učini nešto
 }
 render() {
povratak (
<gumb onClick={this.handleClick}>
 Klikni me!
</button>
 );
 }
}

Ovdje komponenta Button sadrži definiciju metode handleClick(). Kada netko klikne gumb, ova će se metoda pokrenuti.

Svaka metoda ima svoje prednosti i nedostatke. U jQueryju, događaje je lako priložiti i ukloniti. Međutim, može biti teško pratiti ih ako imate puno događaja. U Reactu definirate događaje u komponentama, što može olakšati njihovo praćenje. Ali nije ih lako pričvrstiti i ukloniti.

Ako koristite React, morat ćete ažurirati svoj kod da biste koristili novu metodu rukovanja događajima. Za svaki događaj koji želite obraditi, morat ćete definirati metodu u komponenti. Ova metoda će se pokrenuti kada se događaj pokrene.

2. Efekti

U jQueryju možete koristiti metode .show() ili .hide() za prikaz ili skrivanje elementa. Na primjer:

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

U Reactu možete koristiti kuku useState() za upravljanje stanjem. Na primjer, ako želite prikazati ili sakriti element, definirali biste stanje u komponenti:

uvoz {useState} iz "reagirati";
funkcijakomponenta() {
konst [isShown, setIsShown] = useState(lažno);
povratak (
<div>
 {isShown &&<div>Zdravo!</div>}
<gumb onClick={() => setIsShown(!isShown)}>
 Prebacivanje
</button>
</div>
 );
}

Ovaj kod definira varijablu stanja isShown i funkciju setIsShown(). React ima različite vrste udica koje možete koristiti u svojoj aplikaciji, od kojih je useState jedan. Kada korisnik klikne gumb, varijabla stanja isShown ažurira se i element se prikazuje samo kada je to prikladno.

U jQueryju efekti su jednostavni za korištenje i dobro rade. Međutim, njima može biti teško upravljati ako ih imate puno. U Reactu, efekti žive unutar komponenti što može učiniti lakšim za upravljanje, ako ne i jednostavnim za korištenje.

3. Dohvaćanje podataka

U jQueryju možete koristiti metodu $.ajax() za dohvaćanje podataka. Na primjer, ako želite dohvatiti neke JSON podatke, to možete učiniti ovako:

$.ajax({
 url: "https://example.com/data.json",
 tip podataka: "json",
 uspjeh: funkcija(podaci) {
 // čini nešto s the podaci
 }
});

U Reactu možete koristiti metodu fetch() za dohvaćanje podataka. Evo kako pomoću ove metode možete dohvatiti JSON podatke:

dohvati ("https://example.com/data.json")
 .zatim (odgovor => response.json())
 .zatim (podaci => {
 // čini nešto s the podaci
 });

U jQueryju je metoda $.ajax() jednostavna za korištenje. Međutim, može biti teško nositi se s pogreškama. U Reactu je metoda fetch() opširnija, ali je lakše rukovati pogreškama.

4. CSS

U jQueryju možete odrediti CSS po stranici. Na primjer, ako želite stilizirati sve gumbe na stranici, to možete učiniti tako da ciljate element gumba:

dugme {
 boja pozadine: crvena;
 boja: bijela;
}

U Reactu možete koristiti CSS na različite načine. Jedan od načina je korištenje ugrađenih stilova. Na primjer, ako želite stilizirati gumb, to možete učiniti dodavanjem atributa style elementu:

<gumb style={{backgroundColor: 'Crvena', boja: 'bijela'}}>
 Klikni me!
</button>

Drugi način stiliziranja React komponenti je korištenje globalnih stilova. Globalni stilovi su CSS pravila koja definirate izvan komponente i primjenjujete na sve komponente u aplikaciji. Da biste to učinili, možete upotrijebiti CSS-in-JS biblioteku poput styled-components:

uvoz stilizirani iz 'styled-components';
konst Button = styled.button`
 boja pozadine: crvena;
 boja: bijela;
`;

Ne postoji točan ili pogrešan izbor između ugrađenih stilova i globalnih stilova. To stvarno ovisi o vašim zahtjevima. Općenito, ugrađene stilove lakše je koristiti za male projekte. Za veće projekte, globalni stilovi su bolja opcija.

Lako implementirajte svoju aplikaciju React

Jedna od najznačajnijih prednosti Reacta je ta što je vrlo jednostavno implementirati vašu React aplikaciju. React možete implementirati na bilo kojem statičkom web poslužitelju. Samo trebate kompajlirati svoj kod pomoću alata kao što je Webpack, a zatim staviti rezultirajuću datoteku bundle.js na svoj web poslužitelj.

Također možete besplatno ugostiti svoju React aplikaciju na GitHub stranicama.