jQuery ja React ovat molemmat suosittuja JavaScript-kirjastoja käyttöliittymän kehittämiseen. Vaikka jQuery on DOM-manipulaatiokirjasto, React on JavaScript-kirjasto käyttöliittymien rakentamiseen.

Opi siirtämään olemassa oleva sovellus jQuerysta Reactiin.

jQuery vs. Reagoi?

Kun on valittava jQueryn ja Reactin välillä, se riippuu tarpeistasi ja mieltymyksistäsi. Jos etsit kirjastoa, jota on helppo käyttää ja jolla on suuri yhteisö, jQuery on hyvä valinta. Mutta jos etsit kirjastoa, joka sopii paremmin laajamittaiseen kehitykseen, React on parempi vaihtoehto.

Miksi siirtyä jQuerysta reagoimaan?

On useita syitä, miksi saatat haluta siirtää sovelluksesi jQuerysta Reactiin.

  • React on nopeampi kuin jQuery: Jos puhumme raakasuorituskyvystä, React on nopeampi kuin jQuery. Tämä johtuu siitä, että React käyttää virtuaalista DOM: ia, joka on todellisen DOM: n JavaScript-esitys. Tämä tarkoittaa, että kun käyttäjä on vuorovaikutuksessa React-sovelluksen kanssa, vain muuttuvat DOM: n osat päivittyvät. Tämä on tehokkaampaa kuin jQueryn täysi DOM-manipulaatio.
    • instagram viewer
  • React on ylläpidettävämpi: Toinen syy siirtyä Reactiin on se, että se on ylläpidettävämpi kuin jQuery. Tämä johtuu siitä, että Reactin komponentit ovat itsenäisiä, joten voit käyttää niitä helposti uudelleen. Tämä tarkoittaa, että jos sinun on tehtävä muutos React-komponenttiin, voit tehdä sen vaikuttamatta muuhun koodikantaan.
  • React on skaalautuvampi: Lopuksi React on skaalautuvampi kuin jQuery. Se käyttää komponenttipohjaista arkkitehtuuria, joka on skaalautuvampi kuin jQueryn monoliittinen lähestymistapa. Tämä tarkoittaa, että voit helposti laajentaa ja muokata React-sovellusta tarpeen mukaan.
  • Reactilla on parempi tuki yksikkötestaukseen: Yksikkötestauksen osalta Reactilla on parempi tuki kuin jQueryllä. Koska voit helposti eristää React-komponentit, on helpompi kirjoittaa niille yksikkötestejä.

Sovelluksen siirtäminen jQuerysta Reactiin

Jos aiot siirtää sovelluksesi jQuerysta Reactiin, sinun on pidettävä mielessä muutamia asioita. On tärkeää tietää, mitä sinun on aloitettava, ja saada hyvä käsitys siitä, kuinka voit siirtää sovelluksesi yksittäisiä osia.

Edellytykset

Ennen kuin aloitat siirtoprosessin, sinun on tehtävä muutamia asioita asioiden määrittämiseksi. Ensinnäkin sinun täytyy luo React-sovellus käyttämällä create-react-sovellusta.

Kun olet asentanut nämä riippuvuudet, sinun on luotava tiedosto nimeltä index.js sinun src hakemistosta. Tämä tiedosto on React-sovelluksesi sisääntulopiste.

Lopuksi voit siirtyä koodikannan yksittäisiin osiin ja päivittää niitä vastaavasti.

1. Tapahtumien käsittely

jQueryssä voit liittää tapahtumia elementteihin. Jos sinulla on esimerkiksi painike, voit liittää siihen klikkaustapahtuman. Kun joku napsauttaa painiketta, tapahtumakäsittelijä käynnistyy.

$("painike").napsauta(toiminto() {
// tee jotain
});

React käsittelee tapahtumia eri tavalla. Sen sijaan, että liität tapahtumia elementteihin, määrität ne komponenteiksi. Jos sinulla on esimerkiksi painike, määrität klikkaustapahtuman komponentissa:

luokkaaPainikeulottuuReagoi.Komponentti{
 handleClick() {
// tee jotain
 }
 render() {
palata (
<button onClick={this.handleClick}>
 Klikkaa minua!
</button>
 );
 }
}

Tässä Button-komponentti sisältää HandClick()-menetelmän määritelmän. Kun joku napsauttaa painiketta, tämä menetelmä suoritetaan.

Jokaisella menetelmällä on hyvät ja huonot puolensa. jQueryssä tapahtumia on helppo liittää ja poistaa. Niitä voi kuitenkin olla vaikea seurata, jos tapahtumia on paljon. Reactissa määrität tapahtumat komponenteissa, mikä voi helpottaa niiden seuraamista. Mutta ne eivät ole yhtä helppoja kiinnittää ja poistaa.

Jos käytät Reactia, sinun on päivitettävä koodisi, jotta voit käyttää uutta tapahtumien käsittelytapaa. Jokaiselle tapahtumalle, jota haluat käsitellä, sinun on määritettävä menetelmä komponentissa. Tämä menetelmä suoritetaan, kun tapahtuma käynnistyy.

2. Tehosteet

jQueryssä voit käyttää .show()- tai .hide()-menetelmiä elementin näyttämiseen tai piilottamiseen. Esimerkiksi:

$("#elementti").näytä();

Reactissa voit hallita tilaa useState()-koukun avulla. Jos esimerkiksi haluat näyttää tai piilottaa elementin, määritä komponentin tila:

tuonti { useState } alkaen "reagoi";
toimintoKomponentti() {
konst [isShown, setIsShown] = useState(väärä);
palata (
<div>
 {on näytetty &&<div>Hei!</div>}
<painike onClick={() => setIsShown(!isShown)}>
 Vaihda
</button>
</div>
 );
}

Tämä koodi määrittää isShown-tilamuuttujan ja setIsShown()-funktion. Reaktiolla on erityyppisiä koukkuja joita voit käyttää sovelluksessasi, joista useState on yksi. Kun käyttäjä napsauttaa painiketta, isShown-tilamuuttuja päivittyy ja elementti näkyy vain tarvittaessa.

jQueryssä tehosteita on helppo käyttää ja ne toimivat hyvin. Niitä voi kuitenkin olla vaikea hallita, jos niitä on paljon. Reactissa tehosteet elävät komponenttien sisällä, mikä voi helpottaa niiden hallintaa, ellei yhtä helppoa käyttöä.

3. Tietojen hakeminen

jQueryssä voit käyttää $.ajax()-menetelmää tietojen hakemiseen. Jos esimerkiksi haluat hakea JSON-tietoja, voit tehdä sen seuraavasti:

$.ajax({
 url: "https://example.com/data.json",
 tietotyyppi: "json",
 menestys: toiminto(tiedot) {
 // tehdä jotain kanssa the tiedot
 }
});

Reactissa voit käyttää fetch()-menetelmää tietojen hakemiseen. Näin voit noutaa JSON-tiedot tällä menetelmällä:

hae("https://example.com/data.json")
 .then (vastaus => vastaus.json())
 .ten (data => {
 // tehdä jotain kanssa the tiedot
 });

JQueryssä $.ajax()-menetelmää on helppo käyttää. Virheiden käsittely voi kuitenkin olla vaikeaa. Reactissa fetch()-menetelmä on monisanaisempi, mutta se on helpompi käsitellä virheitä.

4. CSS

jQueryssä voit määrittää CSS: n sivuittain. Jos esimerkiksi haluat muokata sivun kaikkien painikkeiden tyyliä, voit tehdä sen kohdistamalla painikeelementtiin:

painike {
 taustaväri: punainen;
 väri valkoinen;
}

Reactissa voit käyttää CSS: ää eri tavoilla. Yksi tapa on käyttää sisäisiä tyylejä. Jos esimerkiksi haluat muokata painikkeen tyyliä, voit tehdä sen lisäämällä elementtiin style-attribuutin:

<button style={{taustaväri: 'punainen', väri: 'valkoinen'}}>
 Klikkaa minua!
</button>

Toinen tapa muotoilla React-komponentteja on käyttää globaaleja tyylejä. Yleiset tyylit ovat CSS-sääntöjä, jotka määrität komponentin ulkopuolella ja joita sovelletaan kaikkiin sovelluksen komponentteihin. Voit tehdä tämän käyttämällä CSS-in-JS-kirjastoa, kuten tyyliteltyjä komponentteja:

tuonti tyylistä alkaen "tyylilliset komponentit";
konst Button = styled.button`
 taustaväri: punainen;
 väri valkoinen;
`;

Sisäisten tyylien ja globaalien tyylien välillä ei ole oikeaa tai väärää valintaa. Se riippuu todella tarpeistasi. Yleensä sisäisiä tyylejä on helpompi käyttää pienissä projekteissa. Suurempiin projekteihin globaalit tyylit ovat parempi vaihtoehto.

Ota React-sovelluksesi käyttöön helposti

Yksi Reactin merkittävimmistä eduista on, että React-sovelluksen käyttöönotto on erittäin helppoa. Voit ottaa Reactin käyttöön missä tahansa staattisessa verkkopalvelimessa. Sinun tarvitsee vain kääntää koodi Webpackin kaltaisella työkalulla ja laittaa sitten tuloksena oleva bundle.js-tiedosto verkkopalvelimellesi.

Voit myös isännöidä React-sovellustasi ilmaiseksi GitHub-sivuilla.