jQuery un React ir populāras JavaScript bibliotēkas priekšgala izstrādei. Kamēr jQuery ir DOM manipulācijas bibliotēka, React ir JavaScript bibliotēka lietotāja interfeisu veidošanai.

Uzziniet, kā migrēt esošu lietotni no jQuery uz React.

jQuery vs. Reaģēt?

Ja runa ir par izvēli starp jQuery un React, tas ir atkarīgs no jūsu vajadzībām un vēlmēm. Ja meklējat viegli lietojamu bibliotēku ar lielu kopienu, jQuery ir laba izvēle. Bet, ja meklējat bibliotēku, kas ir vairāk piemērota liela mēroga izstrādei, React ir labāks risinājums.

Kāpēc migrēt no jQuery uz React?

Ir vairāki iemesli, kāpēc jūs varētu vēlēties migrēt savu lietotni no jQuery uz React.

  • React ir ātrāks nekā jQuery: Ja mēs runājam par neapstrādātu veiktspēju, React ir ātrāks nekā jQuery. Tas ir tāpēc, ka React izmanto virtuālo DOM, kas ir faktiskā DOM JavaScript attēlojums. Tas nozīmē, ka lietotājam mijiedarbojoties ar React lietojumprogrammu, tiks atjauninātas tikai tās DOM daļas, kuras tiek mainītas. Tas ir efektīvāk nekā jQuery pilnas DOM manipulācijas.
    • instagram viewer
  • React ir vairāk uzturējams: Vēl viens iemesls migrēšanai uz React ir tas, ka tas ir labāk uzturējams nekā jQuery. Tas ir tāpēc, ka React komponenti ir autonomi, tāpēc varat tos viegli izmantot atkārtoti. Tas nozīmē, ka, ja nepieciešams veikt izmaiņas React komponentā, varat to izdarīt, neietekmējot pārējo kodu bāzi.
  • React ir vairāk mērogojams: Visbeidzot, React ir mērogojamāks nekā jQuery. Tajā tiek izmantota uz komponentiem balstīta arhitektūra, kas ir mērogojamāka nekā jQuery monolītā pieeja. Tas nozīmē, ka pēc vajadzības varat viegli paplašināt un modificēt React lietojumprogrammu.
  • React ir labāks atbalsts vienību testēšanai: Runājot par vienību testēšanu, React ir labāks atbalsts nekā jQuery. Tā kā jūs varat viegli izolēt React komponentus, ir vieglāk uzrakstīt vienību testus.

Kā migrēt savu lietotni no jQuery uz React

Ja plānojat migrēt savu lietotni no jQuery uz React, ir jāņem vērā dažas lietas. Ir svarīgi zināt, kas jums nepieciešams, lai sāktu, un gūt labu priekšstatu par to, kā varat migrēt atsevišķas lietojumprogrammas daļas.

Priekšnoteikumi

Pirms migrēšanas procesa sākšanas ir jāveic dažas darbības, lai iestatītu lietas. Pirmkārt, jums ir nepieciešams izveidot React lietojumprogrammu izmantojot lietotni izveidot-reaģēt.

Kad esat instalējis šīs atkarības, jums ir jāizveido fails ar nosaukumu index.js tavā src direktoriju. Šis fails būs jūsu React lietojumprogrammas ievades punkts.

Visbeidzot, varat pāriet uz atsevišķām kodu bāzes daļām un attiecīgi tās atjaunināt.

1. Notikumu apstrāde

Programmā jQuery elementiem varat pievienot notikumus. Piemēram, ja jums ir poga, varat tai pievienot klikšķa notikumu. Kad kāds noklikšķinās uz pogas, tiks palaists notikumu apstrādātājs.

$("poga").click(funkciju() {
// dari kaut ko
});

React apstrādā notikumus atšķirīgi. Tā vietā, lai pievienotu notikumus elementiem, jūs tos definējat komponentos. Piemēram, ja jums ir poga, klikšķa notikums ir jādefinē komponentā:

klasēPogapagarinaReaģēt.Komponents{
 handClick() {
// dari kaut ko
 }
 render() {
atgriezties (
<poga onClick={this.handleClick}>
 Noklikšķiniet uz manis!
</button>
 );
 }
}

Šeit Pogas komponents satur HandClick() metodes definīciju. Kad kāds noklikšķinās uz pogas, tiks palaists šī metode.

Katrai metodei ir savi plusi un mīnusi. Programmā jQuery notikumus ir viegli pievienot un noņemt. Tomēr var būt grūti tiem izsekot, ja jums ir daudz notikumu. Programmā React jūs definējat notikumus komponentos, kas var atvieglot to izsekošanu. Bet tos nav tik viegli piestiprināt un noņemt.

Ja izmantojat React, jums būs jāatjaunina kods, lai izmantotu jauno notikumu apstrādes metodi. Katram notikumam, kuru vēlaties apstrādāt, komponentā būs jādefinē metode. Šī metode darbosies, kad notikums tiks aktivizēts.

2. Efekti

Programmā jQuery varat izmantot .show() vai .hide() metodes, lai parādītu vai paslēptu elementu. Piemēram:

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

Programmā React varat izmantot āķi useState(), lai pārvaldītu stāvokli. Piemēram, ja vēlaties parādīt vai paslēpt elementu, jums jādefinē komponenta stāvoklis:

imports { useState } no "reaģēt";
funkcijuKomponents() {
konst [isShown, setIsShown] = useState(viltus);
atgriezties (
<div>
 {ir parādīts &&<div>Sveiki!</div>}
<poga onClick={() => setIsShown(!isShown)}>
 Pārslēgt
</button>
</div>
 );
}

Šis kods definē isShown stāvokļa mainīgo un setIsShown() funkciju. React ir dažāda veida āķi ko varat izmantot savā lietotnē, un viens no tiem ir useState. Kad lietotājs noklikšķina uz pogas, statusa mainīgais isShown tiek atjaunināts un elements tiek parādīts tikai tad, kad tas ir piemērots.

Programmā jQuery efektus ir viegli lietot, un tie darbojas labi. Tomēr tos var būt grūti pārvaldīt, ja jums to ir daudz. Programmā React efekti atrodas komponentos, kas var padarīt tos vieglāk pārvaldāmus, ja ne tik viegli lietojamus.

3. Datu ienešana

Programmā jQuery varat izmantot $.ajax() metodi, lai iegūtu datus. Piemēram, ja vēlaties izgūt dažus JSON datus, varat to izdarīt šādi:

$.ajax({
 url: "https://example.com/data.json",
 datu tips: "json",
 panākumi: funkciju(datus) {
 // darīt kaut ko ar uz datus
 }
});

Programmā React varat izmantot metodi fetch(), lai iegūtu datus. Tālāk ir norādīts, kā varat iegūt JSON datus, izmantojot šo metodi.

atnest("https://example.com/data.json")
 .tad (atbilde => response.json())
 .tad (dati => {
 // darīt kaut ko ar uz datus
 });

Programmā jQuery ir viegli izmantot $.ajax() metodi. Tomēr var būt grūti rīkoties ar kļūdām. Programmā React metode fetch() ir daudz detalizētāka, taču ar to ir vieglāk rīkoties ar kļūdām.

4. CSS

Programmā jQuery varat norādīt CSS pēc lapas. Piemēram, ja vēlaties veidot stilu visas lapas pogas, varat to izdarīt, atlasot pogas elementu:

poga {
 fona krāsa: sarkana;
 krāsa: balta;
}

Programmā React CSS var izmantot dažādos veidos. Viens veids ir izmantot iekļautos stilus. Piemēram, ja vēlaties izveidot pogas stilu, varat to izdarīt, elementam pievienojot stila atribūtu:

<pogas style={{fona krāsa: 'sarkans', krāsa: 'balts'}}>
 Noklikšķiniet uz manis!
</button>

Vēl viens veids, kā veidot React komponentus, ir izmantot globālos stilus. Globālie stili ir CSS kārtulas, kuras jūs definējat ārpus komponenta un lietojat visiem lietojumprogrammas komponentiem. Lai to izdarītu, varat izmantot CSS-in-JS bibliotēku, piemēram, stila komponentus:

imports stilizēts no 'veidotie komponenti';
konst Poga = styled.button`
 fona krāsa: sarkana;
 krāsa: balta;
`;

Nav pareizas vai nepareizas izvēles starp iekļautajiem un globālajiem stiliem. Tas tiešām ir atkarīgs no jūsu prasībām. Parasti iekļautos stilus ir vieglāk izmantot maziem projektiem. Lielākiem projektiem labāks risinājums ir globālie stili.

Viegli izvietojiet savu React lietotni

Viena no nozīmīgākajām React priekšrocībām ir tā, ka ir ļoti viegli izvietot React lietotni. Varat izvietot React jebkurā statiskā tīmekļa serverī. Jums vienkārši ir jāapkopo savs kods, izmantojot tādu rīku kā Webpack, un pēc tam ievietojiet iegūto failu bundle.js savā tīmekļa serverī.

Varat arī bez maksas mitināt savu React lietotni GitHub lapās.