React.JS pre figuríny začiatočníkov, ktorí používajú knižnicu pri písaní obchodných robotov

Čo je React JS pre začiatočníkov, čo to je, návody, inštalácia, dokumentácia – ako nainštalovať a používať knižnicu React JS pri písaní obchodných robotov. V pracovných inzerátoch pre počítačových špecialistov často nájdete požiadavku, ktorá hovorí, že máte zručnosti v knižnici JavaScript. Áno, a znalosti Reactu očakávajú nielen od vývojárov softvéru, ale aj od programátorov, ktorí sa zaoberajú interným vývojom stránky, a nie externým dizajnom. Čo je to za knižnicu, aké možnosti dáva v práci a kde sa začína zoznamovať začiatočník? Poďme na to v tomto článku.

JavaScript knižnica – Reagovať: čo to je

React.JS je knižnica populárneho
programovacieho jazyka JavaScript , ktorú vytvorila online sociálna sieť Facebook s cieľom zlepšiť a zjednodušiť proces vývoja externého prostredia stránok a aplikácií – rozhrania, s ktorým používateľ komunikuje. Hlavnou črtou knižnice sú komponenty a stavy. Komponent je časť digitálnej sady, ktorá je zodpovedná za vzhľad určitej časti navrhovaného systému.

Poznámka! Takéto súčasti môžu byť vnorené.

Stav je súbor všetkých údajov o podrobnostiach rozhrania vrátane jeho reprezentatívneho vykresľovania. Na príkladoch podrobnejšie a názorne zistíme, čo je čo. Obrázok nižšie zobrazuje niektoré z veľkých komponentov – uverejňovanie príspevkov na online sociálnej sieti, sekciu so všeobecnými informáciami a zobrazovanie fotografií. Každá časť obsahuje menšie komponenty, ktorými sú komponenty. Napríklad publikácia obsahuje text, fotografie, meno používateľa, ktorý informácie publikuje atď. V časti s obrázkami sú jednotlivé obrázky a v časti so všeobecnými informáciami sú stručné informácie.
Každá z týchto zložiek (komponentov) má svoj stav. To znamená, že sekcia so všeobecnými informáciami bude na rôznych zariadeniach vyzerať inak, prvok „páči sa mi“ po stlačení zmení farbu a číslo zodpovedné za celkový počet označení páči sa mi; publikácia môže text skrátiť alebo odovzdať celý.

Tým je vyjadrená flexibilita React.JS – komponent rozhrania sa napíše raz a potom sa mu pridelia všetky možné stavy.

Prečo je potrebná knižnica React?

React.JS je jednou z možností, ako napísať kód JS alebo HTML vo vhodnom formáte, vytvoriť z neho kópie a urobiť ho vizuálnym. Komponenty sú tu napísané v špeciálnom systémovom jazyku – JSX, ktorý obsahuje prvky programovacieho jazyka JavaScript a štandardizovaného značkovacieho jazyka HTML.
Kód napísaný v JSX je dosť špecifický. Dôležité je aj to, že webový prehliadač nemusí rozumieť tomuto systémovému jazyku – do JS sa prenesie kód React.JS, ktorý bez problémov vníma akýkoľvek prehliadač. Za týmto účelom to, čo sa vytvorí v knižnici, prechádza cez špecializované kompilátory (jeden z najpopulárnejších je dnes Babel js), ktoré konvertujú kódy v menej známych programovacích jazykoch do reprezentácií JavaScript.
Spočiatku sa vám môže zdať, že systém používania je krajne nelogický, no po čase si naň zvyknete a pochopíte, prečo je mechanizmus práve takto navrhnutý. Knižnica JavaScript má množstvo silných výhod:

• systémový programovací jazyk je ľahšie rozpoznateľný ako známy JavaScript, a teda podpora kódu a odstraňovanie chýb v ňom zaberie niekoľkonásobne menej času (úmerne tomu sa zvýši rýchlosť písania nových kódov a programov);
• je tu zabudovaný pohodlný a praktický systém základných prvkov – opakujúce sa časti kódu, ktoré sa používajú v rôznych fázach písania a v rôznych programoch a tiež sa menia v závislosti od kontextu;
• každý základný prvok je podriadený iba svojmu stavu , preto je jednoduchšie opraviť nedostatky v kóde, ak sa v jeho práci v praxi náhle zistí chyba; nesprávne momenty vyplávajú na povrch: prvok, ktorý správne funguje, bude v tomto režime naďalej stabilne fungovať, pokiaľ sa v súvislosti s ním samozrejme nepoužije nesprávny stav.

Môžeme teda skonštatovať, že knižnica React.JS môže ušetriť veľa času, spresniť kód, usporiadať postupnosť v správnom poradí a znova použiť veľké bloky. Tieto výhody umožňujú znížiť náklady na proces vytvárania používateľských rozhraní, ako aj zrýchliť čas práve tohto procesu. So schopnosťou používať programovací jazyk JS a HTML je ľahké naučiť sa používať systém JSX – stačí pár dní na jeho zvládnutie.

Poznámka! Knižnicu je racionálne využívať pri práci s veľkými projektmi, kedy je potrebné písať veľké množstvo dynamických stránok. Stránka pre malé podniky nepotrebuje takéto zložitosti.

Reaguj základný kurz JS od A po Z: https://youtu.be/GNrdg3PzpJQ

Zoznámenie pre začiatočníkov: základné pojmy

Ahoj svet!

Pri vstupe na prvú stránku knižnice sa používateľovi zobrazí uvítací nadpis ako malý príklad – „Ahoj svet!“.

Základy systémového jazyka JSX

JSX je systémový programovací jazyk, rozšírenie známeho JavaScriptu. Obsahuje kombináciu dvoch jazykov – programovanie JA a štandardizovaný značkovací jazyk HTML. Vývojári ho používajú na úpravu konceptu tak, aby React presne ukázal, ako má vyzerať používateľské rozhranie. JSX vytvára „časti“ knižnice.

čo je JSX?

Knižnica React sa drží logiky, že podstata vykresľovania priamo súvisí s logikou používateľského rozhrania: ako sa spracovávajú udalosti, ako sa mení stav v určitom období a ako sa informácie pripravujú na prezentáciu. Knižnicu JS je možné používať bez jej systémového jazyka, no veľké množstvo vývojárov ju považuje za cennú pre jej prehľadnosť a konkrétnosť pri práci s používateľským rozhraním generovaným z kódu JavaScript. Okrem toho rozšírenie uľahčuje React generovanie neplatných momentov a upozornení na chyby.

Tvorba výrazov v systémovom jazyku

JSX vám umožňuje použiť v procese akékoľvek dobre napísané výrazy JavaScriptu v zložených zátvorkách.

JSX je tiež výraz Keď je zdrojový kód bajtkódovaný, akýkoľvek výraz JSX sa zmení na štandardné volanie funkcie JS, ktoré sa zameriava na kategóriu JavaScript. Z toho je možné pochopiť, že systémové rozšírenie oficiálneho programovacieho jazyka môže byť použité v manuáli if a na určité obdobia.

JSX is Objects Objekty reprezentované rozšírením sa nazývajú prvky React. Objasňujú výsledok, ktorý chce vývojár vidieť na displeji. Knižnica rozpoznáva tieto objekty a používa ich v procese generovania a udržiavania modelu objektu dokumentu.

Vykresľovanie detailov

Podrobnosti sú mnohé malé stavebné kamene, ktoré tvoria programy React.
Detaily sú obraz, ktorý chce vývojár vidieť na konci na monitore. V porovnaní s prvkami Document Object Model sú prvky knižnice jednoduché a nezaberajú veľa zdrojov. Prvky sú zložkami komponentov.

Komponenty a rekvizity

Komponenty umožňujú rozdeliť používateľské rozhranie na nezávislé časti, na ktorých je jednoduchšie pracovať samostatne. Dajú sa kombinovať a použiť viackrát. Funkčnosť komponentov je z veľkej časti podobná funkcionalite samotného programovacieho jazyka JavaScript. Berú vstupné informácie, ktoré sa nazývajú rekvizity, a vracajú prvky React, ktoré označujú vývojový model, ktorý chce vývojár vidieť na monitore.

Odrody komponentov: funkčné a trieda

Najjednoduchšie je označiť komponent knižnice ako funkciu.
Komponenty môžu byť reprezentované aj vo formáte triedy ES6.

Zaujímavé! Knižnica React definuje tieto dva druhy komponentov ako podobné.

rekvizity

Rekvizity sú nemenné objekty, ktoré sú len na čítanie. Preto by komponent nemal písať nič do svojich rekvizít, bez ohľadu na to, do akého druhu patrí.

Stav a životný cyklus

Po prvé, poďme zistiť, ako správne aplikovať štát v práci. O stave komponentov je potrebné vedieť tri dôležité veci:

1. Nemeňte stav priamo, použite metódu setState. Pamätajte, že jedinou oblasťou, kde môžete zmeniť stav priamo, je konštruktor.
2. Aktualizácie stavu nemusia byť synchrónne.
3. Tok informácií má jeden smer. Pri konštrukcii komponentov nikto z nich nevie, či je stav priradený inému komponentu. Nezáleží na tom, ako sa vytvoril ten alebo onen nezávislý funkčný prvok – pomocou funkčného alebo klasifikačného nástroja. Toto sa nazýva „downstream“ dátový tok. Stav je vždy definovaný pre nejaký prvok a štrukturálne asociácie tohto stavu môžu ovplyvniť iba časti, ktoré sú v hierarchickom poradí umiestnené „dole“.

Typicky sa štát označuje ako „lokálny“, „interný“ alebo skrytý. Je viditeľný iba pre samotný funkčný prvok a neviditeľný pre ostatné časti Reactu. V knižničných programoch je to, či je samostatný funkčný prvok obdarený určitým stavom alebo nie, vnútorným vývojom tejto časti, ktorý sa môže časom meniť. Je tiež zaujímavé, že v práci môžete kombinovať komponenty so stavom a bez neho.

Analýza udalostí

Proces analýzy udalostí v komponentoch React je podobný spracovaniu udalostí v prvkoch objektového modelu dokumentu. Existuje však niekoľko funkcií, ktoré ich navzájom odlišujú:

1. Udalosti v knižnici JavaScript sú pomenované iným štýlom ako štandardným.
2. Pomocou System Extended Programming Language vývojár odovzdá podprogram ako obsluhu udalosti namiesto reťazca.

Podmienené vykreslenie prvkov

Knižnica JavaScript umožňuje prelomiť logiku vývoja prvkov do nezávislých komponentov. Môžu byť zobrazené na všeobecné zobrazenie alebo skryté, v závislosti od toho, akým stavom sú momentálne vybavené. Podmienené vykresľovanie prvkov funguje na rovnakom princípe ako podmienené výrazy založené na programovacom jazyku JavaScript. Občas sa stane, že knižnica vyžaduje vysvetlenie, ako daný stav ovplyvňuje skrytie alebo vykreslenie niektorých prvkov. Tu je logickejšie použiť podmieneného pomocníka JS alebo výrazy podobné if.

Výmena komponentov

Prvky knižnice React možno pridať do premenných. Toto je praktické riešenie, keď nejaká podmienka naznačuje, či sa má nakresliť niektorá časť komponentu, alebo to nedáva zmysel, pričom zvyšok dielu zostáva nezmenený.

Zoznamy a kľúče

Táto časť obsahuje niekoľko komponentov:

1. Kreslenie viacerých prvkov . Používateľ môže vytvoriť sadu prvkov a vložiť ju do systémového programovacieho jazyka pomocou zložených zátvoriek.
2. Elementárny zoznam prvkov . Používatelia a vývojári často upravujú zoznamy priamo v komponente.

Keys

Kľúč v knižnici React JavaScript označuje špecializovaný nástroj, ktorý je potrebné zadať pri generovaní zoznamu komponentov. Kľúče pomáhajú knižnici JavaScript identifikovať, ktoré položky boli upravené, pridané alebo odstránené. Je dôležité ich označiť, aby React po určitom čase mohol korelovať komponenty štrukturálnych dát.

Formuláre

V knižnici JS fungujú prvky štandardizovaného značkovacieho jazyka trochu inak ako komponenty objektového modelu dokumentu, pretože prvky formulára majú spočiatku skrytý stav.

Spravované položky

V štandardizovanom značkovacom jazyku majú formuláre ako input , select , textarea tendenciu zachovať si svoj vlastný stav a aktualizovať ho, keď vývojár zadá nové informácie. Stav React.js vždy definuje hodnotu vstupných polí v riadenom prvku skladania. Hoci to naznačuje, že používateľ musí napísať o niečo viac, ako je pôvodný daný kód, teraz je možné túto hodnotu odovzdať aj iným častiam používateľského rozhrania.

Vzostup štátu

State lifting je štandardizovaná šablóna, ktorú by si mal každý vývojár uvedomiť a vedieť ju použiť v procese práce. Jeho použitie odstráni zložité a zvyčajne zbytočné vzorce riadenia stavu.

Prečo je tak potrebné kontrolovať vznik štátu?

Pozdvihnutie stavu na úroveň minulých zložiek pre tie časti, ktoré si to vyžadujú, je potrebné, aby sa na stave mohli podieľať všetky prvky. Stabilná úroveň stavu uľahčí jeho distribúciu medzi všetky zložky, ktoré sa naň spoliehajú.

Zloženie vs dedičstvo

React.js obsahuje silný kompozičný model, preto sa odporúča použiť proces vytvárania celku z častí namiesto dedenia na opätovné použitie kódu napísaného skôr medzi prvkami. Takže rekvizity a schopnosť vytvoriť jednu celú kompozíciu z komponentov poskytujú vývojárovi flexibilitu potrebnú na vytvorenie obalu a správania prvku špecifickým a bezpečným spôsobom.

Pripomienka! Komponenty môžu mať nesúvisiace rekvizity, vrátane základných častí, ktoré tvoria knižnice alebo funkcie.

V prípade, že potrebujete použiť funkciu look-free na prácu s komponentmi druhý alebo tretíkrát, vytiahnite ju do samostatného modulu JS. Presuňte ho do komponentu a použite vygenerovanú funkciu bez ďalšieho rozširovania. React alebo Vue alebo Angular, čo si vybrať: https://youtu.be/Nm8GpLCAgwk

Princípy React.js

Celá filozofia JavaScriptovej knižnice je ukrytá v React guide. Zdá sa, že je to dlhé a nie také dôležité, mnohí používatelia však tvrdia, že po prečítaní všetko zapadlo na miesto. Dokumentácia je dosť stará, ale stále má veľkú hodnotu a relevantnosť –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Funkcionalita knižnice React.js

Pomocou knižnice JavaScript dostane používateľ možnosť venovať všetku svoju pozornosť priamo procesu vývoja používateľského rozhrania a komponentom aplikácie, najmenej ho však rozptyľuje tvorba a prípadné nedostatky písaného kódu. Knižnica umožňuje rýchlejšie vyvíjať programy, uľahčuje konfiguráciu a úpravu komponentov a procesu celého projektu ako celku. React.js teda obsahuje prvky zodpovedné za komunikáciu v globálnej sieti, UI, kontrolu stavu programu a schopnosť riešiť ďalšie zložité problémy. Knižnica má tiež nasledujúce funkčné vlastnosti:

1. Praktickosť . React.js je k dispozícii v zmenšenom formáte. Tento kompaktný balík nie je potrebné jasne konfigurovať. Už obsahuje funkciu rozdelenia kódu, ktorá skracuje čas potrebný na otvorenie verzie stránky v prehliadači, pretože táto možnosť zabraňuje súčasnému vykresľovaniu komponentov.
2. Napumpovaný ekosystém a súlad . V knižnici je k dispozícii veľké množstvo nástrojov podporovaných inými stránkami, čo umožňuje používateľovi vyvíjať nové komplexné programy na akýkoľvek účel.
3. Plná funkčnosť . Hlavnou výhodou JavaScriptovej knižnice je, že všetky nové verzie platformy spĺňajú požiadavky tých starých, takže môžete používať starú aj aktualizovanú verziu, všetky sú podporované a relevantné dodnes. Predtým vydané verzie sa po najnovších aktualizáciách nestanú zastarané.

Praktické využitie

Na hlavnej stránke knižnice je v návode pre používateľov niekoľko názorných príkladov využitia Reactu v praxi. Môžete ich manuálne opraviť a pokúsiť sa ich spustiť. Aj keď ste nový používateľ a nerozumiete podstate a logike knižnice, upravte si kód podľa seba a uvidíte výsledok.

Praktická aplikácia Reactu pri písaní obchodných robotov v JavaScripte

Je dôležité si uvedomiť, že vývojár neprogramuje JS, ale píše skripty (skripty). preto môže vývojár pomocou knižnice napísať kód pre následného obchodného robota používaného na obchodné účely a tiež pokračovať v navrhovaní jeho vzhľadu na základe tejto platformy. Obchodný robot na obchodovanie je v skutočnosti tiež aplikácia, z ktorých sa veľké množstvo vyvíja pomocou React.js. Niektoré funkcie a vnútorná časť robota však bude potrebné vykonať na iných stránkach, ktoré poskytujú nástroje vhodné na to.

GitHub a React.js

GitHub je platforma, ktorá hostí všetky verzie projektov. Používateľ si pripojí hosting, prejde registračnou procedúrou na oficiálnej webovej stránke GitHub a následne vytvorí online úložisko, kam prenesie všetky súbory z Git.
Git je dnes najpopulárnejšia a najrelevantnejšia služba správy verzií projektu a GitHub je vzdialené úložisko kódu.

Referencia! Prístup k úpravám a sťahovaniu súborov majú iba používatelia, ktorí dostali príslušný odkaz s povolením.

Dokumentácia

Všetky návody a aktuálne materiály týkajúce sa knižnice JavaScript sú aktuálne s najnovšou aktualizáciou. Vývojári tiež zostavujú a uverejňujú na všeobecné čítanie staré verzie dokumentácie uverejnené na samostatnej stránke knižnice. Preto bude pre začiatočníkov jednoduchšie zvládnuť zručnosti správy stránok: starý aj nový materiál – všetko je tu, prístup je pre každého bezplatný.

Poznámka! Nezabudnite si prečítať návody. Aspoň sa pozrite – väčšina z toho, čo sa zdalo nepochopiteľné, už zapadne.

Knižnica React je dnes populárnou a relevantnou platformou. Jeho všestrannosť umožňuje vývojárom robiť projekty lepšej kvality a za kratší čas. Okrem toho znalosť platformy a zručnosti na jej používanie robí špecialistu žiadanejším na trhu práce.