Kaip populiariausia priekinė biblioteka, visi nori išmokti „React“. „ReactJS“ iš esmės yra „JavaScript“. Bet tai nereiškia, kad norėdami pereiti prie ReactJS, turite viską išmokti „JavaScript“. Pagrindinių „JavaScript“ sąvokų supratimas padės lengviau suvokti „React“ sąvokas, o galiausiai tai pagreitins jūsų gebėjimą dirbti su projektais.
Apibūdinkime pagrindines sąvokas, kurias turėtumėte žinoti apie „JavaScript“ prieš pereinant prie „ReactJS“.
1. Rodyklės funkcijos
Rodyklės funkcijos plačiai naudojamos React. Nuo 16.8 versijos „React“ perėjo nuo klasės komponentų prie funkcinių komponentų. Rodyklės funkcijos leidžia kurti trumpesnės sintaksės funkcijas.
Iliustruojame tai šiais pavyzdžiais:
Įprasta funkcija
funkcijapasisveikinimas() {
grąžinti'Sveiki'
}
konsolė.log (pasveikinimas()) //helloRodyklės funkcija
leisti pasisveikinimas = () =>'Sveiki'
konsolė.log (pasveikinimas()) //helloDviejų aukščiau pateiktų funkcijų išvestis yra tokia pati, nors sintaksė skiriasi. Rodyklės funkcija atrodo trumpesnė ir švaresnė nei įprasta funkcija. Paprastai React komponentai turi tokią struktūrą:
importuoti Reaguoti iš'reaguoti'konst Knyga = () => {
grąžinti (
Knyga</div>)
}
eksportuotinumatytas Knyga
Rodyklės funkcijos neturi pavadinimų. Jei norite jį pavadinti, priskirkite jį kintamajam. Skirtumas tarp įprastos ir rodyklės funkcijos yra ne tik sintaksė. Sužinokite daugiau apie rodyklių funkcijas Mozilla kūrėjų dokumentacija.
2. Destruktūrizavimas
Destruktūrizavimas naudojamas duomenims gauti iš sudėtingų duomenų struktūrų. „JavaScript“ masyvai ir objektai gali saugoti daug reikšmių. Galite manipuliuoti reikšmėmis ir naudoti jas įvairiose programos dalyse.
Norėdami gauti šias reikšmes, turite sunaikinti kintamąjį. Priklausomai nuo duomenų struktūros, su kuria susiduriate, galite naudoti taško (.) žymėjimą arba skliaustų žymėjimą. Pavyzdžiui:
konst studentas = {'vardas': 'Marija',
'adresas': „Pietų parkas, Betliejus“,
"amžius": 15
}
Naikinimas:
konsolė.log (studento.vardas) // išvestis MarijaAukščiau pateiktame pavyzdyje taško žymėjimas pasiekia rakto „pavadinimas“ reikšmę. ReactJS naudosite naikinimo koncepciją, kad gautumėte ir bendrintumėte savo programos vertes. Destruktūrizavimas padeda išvengti pasikartojimo ir daro jūsų kodą skaitomesnį.
3. Masyvo metodai
Dirbdami su „React“ projektais kelis kartus susidursite su masyvais. Masyvas yra duomenų rinkinys. Duomenis saugote masyvuose, kad prireikus galėtumėte juos naudoti pakartotinai.
Masyvo metodai pirmiausia naudojami duomenims valdyti, gauti ir rodyti. Kai kurie dažniausiai naudojami masyvo metodai yra žemėlapis (), filtras(), ir sumažinti (). Turite būti susipažinę su masyvo metodai suprasti, kada taikyti kiekvieną.
Pavyzdžiui, žemėlapis () metodas kartoja visus masyvo elementus. Jis veikia kiekvieną masyvo elementą ir sukuria naują masyvą.
konst skaičiai = [9, 16, 25, 36];
konst squaredArr = skaičiai.map(Matematika.sqrt) // 3,4,5,6
ReactJS daug naudosite masyvo metodus. Jas naudosite norėdami konvertuoti masyvus į eilutes, sujungti, pridėti elementus ir pašalinti elementus iš kitų masyvų.
4. Trumpos sąlygos
Sąlygos yra teiginiai, kuriuos „JavaScript“ naudoja priimdamas sprendimus kode. Trumposios sąlygos apima && (ir), II (arba) ir trijų dalių operatorių. Tai yra trumpesnės sąlygų ir if/else teiginių išraiškos.
Toliau pateiktame pavyzdyje parodyta, kaip naudoti trijų dalių operatorių.
Kodas su if/else teiginiu:
funkcijaatidarymo laikas(dieną) {
jeigu (diena == SEKMADIENIS) {
grąžinti12;
}
Kitas {
grąžinti9;
}
}Kodas su trinariniu operatoriumi:
funkcijaatidarymo laikas(dieną) {
grąžinti diena == SEKMADIENIS? 12: 9;
}Išmokti apie įvairių tipų sąlyginiai ypatingą dėmesį skirdami trumpiesiems sąlyginiams. Jie plačiai naudojami React.
5. Šablonų raidės
Šablonų raidės eilutei apibrėžti naudoja atgalines žymes (``). Šablonų literalai leidžia manipuliuoti eilutės duomenimis, todėl jie tampa dinamiškesni. Žymėtų šablonų literalai leidžia atlikti operacijas eilutėje. Tai yra trumpesnės sąlygų ir if/else teiginių išraiškos.
Pavyzdžiui:
leisti vardas = "Džeina";leisti pavardė = "Eiras";
leisti tekstas = `Sveiki atvykę ${firstName}, ${lastName}!`; // Sveiki atvykę į Jane Doe!
6. Sklaidos operatoriai
Operatorius Spread (...) nukopijuoja objekto ar masyvo reikšmes į kitą. Jo sintaksė susideda iš trijų taškų, po kurių nurodomas kintamojo pavadinimas. Pavyzdžiui (...vardas). Jis sujungia dviejų masyvų ar objektų savybes.
Šiame pavyzdyje parodyta, kaip naudoti sklaidos operatorių, norint nukopijuoti vieno kintamojo reikšmes į kitą.
konst vardai = ['Marija', 'Jane'];
konst grupės nariai = ["Fredas",... vardai, "Angela"]; // ["Fredas", "Marija", "Džeinė", "Angela"]
Norėdami atlikti keletą operacijų, galite naudoti sklaidos operatorių. Tai apima masyvo turinio kopijavimą, masyvo įterpimą į kitą, prieigą prie įdėtų masyvų ir masyvų kaip argumentų perdavimą. Galite naudoti platinimo operatorių ReactJS, kad tvarkytumėte komponentų būsenos pokyčius.
Kodėl mokytis ReactJS?
„ReactJS“ yra populiarus dėl geros priežasties. Jis turi trumpą mokymosi kreivę, patikimas ir greitai perduodamas DOM. Jis palaiko atskirus komponentus ir turi puikius derinimo įrankius.
„ReactJS“ apima naujas „JavaScript“ koncepcijas iš ECMAScript 6 (ES6). Mokydamiesi pagrindinių „JavaScript“ sąvokų, bus lengviau kurti projektus „ReactJS“.
Be to, ReactJS turi puikią bendruomenę, kuri nuolat išleidžia naujus atnaujinimus. Jei norite išmokti „JavaScript“ biblioteką, „ReactJS“ būtų puikus pasirinkimas. Next.js sistema papildo ReactJS apribojimus. Dviejų šių dalykų derinys daro ReactJS galinga priekinės bibliotekos biblioteka.
