React.JS kezdő próbababák számára, akik a könyvtárat használják kereskedési robotok írásakor

Mi az a React JS kezdő bábuk számára, mi az, oktatóanyagok, telepítés, dokumentáció – hogyan kell telepíteni és használni a React JS könyvtárat kereskedési robotok írásakor. A számítógépes szakembereknek szóló álláshirdetésekben gyakran találhat olyan követelményt, amely szerint rendelkeznie kell a JavaScript-könyvtárral kapcsolatos ismeretekkel. Igen, és nem csak a szoftverfejlesztőktől várják a React ismereteit, hanem az oldal belső fejlesztésével foglalkozó programozóktól is, nem pedig külső tervezéstől. Milyen könyvtár ez, milyen lehetőségeket ad a munkában, és hol kezdi az ismerkedést egy kezdő? Találjuk ki ebben a cikkben.

JavaScript könyvtár – React: mi ez

A React.JS a népszerű
JavaScript programozási nyelv könyvtára , amelyet a Facebook online közösségi hálózat hoz létre, hogy javítsa és egyszerűsítse a webhelyek és alkalmazások külső héjának fejlesztési folyamatát – azt a felületet, amellyel a felhasználó interakcióba lép. A könyvtár fő jellemzője az összetevők és állapotok. Az alkatrész egy digitális készlet része, amely a tervezett rendszer egy bizonyos részének megjelenéséért felelős.

Jegyzet! Az ilyen alkatrészek egymásba ágyazhatók.

Az állapot egy interfész részleteivel kapcsolatos összes adat gyűjteménye, beleértve annak reprezentációs megjelenítését is. Példák segítségével részletesebben és világosan megtudjuk, mi az, ami. Az alábbi képen néhány nagy összetevő látható – közzététel egy online közösségi hálózaton, egy rész általános információkkal és fényképek megjelenítése. Mindegyik rész kisebb alkatrészeket tartalmaz, amelyek az alkatrészek. Például egy kiadvány szöveget, fényképeket, az információt közzétevő felhasználó nevét stb. tartalmaz. A kép rész egyes képeket, az általános információs rész pedig rövid információkat tartalmaz.
Ezen összetevők (komponensek) mindegyikének van állapota. Vagyis az általános információkat tartalmazó rész eltérően fog kinézni a különböző eszközökön, a „like” elem színe megváltozik, amikor megnyomják, és a szám, amely a lájkok teljes számáért felelős; a kiadvány pedig lerövidítheti a szöveget, vagy teljes egészében továbbíthatja.

Így kifejeződik a React.JS rugalmassága – az interfész komponens egyszer íródik, és utána minden lehetséges állapotot megad.

Miért van szükség a React könyvtárra?

A React.JS az egyik lehetséges lehetőség a JS vagy HTML kód kényelmes formátumban történő megírására, másolatok készítésére és vizuális megjelenítésére. Az itt található komponensek egy speciális rendszernyelven – JSX – vannak írva, amely tartalmazza a JavaScript programozási nyelv és a szabványos HTML jelölőnyelv elemeit.
A JSX-ben írt kód meglehetősen specifikus. Az is fontos, hogy a webböngészőnek ne kelljen értenie ezt a rendszernyelvet – a React.JS kód átkerül a JS-be, amit minden böngésző probléma nélkül észlel. Ehhez a könyvtárban létrehozottakat speciális fordítókon keresztül vezetik át (ma az egyik legnépszerűbb a Babel js), amelyek kevésbé ismert programozási nyelvek kódjait alakítják át JavaScript-reprezentációkká.
Elsőre úgy tűnhet, hogy a használati rendszer rendkívül logikátlan, de egy idő után az ember megszokja, és rájön, hogy miért van így kialakítva a mechanizmus. A JavaScript-könyvtárnak számos erős előnye van:

• a rendszerprogramozási nyelv könnyebben felismerhető, mint a jól ismert JavaScript, és ennek következtében a kód támogatása és a rajta lévő hibák kiküszöbölése többszörösen rövidebb időbe telik (az új kódok és programok írási sebessége ennek megfelelően nő);
• az alkotóelemek kényelmes és praktikus rendszere van beépítve – a kód ismétlődő részei, amelyeket az írás különböző szakaszaiban és különböző programokban használnak, és a kontextustól függően is változnak;
• minden alkotóelem csak az állapotának van alárendelve , ezért könnyebb a kód hiányosságait kijavítani, ha a gyakorlatban hirtelen hibát találnak a működésében; hibás momentumok úsznak a felszínre: egy megfelelően működő elem ebben a módban továbbra is stabilan működik, kivéve persze, ha rossz állapotot használunk vele kapcsolatban.

Így arra a következtetésre juthatunk, hogy a React.JS könyvtár lehetővé teszi számottevő időmegtakarítást, a kód pontosabbá tételét, a sorrend megfelelő sorrendbe rendezését és a nagy blokkok ismételt használatát. Ezek az előnyök lehetővé teszik a felhasználói felületek létrehozásának költségeinek csökkentését, valamint ennek a folyamatnak a felgyorsítását. A JS és HTML programozási nyelv használatához szükséges készségek birtokában a JSX rendszer használatának elsajátítása egyszerű – mindössze néhány nap alatt elsajátíthatja.

Jegyzet! Ésszerű a könyvtár használata nagy projektekkel végzett munka során, amikor nagyszámú dinamikus oldalt kell írni. Egy kisvállalkozási webhelynek nincs szüksége ilyen bonyolultságra.

React JS alaptanfolyam A-tól Z-ig: https://youtu.be/GNrdg3PzpJQ

Ismerkedés kezdőknek: alapfogalmak

Helló Világ!

Amikor eléri a könyvtár első oldalát, a felhasználó egy üdvözlő fejlécet lát kis példaként – „Hello world!”.

A JSX rendszernyelv alapjai

A JSX egy rendszerprogramozási nyelv, a jól ismert JavaScript kiterjesztése. Két nyelv kombinációját tartalmazza – a JA programozást és a szabványos HTML jelölőnyelvet. A fejlesztők ezzel állítják be a koncepciót, hogy a React pontosan hogyan nézzen ki a felhasználói felületnek. A JSX létrehozza a könyvtár “részeit”.

Mi az a JSX?

A React könyvtár betartja azt a logikát, hogy a renderelés lényege közvetlenül összefügg a felhasználói felület logikájával: az események feldolgozása, állapotváltozások egy adott periódusban, illetve az információk megjelenítésre való előkészítése. A JS-könyvtár a rendszernyelve nélkül is használható, de a fejlesztők nagy része értékesnek tartja egyértelműsége és konkrétsága miatt, ha JavaScript-kódból generált felhasználói felülettel dolgozik. Ezenkívül a bővítmény megkönnyíti a React számára az érvénytelen pillanatokról és hibákról szóló értesítések generálását.

Kifejezések kialakítása a rendszernyelvben

A JSX lehetővé teszi, hogy bármilyen jól megírt JavaScript-kifejezést használjon a kapcsos zárójelekben egy folyamatban.

A JSX egyben kifejezés is A forráskód bájtkódolása után bármely JSX kifejezés szabványos JS függvényhívássá alakul, amely a JavaScript kategóriát célozza meg. Ebből érthető, hogy a hivatalos programozási nyelv rendszerbővítése az if kézikönyven belül és időszakonként használható.

A JSX objektumok A kiterjesztés által képviselt objektumokat React elemeknek nevezzük. Tisztázzák az eredményt, amelyet a fejlesztő a kijelzőn szeretne látni. A könyvtár felismeri ezeket az objektumokat, és felhasználja őket a Dokumentumobjektum-modell létrehozása és karbantartása során.

Részletek megjelenítése

A részletek a sok kis építőelem, amelyek a React programokat alkotják.
A részletek az a kép, amelyet a fejlesztő a végén látni szeretne a monitoron. A Document Object Model elemeihez képest a könyvtári elemek egyszerűek és nem igényelnek sok erőforrást. Az elemek az összetevők alkotóelemei.

Alkatrészek és kellékek

Az összetevők lehetővé teszik a felhasználói felület független részekre osztását, amelyeken könnyebben lehet külön dolgozni. Kombinálhatók és többször használhatók. A komponensek funkcionalitása többnyire hasonló magának a JavaScript programozási nyelvnek a funkcióihoz. Bemeneti információkat vesznek, amelyeket kellékeknek neveznek, és visszaadják a React elemeket, amelyek jelzik azt a fejlesztési modellt, amelyet a fejlesztő látni szeretne a monitoron.

Az összetevők változatai: funkcionális és osztály

A legegyszerűbb egy függvénytári összetevőre hivatkozni.
A komponensek ES6 osztályformátumban is ábrázolhatók.

Érdekes! A React könyvtár ezt a két komponenst hasonlóként határozza meg.

kellékek

A kellékek megváltoztathatatlan objektumok, amelyek csak olvashatók. Ezért egy komponens ne írjon semmit a kellékeihez, függetlenül attól, hogy milyen fajtához tartozik.

Állapot és életciklus

Először is nézzük meg, hogyan kell megfelelően alkalmazni az állapotot a munkahelyen. Három fontos dolgot kell tudni az alkatrész állapotáról:

1. Ne módosítsa közvetlenül az állapotot, használja a setState metódust. Ne feledje, hogy az egyetlen terület, ahol közvetlenül módosíthatja az állapotot, az a konstruktor.
2. Előfordulhat, hogy az állapotfrissítések nem szinkronban vannak.
3. Az információáramlásnak egy iránya van. A komponens felépítésében egyikük sem tudja, hogy az állapot hozzá van-e rendelve egy másik komponenshez. Nem mindegy, hogy ezt vagy azt a független funkcionális elemet hogyan alakították ki – funkcionális vagy osztályozó eszközzel. Ezt “downstream” adatáramlásnak nevezik. Valamely elemhez mindig definiálunk egy állapotot, és ennek az állapotnak a szerkezeti asszociációi csak a hierarchikus sorrendben „lejjebb” elhelyezkedő részekre vonatkozhatnak.

Az állapotot általában „helyi”, „belső” vagy rejtettnek nevezik. Csak maga a funkcionális elem látja, a React többi része pedig láthatatlan. A könyvtári programokban az, hogy egy független funkcionális elem fel van-e ruházva egy adott állapottal vagy sem, az adott rész belső fejlesztése, amely idővel változhat. Az is érdekes, hogy a munkában kombinálhatók állapotú és állapot nélküli komponensek.

Eseményelemzés

Az események elemzésének folyamata a React összetevőkben hasonló a dokumentumobjektum-modell elemekben lévő események kezeléséhez. Vannak azonban olyan jellemzők, amelyek megkülönböztetik őket egymástól:

1. A JavaScript-könyvtárban lévő események elnevezése a szokásostól eltérő stílusban történik.
2. A System Extended Programming Language használatával a fejlesztő egy szubrutint ad át eseménykezelőként karakterlánc helyett.

Elemek feltételes megjelenítése

A JavaScript-könyvtár lehetővé teszi az elemek fejlesztési logikáját független komponensekre bontani. Megjeleníthetők általános megjelenítésre vagy rejtettek, attól függően, hogy éppen milyen állapottal vannak felruházva. Az elemek feltételes megjelenítése ugyanazon az elven működik, mint a JavaScript programozási nyelven alapuló feltételes kifejezések. Néha megesik, hogy a könyvtár magyarázatot igényel, hogy az állapot hogyan befolyásolja egyes elemek elrejtését vagy megjelenítését. Itt logikusabb egy feltételes JS segítő vagy az if-hez hasonló kifejezések használata.

Alkatrészek cseréje

React könyvtári elemeket lehet hozzáadni a változókhoz. Ez egy praktikus megoldás, ha valamilyen feltétel jelzi, hogy a komponens egy részét meg kell-e rajzolni, vagy nincs értelme, miközben a többi rész változatlan marad.

Listák és kulcsok

Ez a rész több összetevőt tartalmaz:

1. Több elem rajzolása . A felhasználó összeállíthat egy elemkészletet, és beágyazhatja azt a rendszer programozási nyelvébe kapcsos zárójelek segítségével.
2. Elemi elemek listája . A felhasználók és a fejlesztők gyakran közvetlenül az alkotórészeken belül módosítják a listákat.

Kulcsok

A React JavaScript könyvtárban lévő kulcs egy speciális eszközt jelöl, amelyet meg kell adni az összetevők listájának létrehozásakor. A kulcsok segítenek a JavaScript-könyvtárnak azonosítani, hogy mely elemeket módosították, hozzáadták vagy eltávolították. Fontos ezek megjelölése, hogy a React bizonyos idő elteltével korrelálni tudja a szerkezeti adatok összetevőit.

Űrlapok

A JS-könyvtárban a szabványosított jelölőnyelvi elemek egy kicsit másképpen működnek, mint a dokumentumobjektum-modell összetevői, mivel az űrlapelemek kezdetben rejtett állapotúak.

Kezelt elemek

A szabványosított jelölőnyelvben az olyan űrlapok, mint az input , select , textarea, hajlamosak önmagukban kezelni állapotukat, és frissítik azt, amikor a fejlesztő új információkat ad meg. A React.js állapot mindig meghatározza a beviteli mezők értékét a kezelt alkotóelemekben. Bár ez azt jelzi, hogy a felhasználónak valamivel többet kell írnia, mint az eredeti megadott kód, most már lehetőség van a felhasználói felület más részeire is átadni ezt az értéket.

Az állam felemelkedése

Az állami emelés egy szabványosított sablon, amelyet minden fejlesztőnek ismernie kell, és alkalmaznia kell tudnia a munkafolyamat során. Használata kiküszöböli az összetett és általában haszontalan állapotkezelési mintákat.

Miért szükséges az állam felemelkedésének ellenőrzése?

Az állapot emelése a múlt komponensek szintjére azon részeknél, amelyek ezt igénylik, szükséges, hogy minden elem részt vehessen az állapotban. Az állapot stabil szintje megkönnyíti annak elosztását az összes, rá támaszkodó összetevő között.

Összetétel vs öröklődés

A React.js erős kompozíciós modellt tartalmaz, ezért ajánlott az öröklés helyett az egésznek a részekből történő felépítését használni, hogy a korábban megírt kódot újra felhasználhassa az elemek között. Így a kellékek és az a képesség, hogy az alkatrészekből egyetlen kompozíciót hozzon létre, biztosítja a fejlesztő számára azt a rugalmasságot, amely szükséges ahhoz, hogy az elem héját és viselkedését sajátos és biztonságos módon hozza létre.

Emlékeztető! Az összetevők tartalmazhatnak nem kapcsolódó kellékeket, beleértve a könyvtárakat vagy funkciókat alkotó elemi részeket is.

Abban az esetben, ha másodszor vagy harmadszor is kitekintés nélküli funkciót kell használnia az összetevőkkel való munkavégzéshez, húzza ki egy külön JS-modulba. Helyezze át egy komponensbe, és használja a generált függvényt további bővítés nélkül. React vagy Vue vagy Angular, mit válasszunk: https://youtu.be/Nm8GpLCAgwk

React.js alapelvek

A JavaScript-könyvtár teljes filozófiája el van rejtve a React útmutatóban. Úgy tűnik, hogy ez hosszú és nem olyan nagy jelentőségű, azonban sok felhasználó azt állítja, hogy elolvasása után minden a helyére került. A dokumentáció meglehetősen régi, de még mindig nagy értékű és releváns –
https://ru.reactjs.org/docs/thinking-in-react.html . A React js oktatóanyaga https://ru.reactjs.org/tutorial/tutorial.html

A React.js könyvtár funkcionalitása

A JavaScript könyvtár használatával a felhasználónak lehetősége nyílik arra, hogy minden figyelmét közvetlenül a felhasználói felület fejlesztési folyamatára és az alkalmazás összetevőire fordítsa, legkevésbé pedig az írott kód kialakulása és esetleges hiányosságai zavarják meg. A könyvtár lehetővé teszi a programok gyorsabb fejlesztését, megkönnyíti a komponensek és a teljes projekt folyamatának konfigurálását és szerkesztését. Így a React.js tartalmaz olyan elemeket, amelyek felelősek a globális hálózaton belüli kommunikációért, a felhasználói felületért, a programállapot-vezérlésért és egyéb összetett problémák megoldásáért. A könyvtár a következő funkcionális jellemzőkkel is rendelkezik:

1. Praktikusság . A React.js kicsinyített formátumban érhető el. Ezt a kompakt csomagot nem kell egyértelműen konfigurálni. Már tartalmaz egy kódfelosztási funkciót, amely csökkenti a webhely böngésző verziójának megnyitásához szükséges időt, mivel ez az opció megakadályozza, hogy az összetevők egyidejűleg jelenjenek meg.
2. Pumpált ökoszisztéma és megfelelés . A könyvtárban számos olyan eszköz áll rendelkezésre, amelyet más oldalak támogatnak, ami lehetővé teszi a felhasználó számára, hogy bármilyen célra új, összetett programokat fejleszthessen.
3. Teljes funkcionalitás . A JavaScript könyvtár legfőbb előnye, hogy a platform minden új verziója megfelel a régiek követelményeinek, így a régi és a frissített verzió is használható, mindegyik támogatott és a mai napig aktuális. A korábban kiadott verziók nem avulnak el a legújabb frissítések után.

Gyakorlati használat

A könyvtár főoldalán, a felhasználóknak szóló útmutatóban több szemléltető példa található a React gyakorlati használatára. Ezeket manuálisan javíthatja, és megpróbálhatja futtatni. Még ha új felhasználó vagy, és nem érted a könyvtár lényegét és logikáját, állítsa be a kódot ízlése szerint, és nézze meg az eredményt.

A React gyakorlati alkalmazása kereskedési robotok írásakor JavaScriptben

Fontos felismerni, hogy a fejlesztő nem JS-t programoz, hanem szkripteket (scripteket) ír. így a könyvtár segítségével a fejlesztő kódot írhat egy későbbi kereskedési céllal használt kereskedési robothoz, és ezen a platformon folytathatja a megjelenésének kialakítását. Valójában a kereskedésre szánt kereskedési robot is egy alkalmazás, amelyből nagy számban készülnek a React.js segítségével. Néhány funkciót és a bot belső részét azonban továbbra is el kell végezni más, erre alkalmas eszközöket biztosító oldalakon.

GitHub és React.js

A GitHub egy olyan platform, amely a projektek összes verzióját tárolja. A felhasználó csatlakozik a tárhelyhez, végigmegy a regisztrációs eljáráson a hivatalos GitHub webhelyen, majd létrehoz egy online adattárat, ahová az összes fájlt átviszi a Gitből.
A Git ma a legnépszerűbb és legrelevánsabb projektverzióvezérlő szolgáltatás, a GitHub pedig egy távoli kódtár.

Referencia! Csak azok a felhasználók férhetnek hozzá a fájlok szerkesztéséhez és letöltéséhez, akik megkapták a megfelelő hivatkozást engedéllyel.

Dokumentáció

A JavaScript-könyvtárral kapcsolatos összes oktatóanyag és naprakész anyag naprakész a legújabb frissítéssel. A fejlesztők összeállítják és általános olvasmány céljából közzéteszik a dokumentáció régi verzióit is, amelyeket a könyvtár külön oldalán tesznek közzé. Ezért a kezdők számára könnyebb lesz elsajátítani a webhelykezelés készségeit: mind a régi, mind az új anyagokat – itt minden megtalálható, a hozzáférés mindenki számára ingyenes.

Jegyzet! Ne felejtse el elolvasni a kézikönyveket. Legalább vessen egy pillantást – máris a legtöbb érthetetlennek tűnő dolog a helyére kerül.

A React könyvtár ma népszerű és releváns platform. Sokoldalúsága lehetővé teszi a fejlesztők számára, hogy jobb minőségű projekteket készítsenek rövidebb idő alatt. Ezen túlmenően a platform ismerete és a használatához szükséges készségek birtokában a szakember keresettebbé válik a munkaerőpiacon.