Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Suosituimpana käyttöliittymäkirjastona kaikki haluavat oppia Reactin. ReactJS on pohjimmiltaan JavaScript. Mutta se ei tarkoita, että sinun on opittava kaikki JavaScriptissä siirtyäksesi ReactJS: ään. JavaScriptin peruskäsitteiden ymmärtäminen auttaa sinua ymmärtämään React-käsitteitä helpommin, ja lopulta se nopeuttaa kykyäsi työskennellä projektien parissa.

Esittelemme olennaiset käsitteet, jotka sinun tulee tietää JavaScriptistä ennen kuin siirryt ReactJS: ään.

1. Nuolitoiminnot

Nuolifunktioita käytetään laajasti Reactissa. Versiosta 16.8 alkaen React siirtyi luokkapohjaisista komponenteista toiminnallisiin komponentteihin. Nuolitoiminnot voit luoda funktioita lyhyemmällä syntaksilla.

Havainnollistetaan sitä seuraavilla esimerkeillä:

Säännöllinen toiminta

toimintotervehdys() {
palata'Hei'
}
konsoli.log (tervehdys()) //hello

Nuolitoiminto

antaa tervehdys = () =>'Hei'
konsoli.log (tervehdys()) //hello
instagram viewer

Yllä olevilla kahdella funktiolla on sama tulos, vaikka syntaksi on erilainen. Nuolitoiminto näyttää lyhyemmältä ja puhtaammalta kuin tavallinen toiminto. Yleensä React-komponenteilla on seuraava rakenne:

tuonti Reagoi alkaen'reagoi'
konst Kirja = () => {


palata (




Kirja</div>



 )


}
viedäoletuksena Kirja

Nuolifunktioilla ei ole nimiä. Jos haluat nimetä sen, määritä se muuttujaan. Ero tavallisen ja nuolifunktion välillä on enemmän kuin pelkkä syntaksi. Lue lisää nuolitoiminnoista kohdasta Mozilla kehittäjien dokumentaatio.

2. Tuhoaminen

Destrukturointia käytetään tiedon saamiseksi monimutkaisista tietorakenteista. JavaScriptissä taulukot ja objektit voivat tallentaa monia arvoja. Voit muokata arvoja ja käyttää niitä sovelluksen eri osissa.

Saadaksesi nämä arvot, sinun on tuhottava muuttuja. Riippuen tietorakenteesta, jota käsittelet, voit käyttää piste- (.)- tai hakasulkumerkintää. Esimerkiksi:

konst opiskelija = {
'nimi': "Maria",


'osoite': "South Park, Bethlehem",


'ikä': 15
}

Rakennemuutos:

konsoli.log (oppilaan.nimi) // lähtö Mary

Yllä olevassa esimerkissä pistemerkintä käyttää avaimen "nimi" arvoa. ReactJS: ssä käytät destructuring-konseptia saadaksesi ja jakaaksesi arvoja sovelluksessasi. Rakennemuutos auttaa välttämään toistoa ja tekee koodistasi luettavamman.

3. Array Methods

Kohtaat taulukoita useita kertoja työskennellessäsi React-projektien parissa. Taulukko on kokoelma tietoja. Tallennat tiedot taulukoihin, jotta voit käyttää niitä tarvittaessa uudelleen.

Taulukkomenetelmiä käytetään ensisijaisesti tietojen käsittelemiseen, hakemiseen ja näyttämiseen. Jotkut yleisesti käytetyt taulukkomenetelmät ovat kartta(), suodattaa(), ja vähentää(). Sinun täytyy olla perehtynyt array menetelmät ymmärtää, milloin kutakin on sovellettava.

Esimerkiksi, kartta() Metodi iteroi kaikki taulukon kohteet. Se vaikuttaa jokaiseen taulukon elementtiin ja luo uuden taulukon.

konst numerot = [9, 16, 25, 36];
konst squaredArr = numbers.map(Matematiikka.sqrt) // 3,4,5,6

Käytät paljon taulukkomenetelmiä ReactJS: ssä. Niiden avulla voit muuntaa taulukoita merkkijonoiksi, yhdistää, lisätä kohteita ja poistaa kohteita muista taulukoista.

4. Lyhyet ehdot

Ehdot ovat lauseita, joita JavaScript käyttää päätösten tekemiseen koodissa. Lyhyitä ehdollisia ovat && (ja), II (tai) ja kolmiosainen operaattori. Nämä ovat lyhyempiä ehtolausekkeita ja if/else-lauseita.

Seuraava esimerkki näyttää, kuinka kolmiosaista operaattoria käytetään.

Koodi if/else-lauseella:

toimintoavaamis aika(päivä) {
jos (päivä == SUNNUNTAI) {
palata12;
 } 
muu {
palata9;
 }
}

Koodi kolmen operaattorin kanssa:

toimintoavaamis aika(päivä) {
palata päivä == SUNNUNTAI? 12: 9;
}

Ota selvää erityyppisiä ehtoja keskittyen erityisesti lyhyisiin ehdollisiin ehtoihin. Näitä käytetään laajasti Reactissa.

5. Mallin kirjaimet

Mallikirjaimet käyttävät merkkijonoa (``) merkkijonon määrittämiseen. Malliliteraalien avulla voit muokata merkkijonotietoja, mikä tekee niistä dynaamisempia. Merkittyjen malliliteraalien avulla voit suorittaa toimintoja merkkijonon sisällä. Nämä ovat lyhyempiä ehtolausekkeita ja if/else-lauseita.

Esimerkiksi:

antaa etunimi = "Jane";
antaa sukunimi = "Doe";
antaa teksti = `Tervetuloa ${firstName}, ${lastName}!`; // Tervetuloa Jane Doe!

6. Levitä operaattorit

Spread-operaattori (...) kopioi objektin tai taulukon arvot toiseen. Sen syntaksi koostuu kolmesta pisteestä, joita seuraa muuttujan nimi. Esimerkiksi (...nimi). Se yhdistää kahden taulukon tai objektin ominaisuudet.

Seuraava esimerkki näyttää, kuinka hajaoperaattoria käytetään kopioimaan muuttujan arvot toiseen.

konst nimet = ["Maria", "Jane"]; 
konst ryhmän jäsenet = ["Fred", ...nimet, "Angela"]; // ["Fred", "Mary", "Jane", "Angela"]

Voit käyttää levitysoperaattoria useiden toimintojen suorittamiseen. Näitä ovat taulukon sisällön kopioiminen, taulukon lisääminen toiseen, sisäkkäisten taulukoiden käyttö ja taulukoiden välittäminen argumentteina. Voit käyttää ReactJS: n spread-operaattoria komponenttien tilanmuutosten käsittelemiseen.

Miksi oppia ReactJS?

ReactJS on suosittu hyvästä syystä. Siinä on lyhyt oppimiskäyrä, luotettava ja se hahmontuu nopeasti DOM: iin. Se tukee itsenäisiä komponentteja ja siinä on erinomaiset virheenkorjaustyökalut.

ReactJS sisältää uusia JavaScript-konsepteja ECMAScript 6:sta (ES6). JavaScriptin peruskäsitteiden oppiminen helpottaa projektien kehittämistä ReactJS: ssä.

Kaiken huipuksi ReactJS: llä on loistava yhteisö, joka julkaisee jatkuvasti uusia päivityksiä. Jos haluat oppia JavaScript-kirjaston, ReactJS olisi loistava valinta. Next.js-kehys täydentää ReactJS: n rajoituksia. Näiden kahden yhdistelmä tekee ReactJS: stä tehokkaan käyttöliittymäkirjaston.