Rakenduse üleviimine jQueryst Reactile

jQuery ja React on mõlemad populaarsed JavaScripti teegid esiotsa arendamiseks. Kui jQuery on DOM-i manipuleerimisteek, siis React on JavaScripti teek kasutajaliideste loomiseks.

Siit saate teada, kuidas olemasolevat rakendust jQueryst Reacti üle viia.

jQuery vs. Reageerida?

Kui on vaja valida jQuery ja Reacti vahel, sõltub see teie vajadustest ja eelistustest. Kui otsite hõlpsasti kasutatavat ja suure kogukonnaga teeki, on jQuery hea valik. Kui aga otsite suuremahuliseks arenduseks sobivamat teeki, on React parem valik.

Miks jQueryst reageerida?

On mitu põhjust, miks võiksite oma rakenduse jQueryst Reacti üle viia.

• React on kiirem kui jQuery: Kui me räägime töötlemata jõudlusest, on React kiirem kui jQuery. Seda seetõttu, et React kasutab virtuaalset DOM-i, mis on tegeliku DOM-i JavaScripti esitus. See tähendab, et kui kasutaja suhtleb Reacti rakendusega, värskendatakse ainult DOM-i muutuvaid osi. See on tõhusam kui jQuery täielik DOM-i manipuleerimine.
• React on paremini hooldatav: Teine põhjus Reactile üleminekuks on see, et see on paremini hooldatav kui jQuery. Seda seetõttu, et Reacti komponendid on iseseisvad, nii et saate neid hõlpsasti uuesti kasutada. See tähendab, et kui teil on vaja Reacti komponenti muuta, saate seda teha ilma ülejäänud koodibaasi mõjutamata.
  instagram viewer
• React on skaleeritavam: Lõpuks on React skaleeritavam kui jQuery. See kasutab komponendipõhist arhitektuuri, mis on skaleeritavam kui jQuery monoliitne lähenemine. See tähendab, et saate Reacti rakendust vajaduse korral hõlpsalt laiendada ja muuta.
• Reactil on parem üksuste testimise tugi: Mis puutub üksuse testimisse, siis Reactil on parem tugi kui jQueryl. Kuna saate Reacti komponente hõlpsalt eraldada, on nende jaoks lihtsam ühikuteste kirjutada.

Kuidas oma rakendust jQueryst reageerida

Kui plaanite oma rakenduse jQueryst Reacti üle viia, peate meeles pidama mõnda asja. Oluline on teada, mida peate alustama, ja saada hea ettekujutus rakenduse üksikute osade üleviimisest.

Eeldused

Enne migratsiooniprotsessi alustamist peate asjade seadistamiseks tegema mõned asjad. Esiteks peate looge rakendus React kasutades rakendust loo-reageeri.

Pärast nende sõltuvuste installimist peate looma faili nimega index.js sinus src kataloog. See fail on teie Reacti rakenduse sisenemispunkt.

Lõpuks saate liikuda edasi oma koodibaasi üksikute osade juurde ja neid vastavalt värskendada.

1. Sündmuste käsitlemine

JQuerys saate elementidele sündmusi lisada. Näiteks kui teil on nupp, võite sellele lisada klõpsusündmuse. Kui keegi klõpsab nuppu, käivitub sündmuste töötleja.

$("nupp").klõps(funktsiooni() {
// tee midagi
});

React käsitleb sündmusi erinevalt. Selle asemel, et elementidele sündmusi lisada, määratlete need komponentides. Näiteks kui teil on nupp, määraksite klõpsusündmuse komponendis:

klassNuppulatubReageerige.Komponent{
 handClick() {
// tee midagi
 }
 render() {
tagasi (
<nupp onClick={this.handleClick}>
 Klõpsake mind!
</button>
 );
 }
}

Siin sisaldab nupu komponent HandClick() meetodi määratlust. Kui keegi nuppu klõpsab, käivitub see meetod.

Igal meetodil on oma plussid ja miinused. jQuerys on sündmusi lihtne kinnitada ja eemaldada. Siiski võib nende jälgimine olla keeruline, kui teil on palju sündmusi. Reactis määratlete sündmused komponentidena, mis muudab nende jälgimise lihtsamaks. Kuid neid pole nii lihtne kinnitada ja eemaldada.

Kui kasutate Reacti, peate uue sündmuste käsitlemise meetodi kasutamiseks oma koodi värskendama. Iga sündmuse jaoks, mida soovite käsitleda, peate komponendis määratlema meetodi. Seda meetodit käitatakse sündmuse käivitumisel.

2. Efektid

JQuerys võite elemendi kuvamiseks või peitmiseks kasutada meetodeid .show() või .hide(). Näiteks:

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

Reactis saate oleku haldamiseks kasutada konksu useState(). Näiteks kui soovite mõnda elementi näidata või peita, määrake komponendi olek:

importida { useState } alates "reageerida";
funktsiooniKomponent() {
konst [isShown, setIsShown] = useState(vale);
tagasi (
<div>
 {on näidatud &&<div>Tere!</div>}
<nupp onClick={() => setIsShown(!isShown)}>
 Lülita sisse
</button>
</div>
 );
}

See kood määratleb olekumuutuja isShown ja funktsiooni setIsShown(). Reaktsioonil on erinevat tüüpi konksud mida saate oma rakenduses kasutada, millest üks on useState. Kui kasutaja klõpsab nuppu, värskendatakse olekumuutujat isShown ja element kuvatakse ainult siis, kui see on asjakohane.

JQuerys on efekte lihtne kasutada ja need töötavad hästi. Neid võib aga olla raske hallata, kui teil on neid palju. Reactis asuvad efektid komponentide sees, mis muudab nende haldamise lihtsamaks, kui mitte nii lihtsaks.

3. Andmete toomine

JQuerys saate andmete toomiseks kasutada meetodit $.ajax(). Näiteks kui soovite tuua mõningaid JSON-andmeid, saate seda teha järgmiselt.

$.ajax({
 url: "https://example.com/data.json",
 andmetüüp: "json",
 edu: funktsiooni(andmeid) {
 // teha midagi koos a andmeid
 }
});

Reactis saate andmete toomiseks kasutada meetodit fetch(). Selle meetodi abil saate JSON-andmeid tuua järgmiselt.

tõmba("https://example.com/data.json")
 .siis (vastus => response.json())
 .siis (andmed => {
 // teha midagi koos a andmeid
 });

JQuerys on $.ajax() meetodit lihtne kasutada. Siiski võib vigade käsitlemine olla keeruline. Reactis on meetod fetch() paljusõnalisem, kuid vigade käsitlemine on lihtsam.

4. CSS

JQuerys saate CSS-i määrata lehtede kaupa. Näiteks kui soovite kujundada kõik lehe nupud, saate seda teha nupu elemendi sihtimisega.

nupp {
 taustavärv: punane;
 värv: valge;
}

Reactis saate CSS-i kasutada erinevatel viisidel. Üks võimalus on kasutada tekstisiseseid stiile. Näiteks kui soovite nuppu kujundada, saate seda teha, lisades elemendile stiiliatribuudi:

<nupu stiil={{taustavärv: 'punane', värv: 'valge'}}>
 Klõpsake mind!
</button>

Teine viis Reacti komponentide stiilimiseks on globaalsete stiilide kasutamine. Globaalsed stiilid on CSS-reeglid, mille määratlete väljaspool komponenti ja rakendate rakenduse kõikidele komponentidele. Selleks saate kasutada CSS-in-JS-i teeki, näiteks stiilikomponente:

importida stiilis alates 'stiilis komponendid';
konst Nupp = stiiliga.nupp`
 taustavärv: punane;
 värv: valge;
`;

Ei ole õiget või valet valikut tekstisisese ja globaalse stiili vahel. See sõltub tõesti teie nõudmistest. Üldiselt on tekstisiseseid stiile lihtsam kasutada väikeste projektide jaoks. Suuremate projektide jaoks on globaalsed stiilid parem valik.

Juurutage oma React rakendus lihtsalt

Reacti üks olulisemaid eeliseid on see, et Reacti rakendust on väga lihtne juurutada. Saate juurutada Reacti mis tahes staatilises veebiserveris. Peate lihtsalt oma koodi kompileerima, kasutades sellist tööriista nagu Webpack, ja seejärel sisestama saadud faili bundle.js oma veebiserverisse.

Samuti saate oma Reacti rakendust GitHubi lehtedel tasuta hostida.