Ako najobľúbenejšia frontend knižnica sa každý chce naučiť React. ReactJS je v podstate JavaScript. To však neznamená, že sa musíte naučiť všetko v JavaScripte, aby ste mohli prejsť na ReactJS. Pochopenie základných konceptov JavaScriptu vám pomôže ľahšie pochopiť koncepty React a v konečnom dôsledku to urýchli vašu schopnosť pracovať na projektoch.
Poďme si načrtnúť základné pojmy, ktoré by ste mali vedieť o JavaScripte pred prechodom na ReactJS.
1. Funkcie šípok
Funkcie šípok sú v Reacte široko používané. Od verzie 16.8 sa React presunul z komponentov založených na triedach na funkčné komponenty. Funkcie šípok umožňujú vytvárať funkcie s kratšou syntaxou.
Ukážme si to na nasledujúcich príkladoch:
Pravidelná funkcia
funkciupozdrav() {
vrátiť'Ahoj'
}
konzoly.log (pozdrav()) //helloFunkcia šípky
nech pozdravujem = () =>'Ahoj'
konzoly.log (pozdrav()) //helloObe vyššie uvedené funkcie majú rovnaký výstup, hoci syntax je odlišná. Funkcia šípok vyzerá kratšie a čistejšie ako bežná funkcia. Zvyčajne majú komponenty React nasledujúcu štruktúru:
importovať Reagovať od'reagovať'konšt Kniha = () => {
vrátiť (
Kniha</div>)
}
exportpredvolená Kniha
Funkcie šípok nemajú názvy. Ak ho chcete pomenovať, priraďte ho k premennej. Rozdiel medzi bežnou funkciou a funkciou šípky je viac než len syntax. Viac informácií o funkciách šípok nájdete v Mozilla dokumentácia pre vývojárov.
2. Zničenie
Deštrukcia sa používa na získanie údajov z komplexných dátových štruktúr. V JavaScripte môžu polia a objekty uchovávať veľa hodnôt. S hodnotami môžete manipulovať a používať ich v rôznych častiach aplikácie.
Ak chcete získať tieto hodnoty, musíte premennú deštruktúrovať. V závislosti od štruktúry údajov, s ktorou máte čo do činenia, môžete použiť zápis bodkou (.) alebo zápis zátvoriek. Napríklad:
konšt študent = {'názov': 'Mary',
'adresa': "South Park, Betlehem",
'Vek': 15
}
Zničenie:
konzoly.log (meno študenta) // výstup MaryVo vyššie uvedenom príklade bodkový zápis pristupuje k hodnote kľúča 'name'. V ReactJS použijete koncept deštrukcie na získanie a zdieľanie hodnôt vo vašej aplikácii. Deštrukcia pomáha vyhnúť sa opakovaniu a robí váš kód čitateľnejším.
3. Array Methods
Pri práci na projektoch React sa s poľami stretnete niekoľkokrát. Pole je súbor údajov. Údaje ukladáte do polí, takže ich môžete v prípade potreby znova použiť.
Metódy poľa sa primárne používajú na manipuláciu, získavanie a zobrazovanie údajov. Niektoré bežne používané metódy poľa sú mapa(), filter(), a znížiť (). Musíte byť oboznámení s metódy poľa pochopiť, kedy použiť každý.
Napríklad, mapa() metóda iteruje cez všetky položky v poli. Pôsobí na každý prvok poľa a vytvára nové pole.
konšt čísla = [9, 16, 25, 36];
konšt squaredArr = čísla.mapa(Matematika.sqrt) // 3,4,5,6
V ReactJS budete veľa používať metódy poľa. Budete ich používať na konverziu polí na reťazce, spájanie, pridávanie položiek a odstraňovanie položiek z iných polí.
4. Krátke podmienky
Podmienené sú príkazy, ktoré JavaScript používa na rozhodovanie v kóde. Krátke podmienky zahŕňajú && (a), II (alebo) a Ternárny operátor. Ide o kratšie vyjadrenia podmienok a výroky if/otherse.
Nasledujúci príklad ukazuje, ako používať ternárny operátor.
Kódujte príkazom if/else:
funkciuotvaracie hodiny(deň) {
ak (deň == NEDEĽA) {
vrátiť12;
}
inak {
vrátiť9;
}
}Kód s ternárnym operátorom:
funkciuotvaracie hodiny(deň) {
vrátiť deň == NEDEĽA? 12: 9;
}Dozvedieť sa o rôzne typy kondicionálov s osobitným zameraním na krátke kondicionály. Tie sú v Reacte široko používané.
5. Doslovy šablóny
Literály šablóny používajú na definovanie reťazca spätné znamienka (``). Šablónové literály vám umožňujú manipulovať s údajmi o reťazcoch, aby boli dynamickejšie. Označené literály šablóny vám umožňujú vykonávať operácie v rámci reťazca. Ide o kratšie vyjadrenia podmienok a výroky if/otherse.
Napríklad:
nech krstné meno = "Jane";nech priezvisko = "Laň";
nech text = „Vitajte ${firstName}, ${lastName}!`; // Vitajte Jane Doe!
6. Operátori šírenia
Operátor Spread (...) skopíruje hodnoty objektu alebo poľa do iného. Jeho syntax pozostáva z troch bodiek, za ktorými nasleduje názov premennej. Napríklad (...meno). Spája vlastnosti dvoch polí alebo objektov.
Nasledujúci príklad ukazuje, ako použiť operátor spread na kopírovanie hodnôt jednej premennej do druhej.
konšt mená = ['Mary', 'Jane'];
konšt členovia skupiny = ['Fred', ...mená, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Operátor šírenia môžete použiť na vykonanie množstva operácií. Patrí medzi ne kopírovanie obsahu poľa, vkladanie poľa do iného poľa, prístup k vnoreným poliam a odovzdávanie polí ako argumentov. Na spracovanie zmien stavu v komponentoch môžete použiť operátor spreadu v ReactJS.
Prečo sa učiť ReactJS?
ReactJS je populárny z dobrého dôvodu. Má krátku krivku učenia, je spoľahlivý a rýchlo sa vykresľuje do DOM. Podporuje samostatné komponenty a má skvelé nástroje na ladenie.
ReactJS zahŕňa nové koncepty JavaScriptu z ECMAScript 6 (ES6). Učenie sa základných konceptov v JavaScripte uľahčí vývoj projektov v ReactJS.
K tomu všetkému má ReactJS skvelú komunitu, ktorá neustále vydáva nové aktualizácie. Ak sa chcete naučiť knižnicu JavaScript, ReactJS by bola skvelá voľba. Rámec Next.js dopĺňa obmedzenia ReactJS. Kombinácia týchto dvoch robí z ReactJS výkonnú front-end knižnicu.
