Jako nejoblíbenější frontend knihovna se každý chce naučit React. ReactJS je v podstatě JavaScript. Ale to neznamená, že se musíte naučit vše v JavaScriptu, abyste mohli přejít na ReactJS. Pochopení základních konceptů JavaScriptu vám pomůže snadněji pochopit koncepty Reactu a v konečném důsledku to urychlí vaši schopnost pracovat na projektech.
Pojďme si nastínit základní pojmy, které byste měli vědět o JavaScriptu, než přejdete na ReactJS.
1. Funkce šipek
Funkce šipek jsou v Reactu široce používány. Od verze 16.8 se React přesunul z komponent založených na třídách na funkční komponenty. Funkce šipek umožňují vytvářet funkce s kratší syntaxí.
Ukažme si to na následujících příkladech:
Pravidelná funkce
funkcePozdrav() {
vrátit se'Ahoj'
}
řídicí panel.log (pozdrav()) //helloFunkce šipky
nechat pozdrav = () =>'Ahoj'
řídicí panel.log (pozdrav()) //helloDvě výše uvedené funkce mají stejný výstup, i když syntaxe je odlišná. Funkce šipky vypadá kratší a čistší než běžná funkce. Obvykle mají komponenty React následující strukturu:
import Reagovat z'reagovat'konst Kniha = () => {
vrátit se (
Kniha</div>)
}
vývoznívýchozí Rezervovat
Funkce šipek nemají názvy. Pokud ji chcete pojmenovat, přiřaďte ji k proměnné. Rozdíl mezi běžnou funkcí a funkcí šipky je více než jen syntaxe. Další informace o funkcích šipek v Mozilla dokumentace vývojářů.
2. Ničení
Destrukturalizace se používá k získání dat ze složitých datových struktur. V JavaScriptu mohou pole a objekty ukládat mnoho hodnot. S hodnotami můžete manipulovat a používat je v různých částech aplikace.
Chcete-li získat tyto hodnoty, musíte proměnnou destruovat. V závislosti na datové struktuře, se kterou máte co do činění, můžete použít tečkový (.) zápis nebo závorku. Například:
konst student = {'název': 'Mary',
'adresa': "South Park, Bethlehem",
'stáří': 15
}
Zničení:
řídicí panel.log (jméno studenta) // výstup MaryVe výše uvedeném příkladu tečková notace přistupuje k hodnotě klíče 'name'. V ReactJS využijete koncept destrukcí k získání a sdílení hodnot ve vaší aplikaci. Destrukce pomáhá vyhnout se opakování a činí váš kód čitelnějším.
3. Metody pole
Při práci na projektech React se s poli setkáte několikrát. Pole je sbírka dat. Data ukládáte do polí, takže je můžete v případě potřeby znovu použít.
Metody pole se primárně používají k manipulaci, načítání a zobrazování dat. Některé běžně používané metody pole jsou mapa(), filtr(), a snížit(). Musíte být obeznámeni s metody pole abyste pochopili, kdy použít každý.
Například, mapa() metoda iteruje přes všechny položky v poli. Působí na každý prvek pole a vytváří nové pole.
konst čísla = [9, 16, 25, 36];
konst squaredArr = čísla.mapa(Matematika.sqrt) // 3,4,5,6
V ReactJS budete hodně používat metody pole. Budete je používat k převodu polí na řetězce, spojování, přidávání položek a odstraňování položek z jiných polí.
4. Krátké podmínky
Podmíněné podmínky jsou příkazy, které JavaScript používá k rozhodování v kódu. Krátké podmínky zahrnují && (a), II (nebo) a ternární operátor. Jedná se o kratší vyjádření podmínek a příkazů if/else.
Následující příklad ukazuje, jak používat ternární operátor.
Kód s příkazem if/else:
funkceotevírací doba(den) {
-li (den == NEDĚLE) {
vrátit se12;
}
jiný {
vrátit se9;
}
}Kód s ternárním operátorem:
funkceotevírací doba(den) {
vrátit se den == NEDĚLE? 12: 9;
}Dozvědět se o různé typy kondicionálů se zvláštním zaměřením na krátké kondicionály. Ty jsou v Reactu široce používány.
5. Doslovy šablony
Literály šablony používají k definování řetězce zpětná znaménka (``). Šablonové literály vám umožňují manipulovat s daty řetězců, aby byly dynamičtější. Tagované literály šablony umožňují provádět operace v rámci řetězce. Jedná se o kratší vyjádření podmínek a příkazů if/else.
Například:
nechat jméno = "Jane";nechat příjmení = "Srna";
nechat text = „Vítejte ${firstName}, ${lastName}!`; // Vítejte Jane Doe!
6. Operátoři šíření
Operátor Spread (...) zkopíruje hodnoty objektu nebo pole do jiného. Jeho syntaxe se skládá ze tří teček následovaných názvem proměnné. Například (...jméno). Slučuje vlastnosti dvou polí nebo objektů.
Následující příklad ukazuje, jak použít operátor spread ke kopírování hodnot jedné proměnné do druhé.
konst jména = ['Mary', 'Jane'];
konst členové skupiny = ['Fred', ...jména, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Operátor šíření můžete použít k řadě operací. Patří mezi ně kopírování obsahu pole, vkládání pole do jiného, přístup k vnořeným polím a předávání polí jako argumentů. Ke zpracování změn stavu v komponentách můžete použít operátor spread v ReactJS.
Proč se učit ReactJS?
ReactJS je populární z dobrého důvodu. Má krátkou křivku učení, je spolehlivý a rychle se vykresluje do DOM. Podporuje samostatné komponenty a má skvělé nástroje pro ladění.
ReactJS zahrnuje nové koncepty JavaScriptu z ECMAScript 6 (ES6). Osvojení si základních konceptů v JavaScriptu usnadní vývoj projektů v ReactJS.
Ke všemu má ReactJS skvělou komunitu, která neustále vydává nové aktualizace. Pokud se chcete naučit knihovnu JavaScript, ReactJS by byla skvělá volba. Rámec Next.js doplňuje omezení ReactJS. Kombinace těchto dvou dělá z ReactJS výkonnou front-end knihovnu.
