Vsi se želijo naučiti Reacta kot najbolj priljubljene čelne knjižnice. ReactJS je v osnovi JavaScript. Vendar to ne pomeni, da se morate naučiti vsega v JavaScriptu, da se premaknete na ReactJS. Razumevanje temeljnih konceptov JavaScript vam bo pomagalo lažje razumeti koncepte React in na koncu bo pospešilo vašo sposobnost dela na projektih.
Oglejmo si bistvene koncepte, ki bi jih morali vedeti o JavaScriptu, preden se premaknete na ReactJS.
1. Funkcije puščic
Puščične funkcije se pogosto uporabljajo v Reactu. Od različice 16.8 je React prešel s komponent, ki temeljijo na razredu, na funkcionalne komponente. Puščične funkcije omogočajo ustvarjanje funkcij s krajšo sintakso.
Naj to ponazorimo v naslednjih primerih:
Redna funkcija
funkcijopozdrav() {
vrnitev'zdravo'
}
konzola.log (pozdrav()) //helloFunkcija puščice
pustiti pozdrav = () =>'zdravo'
konzola.log (pozdrav()) //helloZgornji funkciji imata enak izhod, čeprav je sintaksa različna. Puščična funkcija je videti krajša in čistejša od običajne funkcije. Običajno imajo komponente React naslednjo strukturo:
uvoz Reagiraj od'reagirati'konst Knjiga = () => {
vrnitev (
Knjiga</div>)
}
izvozprivzeto Knjiga
Puščične funkcije nimajo imen. Če ga želite poimenovati, ga dodelite spremenljivki. Razlika med običajno in puščično funkcijo je več kot le sintaksa. Več o funkcijah puščic v Mozilla dokumentacijo razvijalcev.
2. Destrukturiranje
Destrukturiranje se uporablja za pridobivanje podatkov iz kompleksnih podatkovnih struktur. V JavaScriptu lahko nizi in predmeti shranijo veliko vrednosti. Z vrednostmi lahko manipulirate in jih uporabite v različnih delih aplikacije.
Če želite pridobiti te vrednosti, morate destrukturirati spremenljivko. Odvisno od strukture podatkov, s katero imate opravka, lahko uporabite zapis s piko (.) ali zapis z oklepajem. Na primer:
konst študent = {'ime': 'Mary',
'naslov': 'South Park, Betlehem',
'starost': 15
}
Destrukturiranje:
konzola.log (ime.študenta) // izpis MaryV zgornjem primeru zapis s piko dostopa do vrednosti ključa 'name'. V ReactJS boste uporabili koncept destrukturiranja za pridobivanje in skupno rabo vrednosti v svoji aplikaciji. Destrukturiranje pomaga preprečiti ponavljanje in naredi vašo kodo bolj berljivo.
3. Metode nizov
Med delom na projektih React se boste večkrat srečali z nizi. Niz je zbirka podatkov. Podatke shranjujete v polja, tako da jih lahko po potrebi ponovno uporabite.
Matrične metode se uporabljajo predvsem za manipulacijo, pridobivanje in prikazovanje podatkov. Nekatere pogosto uporabljene matrične metode so zemljevid(), filter(), in zmanjšati (). Morate biti seznanjeni z matrične metode razumeti, kdaj uporabiti vsako.
Na primer, zemljevid() metoda ponovi vse elemente v matriki. Deluje na vsak element matrike, da ustvari novo matriko.
konst številke = [9, 16, 25, 36];
konst squaredArr = numbers.map(matematika.sqrt) // 3,4,5,6
V ReactJS boste veliko uporabljali matrične metode. Uporabili jih boste za pretvorbo nizov v nize, združevanje, dodajanje elementov in odstranjevanje elementov iz drugih nizov.
4. Kratki pogoji
Pogojniki so izjave, ki jih JavaScript uporablja za sprejemanje odločitev v kodi. Kratki pogojniki vključujejo && (in), II (ali) in ternarni operator. To so krajši izrazi pogojev in stavkov if/else.
Naslednji primer prikazuje, kako uporabiti ternarni operator.
Koda s stavkom if/else:
funkcijoodpiralni čas(dan) {
če (dan == NEDELJA) {
vrnitev12;
}
drugače {
vrnitev9;
}
}Koda s ternarnim operaterjem:
funkcijoodpiralni čas(dan) {
vrnitev dan == NEDELJA? 12: 9;
}Poučite se o različne vrste pogojnikov s posebnim poudarkom na kratkih pogojnikih. Te se pogosto uporabljajo v Reactu.
5. Literali predloge
Literali predloge uporabljajo povratne kljukice (``) za definiranje niza. Literali predloge vam omogočajo, da manipulirate s podatki nizov, zaradi česar so bolj dinamični. Označeni literali predloge vam omogočajo izvajanje operacij znotraj niza. To so krajši izrazi pogojev in stavkov if/else.
Na primer:
pustiti Ime = "Jane";pustiti priimek = "srna";
pustiti besedilo = `Dobrodošli ${firstName}, ${lastName}!`; // Dobrodošli Jane Doe!
6. Operaterji širjenja
Operator Spread (...) kopira vrednosti predmeta ali matrike v drugo. Njegova sintaksa je sestavljena iz treh pik, ki jim sledi ime spremenljivke. Na primer (...ime). Združuje lastnosti dveh nizov ali predmetov.
Naslednji primer prikazuje, kako uporabiti operator razširjanja za kopiranje vrednosti ene spremenljivke v drugo.
konst imena = ['Mary', 'Jane'];
konst člani skupine = ['Fred',... imena, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Z operatorjem spread lahko izvajate številne operacije. Ti vključujejo kopiranje vsebine matrike, vstavljanje matrike v drugo, dostop do ugnezdenih matrik in posredovanje matrik kot argumentov. Operator širjenja lahko uporabite v ReactJS za obdelavo sprememb stanja v komponentah.
Zakaj se naučiti ReactJS?
ReactJS je priljubljen z dobrim razlogom. Ima kratko krivuljo učenja, je zanesljiv in se hitro upodablja v DOM. Podpira samostojne komponente in ima odlična orodja za odpravljanje napak.
ReactJS vključuje nove koncepte JavaScript iz ECMAScript 6 (ES6). Učenje temeljnih konceptov v JavaScriptu bo olajšalo razvoj projektov v ReactJS.
Poleg vsega pa ima ReactJS odlično skupnost, ki nenehno objavlja nove posodobitve. Če se želite naučiti knjižnice JavaScript, bi bil ReactJS odlična izbira. Ogrodje Next.js dopolnjuje omejitve ReactJS. Kombinacija obeh naredi ReactJS zmogljivo front-end knjižnico.