Kā vispopulārākā priekšgala bibliotēka, ikviens vēlas apgūt React. ReactJS būtībā ir JavaScript. Bet tas nenozīmē, ka jums ir jāapgūst viss JavaScript, lai pārietu uz ReactJS. Izpratne par JavaScript pamatjēdzieniem palīdzēs jums vieglāk uztvert React jēdzienus, un galu galā tas paātrinās jūsu spēju strādāt pie projektiem.
Ieskicēsim galvenos jēdzienus, kas jums jāzina par JavaScript pirms pārejas uz ReactJS.
1. Bultiņu funkcijas
React tiek plaši izmantotas bultiņu funkcijas. Sākot ar versiju 16.8, React pārcēlās no uz klasēm balstītiem komponentiem uz funkcionāliem komponentiem. Bultiņu funkcijas ļauj izveidot funkcijas ar īsāku sintaksi.
Ilustrēsim to šādos piemēros:
Regulāra funkcija
funkcijusveiciens() {
atgriezties'Sveiki'
}
konsole.log (sveiciens()) //helloBultiņas funkcija
ļaut sveiciens = () =>'Sveiki'
konsole.log (sveiciens()) //helloAbām iepriekšminētajām funkcijām ir vienāda izvade, lai gan sintakse ir atšķirīga. Bultiņas funkcija izskatās īsāka un tīrāka nekā parastā funkcija. Parasti React komponentiem ir šāda struktūra:
imports Reaģēt no'reaģēt'konst Grāmata = () => {
atgriezties (
Grāmata</div>)
}
eksportētnoklusējuma Grāmata
Bultiņu funkcijām nav nosaukumu. Ja vēlaties to nosaukt, piešķiriet to mainīgajam. Atšķirība starp parasto un bultiņu funkciju ir vairāk nekā tikai sintakse. Uzziniet vairāk par bultiņu funkcijām Mozilla izstrādātāju dokumentācija.
2. Destrukturēšana
Destrukturēšanu izmanto, lai iegūtu datus no sarežģītām datu struktūrām. JavaScript masīvos un objektos var saglabāt daudzas vērtības. Varat manipulēt ar vērtībām un izmantot tās dažādās lietojumprogrammas daļās.
Lai iegūtu šīs vērtības, jums ir jāiznīcina mainīgais. Atkarībā no datu struktūras, ar kuru jums ir darīšana, varat izmantot punktu (.) vai iekavu apzīmējumu. Piemēram:
konst students = {'vārds': 'Mērija',
'adrese': "Dienvidu parks, Betlēme",
'vecums': 15
}
Iznīcināšana:
konsole.log (studenta.nosaukums) // izeja MērijaIepriekš minētajā piemērā punkta apzīmējums piekļūst atslēgas 'name' vērtībai. Programmā ReactJS izmantosit iznīcināšanas koncepciju, lai iegūtu un koplietotu vērtības savā lietojumprogrammā. Destrukturēšana palīdz izvairīties no atkārtošanās un padara kodu lasāmāku.
3. Masīvu metodes
Strādājot pie React projektiem, jūs vairākas reizes saskarsities ar masīviem. Masīvs ir datu kopums. Jūs glabājat datus masīvos, lai vajadzības gadījumā varētu tos izmantot atkārtoti.
Masīvu metodes galvenokārt tiek izmantotas, lai apstrādātu, izgūtu un parādītu datus. Dažas biežāk izmantotās masīvu metodes ir karte (), filtrs (), un samazināt (). Jums jābūt pazīstamam ar masīvu metodes lai saprastu, kad katru piemērot.
Piemēram, karte () metode atkārto visus masīva vienumus. Tas iedarbojas uz katru masīva elementu, lai izveidotu jaunu masīvu.
konst cipari = [9, 16, 25, 36];
konst squaredArr = numbers.map(Matemātika.sqrt) // 3,4,5,6
ReactJS jūs daudz izmantosit masīvu metodes. Jūs tos izmantosit, lai pārveidotu masīvus par virknēm, pievienotos, pievienotu vienumus un noņemtu vienumus no citiem masīviem.
4. Īsi nosacījumi
Nosacījumi ir paziņojumi, ko JavaScript izmanto, lai pieņemtu lēmumus kodā. Īsie nosacījumi ietver && (un), II (vai) un trīskāršu operatoru. Šīs ir īsākas nosacījumu izteiksmes un if/else priekšraksti.
Nākamajā piemērā parādīts, kā izmantot trīskāršu operatoru.
Kods ar if/else paziņojumu:
funkcijuatvēršanas laiks(diena) {
ja (diena == SVĒTDIENA) {
atgriezties12;
}
cits {
atgriezties9;
}
}Kods ar trīskāršu operatoru:
funkcijuatvēršanas laiks(diena) {
atgriezties diena == SVĒTDIENA? 12: 9;
}Mācies par dažāda veida nosacījumi īpašu uzmanību pievēršot īsajiem nosacījumiem. Tos plaši izmanto React.
5. Veidņu burti
Veidnes burti virknes definēšanai izmanto atzīmes (``). Veidņu literāļi ļauj manipulēt ar virkņu datiem, padarot tos dinamiskākus. Atzīmētie veidņu literāļi ļauj veikt darbības virknē. Šīs ir īsākas nosacījumu izteiksmes un if/else priekšraksti.
Piemēram:
ļaut vārds = "Džeina";ļaut uzvārds = "Dirzīte";
ļaut teksts = `Laipni lūdzam ${firstName}, ${lastName}!`; // Laipni lūdzam Džeina Do!
6. Izplatības operatori
Operators Spread (...) kopē objekta vai masīva vērtības citā. Tās sintakse sastāv no trim punktiem, kam seko mainīgā nosaukums. Piemēram (...nosaukums). Tas apvieno divu masīvu vai objektu īpašības.
Nākamajā piemērā parādīts, kā izmantot izkliedes operatoru, lai kopētu viena mainīgā vērtības uz citu.
konst vārdi = ['Mērija', "Džeina"];
konst grupas dalībnieki = ["Freds", ...vārdi, "Angela"]; // ["Freds", "Mērija", "Džeina", "Andžela"]
Varat izmantot izkliedes operatoru, lai veiktu vairākas darbības. Tie ietver masīva satura kopēšanu, masīva ievietošanu citā, piekļuvi ligzdotajiem masīviem un masīvu nodošanu kā argumentus. Varat izmantot ReactJS izkliedes operatoru, lai apstrādātu komponentu stāvokļa izmaiņas.
Kāpēc mācīties ReactJS?
ReactJS ir populārs laba iemesla dēļ. Tam ir īsa mācīšanās līkne, uzticama un ātri tiek nodrošināta DOM. Tas atbalsta atsevišķus komponentus, un tam ir lieliski atkļūdošanas rīki.
ReactJS ietver jaunas JavaScript koncepcijas no ECMAScript 6 (ES6). JavaScript pamatjēdzienu apgūšana atvieglos projektu izstrādi programmā ReactJS.
Turklāt ReactJS ir lieliska kopiena, kas pastāvīgi izlaiž jaunus atjauninājumus. Ja vēlaties apgūt JavaScript bibliotēku, ReactJS būtu lieliska izvēle. Next.js ietvars papildina ReactJS ierobežojumus. Abu kombinācija padara ReactJS par spēcīgu priekšgala bibliotēku.
