A legnépszerűbb előtér-könyvtárként mindenki meg akarja tanulni a Reactot. A ReactJS alapvetően JavaScript. Ez azonban nem jelenti azt, hogy mindent meg kell tanulnia JavaScriptben, hogy áttérjen a ReactJS-re. Az alapvető JavaScript-fogalmak megértése segít könnyebben megérteni a React fogalmakat, és végső soron felgyorsítja a projekteken való munkavégzés képességét.
Vázoljuk fel azokat a lényeges fogalmakat, amelyeket tudnia kell a JavaScriptről, mielőtt áttérne a ReactJS-re.
1. Nyíl funkciók
A nyílfüggvényeket széles körben használják a Reactban. A 16.8-as verziótól kezdve a React az osztályalapú összetevőkről a funkcionális komponensekre vált át. Nyíl funkciók lehetővé teszi rövidebb szintaxisú függvények létrehozását.
Illusztráljuk ezt a következő példákkal:
Rendszeres működés
funkcióüdvözlet() {
Visszatérés'Helló'
}
konzol.log (üdvözlet()) //helloNyíl funkció
hagyja üdvözlet = () =>'Helló'
konzol.log (üdvözlet()) //helloA fenti két függvénynek ugyanaz a kimenete, bár a szintaxis eltérő. A nyíl funkció rövidebbnek és tisztábbnak tűnik, mint a normál funkció. A React komponensek általában a következő szerkezettel rendelkeznek:
import Reagál tól től'reagál'const Könyv = () => {
Visszatérés (
könyv</div>)
}
exportalapértelmezett Könyv
A nyílfüggvényeknek nincs neve. Ha el szeretné nevezni, rendelje hozzá egy változóhoz. A normál és a nyílfüggvény közötti különbség több, mint a szintaxis. Tudjon meg többet a nyíl funkciókról itt Mozilla fejlesztői dokumentáció.
2. Destrukturálás
A strukturálást arra használják, hogy összetett adatstruktúrákból adatokat nyerjenek ki. A JavaScriptben a tömbök és objektumok sok értéket tárolhatnak. Az értékeket módosíthatja, és az alkalmazás különböző részein használhatja.
Ahhoz, hogy megkapjuk ezeket az értékeket, meg kell semmisíteni a változót. Attól függően, hogy milyen adatstruktúrával van dolgunk, használhatjuk a pont (.) vagy a zárójeles jelölést. Például:
const tanuló = {'név': "Mária",
'cím': "South Park, Betlehem",
'kor': 15
}
Megsemmisítés:
konzol.log (tanuló.név) // kimenet MaryA fenti példában a pontjelölés a 'name' kulcs értékét éri el. A ReactJS-ben a strukturálási koncepciót fogja használni az alkalmazások értékeinek megszerzésére és megosztására. A strukturálás segít elkerülni az ismétlődést, és olvashatóbbá teszi a kódot.
3. Array Methods
A React projekteken való munka közben többször is találkozhat tömbökkel. A tömb adatok gyűjteménye. Az adatokat tömbökben tárolja, így szükség esetén újra felhasználhatja azokat.
A tömbmódszereket elsősorban adatok manipulálására, lekérésére és megjelenítésére használják. Néhány gyakran használt tömbmódszer térkép(), szűrő(), és csökkenti(). Biztosan ismeri a tömb módszerek hogy megértsük, mikor kell alkalmazni mindegyiket.
Például a térkép() A metódus egy tömb összes elemén iterál. A tömb minden elemére hat, és új tömböt hoz létre.
const számok = [9, 16, 25, 36];
const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6
A ReactJS-ben sokat fogsz használni tömbmódszereket. Használja őket a tömbök karakterláncokká konvertálására, összekapcsolására, elemek hozzáadására és elemek eltávolítására más tömbökből.
4. Rövid feltételek
A feltételes feltételek olyan utasítások, amelyeket a JavaScript a kódban történő döntéshozatalhoz használ. A rövid feltételes feltételek közé tartozik az && (és), a II (vagy) és a hármas operátor. Ezek a feltételek és az if/else utasítások rövidebb kifejezései.
A következő példa bemutatja a háromtagú operátor használatát.
Kód if/else utasítással:
funkciónyitvatartási idő(nap) {
ha (nap == VASÁRNAP) {
Visszatérés12;
}
más {
Visszatérés9;
}
}Kód hármas operátorral:
funkciónyitvatartási idő(nap) {
Visszatérés nap == VASÁRNAP? 12: 9;
}Tanulni valamiről különböző típusú feltételek különös tekintettel a rövid feltételes szavakra. Ezeket széles körben használják a Reactban.
5. Sablon Literals
A Sablon Literálok back-tickeket (``) használnak a karakterlánc meghatározásához. A sablonliterálok lehetővé teszik a karakterlánc-adatok kezelését, dinamikusabbá téve azokat. A címkézett sablonliterálok lehetővé teszik egy karakterláncon belüli műveletek végrehajtását. Ezek a feltételek és az if/else utasítások rövidebb kifejezései.
Például:
hagyja keresztnév = "Jane";hagyja vezetéknév = "Dámvadtehén";
hagyja szöveg = `Üdvözlöm ${firstName}, ${lastName}!`; // Üdvözlünk Jane Doe!
6. Spread operátorok
A Spread operátor (...) átmásolja egy objektum vagy tömb értékeit egy másikba. Szintaxisa három pontból áll, amelyet a változó neve követ. Például (...név). Két tömb vagy objektum tulajdonságait egyesíti.
A következő példa bemutatja, hogyan használható a spread operátor az egyik változó értékeinek a másikba másolására.
const nevek = ["Mária", "Jane"];
const csoporttagok = ["Fred", ...nevek, "Angela"]; // ["Fred", "Mary", "Jane", "Angela"]
A spread operátort számos művelet elvégzésére használhatja. Ezek közé tartozik egy tömb tartalmának másolása, egy tömb beszúrása egy másikba, a beágyazott tömbök elérése és a tömbök argumentumként való átadása. A ReactJS-ben a spread operátort használhatja az összetevők állapotváltozásainak kezelésére.
Miért tanulja meg a ReactJS-t?
A ReactJS jó okkal népszerű. Rövid tanulási görbéje van, megbízható, és gyorsan renderelődik a DOM számára. Támogatja az önálló komponenseket, és nagyszerű hibakereső eszközökkel rendelkezik.
A ReactJS az ECMAScript 6 (ES6) új JavaScript-koncepcióit tartalmazza. A JavaScript alapvető fogalmainak elsajátítása megkönnyíti a projektek fejlesztését a ReactJS-ben.
Mindennek tetejébe a ReactJS nagyszerű közösséggel rendelkezik, amely folyamatosan új frissítéseket ad ki. Ha JavaScript-könyvtárat szeretne megtanulni, a ReactJS nagyszerű választás lenne. A Next.js keretrendszer kiegészíti a ReactJS korlátait. A kettő kombinációja a ReactJS-t egy hatékony előtér-könyvtárrá teszi.
