Kõige populaarsema kasutajaliidese raamatukoguna tahavad kõik Reacti õppida. ReactJS on põhimõtteliselt JavaScript. Kuid see ei tähenda, et ReactJS-i liikumiseks peate JavaScriptis kõike õppima. Põhiliste JavaScripti kontseptsioonide mõistmine aitab teil Reacti kontseptsioonidest hõlpsamini aru saada ja lõpuks kiirendab see teie võimet projektidega töötada.
Toome välja olulised mõisted, mida peaksite enne ReactJS-i üleminekut JavaScripti kohta teadma.
1. Noolefunktsioonid
Reactis kasutatakse laialdaselt noolefunktsioone. Alates versioonist 16.8 liikus React klassipõhistelt komponentidelt funktsionaalsetele komponentidele. Noole funktsioonid võimaldab luua lühema süntaksiga funktsioone.
Illustreerime seda järgmistes näidetes:
Regulaarne funktsioon
funktsioonitervitus() {
tagasi'Tere'
}
konsool.log (tervitus()) //helloNoole funktsioon
lase tervitus = () =>'Tere'
konsool.log (tervitus()) //helloKahel ülaltoodud funktsioonil on sama väljund, kuigi süntaks on erinev. Noolefunktsioon näeb välja lühem ja puhtam kui tavaline funktsioon. Tavaliselt on Reacti komponentidel järgmine struktuur:
importida Reageerige alates'reageeri'konst Raamat = () => {
tagasi (
Raamat</div>)
}
eksportidavaikimisi Raamat
Noolefunktsioonidel pole nimesid. Kui soovite sellele nime anda, määrake see muutujale. Erinevus tavalise ja noolefunktsiooni vahel on rohkem kui lihtsalt süntaks. Lisateavet noolefunktsioonide kohta leiate siit Mozilla arendajate dokumentatsioon.
2. Destruktureerimine
Destruktureerimist kasutatakse andmete saamiseks keerukatest andmestruktuuridest. JavaScriptis võivad massiivid ja objektid salvestada palju väärtusi. Saate väärtustega manipuleerida ja neid rakenduse erinevates osades kasutada.
Nende väärtuste saamiseks peate muutuja hävitama. Sõltuvalt käsitletavast andmestruktuurist võite kasutada punkti (.) või sulgude tähistust. Näiteks:
konst õpilane = {'nimi': "Maarja",
'aadress': "South Park, Petlemm",
'vanus': 15
}
Destruktureerimine:
konsool.log (õpilase.nimi) // väljund MaryÜlaltoodud näites pääseb punktitähis ligi võtme 'nimi' väärtusele. ReactJS-is kasutate oma rakenduse väärtuste hankimiseks ja jagamiseks destruktureerimiskontseptsiooni. Destruktureerimine aitab vältida kordusi ja muudab teie koodi loetavamaks.
3. Massiivi meetodid
Reacti projektidega töötades kohtate massiive mitu korda. Massiiv on andmete kogum. Andmeid salvestate massiividesse, et saaksite neid vajadusel uuesti kasutada.
Massiivimeetodeid kasutatakse peamiselt andmete töötlemiseks, toomiseks ja kuvamiseks. Mõned sagedamini kasutatavad massiivimeetodid on kaart (), filter()ja vähenda (). Peate olema tuttav massiivi meetodid et mõista, millal neid rakendada.
Näiteks kaart () meetod itereerib kõiki massiivi üksusi. See toimib massiivi igale elemendile uue massiivi loomiseks.
konst numbrid = [9, 16, 25, 36];
konst squaredArr = numbers.map(matemaatika.sqrt) // 3,4,5,6
ReactJS-is kasutate massiivimeetodeid palju. Kasutate neid massiivide teisendamiseks stringideks, ühendamiseks, üksuste lisamiseks ja üksuste eemaldamiseks teistest massiividest.
4. Lühikesed tingimused
Tingimused on laused, mida JavaScript kasutab koodis otsuste tegemiseks. Lühikeste tingimustingimuste hulka kuuluvad && (ja), II (või) ja kolmekordne operaator. Need on lühemad tingimuste ja if/else laused.
Järgmine näide näitab, kuidas kasutada kolmekomponentset operaatorit.
Kood if/else lausega:
funktsiooniavamise aeg(päeval) {
kui (päev == PÜHAPÄEV) {
tagasi12;
}
muidu {
tagasi9;
}
}Kood kolmepoolse operaatoriga:
funktsiooniavamise aeg(päeval) {
tagasi päev == PÜHAPÄEV? 12: 9;
}Õppima millegi kohta erinevat tüüpi tingimuslaused pöörates erilist tähelepanu lühikestele tingimussõnadele. Neid kasutatakse Reactis laialdaselt.
5. Mall Literaalid
Mall Literaalid kasutavad stringi määratlemiseks tagasimärke (``). Malli literaalid võimaldavad teil stringiandmetega manipuleerida, muutes need dünaamilisemaks. Märgistatud malliliteraalid võimaldavad teil stringi piires toiminguid teha. Need on lühemad tingimuste ja if/else laused.
Näiteks:
lase eesnimi = "Jane";lase perekonnanimi = "Doe";
lase tekst = `Tere tulemast ${firstName}, ${lastName}!`; // Tere tulemast Jane Doe!
6. Spread operaatorid
Operaator Spread (...) kopeerib objekti või massiivi väärtused teise. Selle süntaks koosneb kolmest punktist, millele järgneb muutuja nimi. Näiteks (...nimi). See ühendab kahe massiivi või objekti omadused.
Järgmine näide näitab, kuidas kasutada levikuoperaatorit ühe muutuja väärtuste kopeerimiseks teise.
konst nimed = ["Maarja", "Jane"];
konst grupiliikmed = ["Fred", ...nimed, "Angela"]; // ["Fred", "Mary", "Jane", "Angela"]
Spreadoperaatorit saate kasutada mitme toimingu tegemiseks. Nende hulka kuuluvad massiivi sisu kopeerimine, massiivi sisestamine teise, pesastatud massiividele juurdepääs ja massiivide argumentidena edastamine. Saate kasutada ReactJS-is leviku operaatorit komponentide olekumuutuste käsitlemiseks.
Miks õppida ReactJS-i?
ReactJS on populaarne mõjuval põhjusel. Sellel on lühike õppimiskõver, töökindel ja see renderdub kiiresti DOM-i. See toetab eraldiseisvaid komponente ja sellel on suurepärased silumistööriistad.
ReactJS sisaldab ECMAScript 6 (ES6) uusi JavaScripti kontseptsioone. Põhimõistete õppimine JavaScriptis muudab projektide arendamise ReactJS-is lihtsamaks.
Kõige tipuks on ReactJSil suurepärane kogukond, mis annab pidevalt välja uusi värskendusi. Kui soovite õppida JavaScripti teeki, oleks ReactJS suurepärane valik. Next.js raamistik täiendab ReactJS-i piiranguid. Nende kahe kombinatsioon teeb ReactJS-ist võimsa esiotsa raamatukogu.
