React.JS algajatele mannekeenidele, kes kasutavad kauplemisrobotite kirjutamisel raamatukogu

Mis on React JS algajatele mannekeenidele, mis see on, õpetused, installimine, dokumentatsioon – kuidas installida ja kasutada React JS teeki kauplemisrobotite kirjutamisel. Sageli võib arvutispetsialistide töökuulutustest leida nõude, mis ütleb, et sul on JavaScripti teegis oskused. Jah, ja nad ootavad Reacti teadmisi mitte ainult tarkvaraarendajatelt, vaid ka programmeerijatelt, kes tegelevad saidi sisemise arendamisega, mitte välise disainiga. Mis raamatukogu see on, milliseid võimalusi see töös annab ja kust alustaja tutvumist alustab? Selgitame selle välja selles artiklis.

JavaScripti teek – Reageerimine: mis see on

React.JS on populaarse
JavaScripti programmeerimiskeele teek, mille moodustab veebipõhine sotsiaalne võrgustik Facebook, et täiustada ja lihtsustada saitide ja rakenduste välise kesta – liidese, millega kasutaja suhtleb – arendamise protsessi. Teegi põhijooneks on komponendid ja olekud. Komponent on digitaalse komplekti osa, mis vastutab kavandatava süsteemi teatud osa väljanägemise eest.

Märge! Selliseid komponente saab pesastada.

Olek on kõigi andmete kogum liidese üksikasjade, sealhulgas selle esitusliku renderdamise kohta. Näidete abil saame täpsemalt ja selgemalt teada, mis on mis. Alloleval pildil on näha mõned suuremad komponendid – postitamine suhtlusvõrgustikku, üldteabe jaotis ja fotode näitamine. Iga osa sisaldab väiksemaid komponente, mis on komponendid. Näiteks sisaldab väljaanne teksti, fotosid, teabe avaldanud kasutaja nime jne. Piltide jaotis sisaldab üksikuid pilte ja üldteabe jaotis sisaldab lühiteavet.
Igal neist komponentidest (komponentidest) on olek. See tähendab, et üldteabe jaotis näeb erinevates seadmetes erinev välja, element “meeldib” muudab vajutamisel värvi ja meeldimiste koguarvu eest vastutav arv; väljaanne võib omakorda teksti lühendada või edastada täies mahus.

Seega väljendub React.JS paindlikkus – liidese komponent kirjutatakse ühe korra ja pärast seda antakse talle kõik võimalikud olekud.

Miks on Reacti raamatukogu vaja?

React.JS on üks võimalikest võimalustest JS- või HTML-koodi mugavas vormingus kirjutamiseks, sellest koopiate moodustamiseks ja visuaalseks muutmiseks. Siin olevad komponendid on kirjutatud spetsiaalses süsteemikeeles – JSX, mis sisaldab JavaScripti programmeerimiskeele ja standardiseeritud HTML-i märgistuskeele elemente.
JSX-is kirjutatud kood on üsna spetsiifiline. Samuti on oluline, et veebilehitseja ei pea sellest süsteemikeelest aru saama – React.JS kood kantakse JS-i, mida iga brauser probleemideta tajub. Selleks suunatakse teegis loodu läbi spetsiaalsete kompilaatorite (tänapäeval on üks populaarsemaid Babel js), mis teisendavad vähemtuntud programmeerimiskeelte koodid JavaScripti esitusteks.
Esialgu võib tunduda, et kasutussüsteem on äärmiselt ebaloogiline, kuid mõne aja pärast harjud ära ja saad aru, miks mehhanism just nii on loodud. JavaScripti teegil on mitmeid tugevaid eeliseid:

• süsteemi programmeerimiskeelt on lihtsam ära tunda kui tuntud JavaScripti ja järelikult kulub koodi toetamiseks ja vigade kõrvaldamiseks mitu korda vähem aega (vastavalt suureneb uute koodide ja programmide kirjutamise kiirus);
• siia on sisse ehitatud mugav ja praktiline koostisosade süsteem – kordades koodi osi, mida kasutatakse kirjutamise erinevates etappides ja erinevates programmides ning mis muutuvad ka sõltuvalt kontekstist;
• iga koostisosa element on allutatud ainult oma olekule , seetõttu on koodis esinevaid puudujääke lihtsam parandada, kui selle töös praktikas äkki avastatakse viga; valed momendid hõljuvad pinnale: korralikult funktsioneeriv element töötab selles režiimis stabiilselt edasi, välja arvatud juhul, kui sellega seoses kasutatakse muidugi valet olekut.

Seega võime järeldada, et React.JS teek võib säästa palju aega, muuta koodi täpsemaks, korraldada jada õiges järjekorras ja kasutada taas suuri plokke. Need eelised võimaldavad vähendada kasutajaliideste loomise protsessi kulusid ja kiirendada selle protsessi aega. Omades JS-i ja HTML-i programmeerimiskeele kasutamise oskusi, on süsteemi JSX kasutamise õppimine lihtne – selle valdamiseks kulub vaid paar päeva.

Märge! Ratsionaalne on raamatukogu kasutamine suurte projektidega töötamisel, kui on vaja kirjutada suur hulk dünaamilisi lehti. Väikeettevõtte sait selliseid keerukusi ei vaja.

Reageerige JS-i põhikursus A-st Z-ni: https://youtu.be/GNrdg3PzpJQ

Tutvumine algajatele: põhimõisted

Tere, Maailm!

Raamatukogu esimesele lehele sisenedes näeb kasutaja väikese näitena tervituspealkirja – “Tere maailm!”.

JSX süsteemikeele põhialused

JSX on süsteemi programmeerimiskeel, tuntud JavaScripti laiendus. See sisaldab kahe keele kombinatsiooni – JA programmeerimist ja standardiseeritud HTML-i märgistuskeelt. Arendajad kasutavad seda kontseptsiooni kohandamiseks, et näidata Reactile täpselt, kuidas kasutajaliides peaks välja nägema. JSX loob teegi “osad”.

Mis on JSX?

Teek React järgib loogikat, et renderdamise olemus on otseselt seotud kasutajaliidese loogikaga: kuidas sündmusi töödeldakse, kuidas olek teatud perioodi jooksul muutub ja kuidas infot esitamiseks ette valmistatakse. JS-i teeki saab kasutada ka ilma selle süsteemikeeleta, kuid suur osa arendajatest peab seda väärtuslikuks selle selguse ja konkreetsuse tõttu JavaScripti koodist genereeritud kasutajaliidesega töötamisel. Lisaks muudab laiendus Reactil kehtetu hetke ja veateadete genereerimise lihtsamaks.

Avaldiste moodustamine süsteemikeeles

JSX võimaldab teil protsessis kasutada mis tahes hästi kirjutatud JavaScripti väljendeid lokkis sulgudes.

JSX on ka avaldis Kui lähtekood on baitkodeeritud, muutub mis tahes JSX-i avaldis standardseks JS-i funktsioonikutseks, mis sihib JavaScripti kategooriat. Sellest võib aru saada, et ametliku programmeerimiskeele süsteemilaiendust saab kasutada if manuaali sees ja perioodiliselt.

JSX on objektid Laiendiga esindatud objekte nimetatakse React-elementideks. Need selgitavad tulemust, mida arendaja ekraanil näha soovib. Teek tunneb need objektid ära ja kasutab neid dokumendiobjekti mudeli loomise ja hooldamise protsessis.

Detailide renderdamine

Üksikasjad on paljud väikesed ehitusplokid, mis moodustavad Reacti programmid.
Üksikasjad on pilt, mida arendaja soovib lõpuks monitoril näha. Võrreldes dokumendiobjekti mudeli elementidega on teegi elemendid lihtsad ega võta palju ressursse. Elemendid on komponentide koostisosad.

Komponendid ja rekvisiidid

Komponendid võimaldavad jagada kasutajaliidese iseseisvateks osadeks, mille kallal on lihtsam eraldi töötada. Neid saab kombineerida ja kasutada mitu korda. Enamasti sarnaneb komponentide funktsionaalsus JavaScripti programmeerimiskeele enda funktsionaalsusega. Nad võtavad sisendteavet, mida nimetatakse rekvisiidiks, ja tagastavad Reacti elemendid, mis näitavad arendusmudelit, mida arendaja soovib monitoril näha.

Komponentide sordid: funktsionaalne ja klass

Lihtsaim on viidata teegi komponendile kui funktsioonile.
Komponente saab esitada ka ES6 klassi formaadis.

Huvitav! Teek React määratleb need kahte tüüpi komponendid sarnastena.

rekvisiidid

Rekvisiidid on muutumatud objektid, mis on kirjutuskaitstud. Seetõttu ei tohiks komponent oma rekvisiitidele midagi kirjutada, olenemata sellest, millisesse liiki see kuulub.

Seisund ja elutsükkel

Esiteks mõelgem välja, kuidas olekut tööl õigesti rakendada. Komponentide oleku kohta on vaja teada kolme olulist asja:

1. Ärge muutke olekut otse, kasutage meetodit setState. Pidage meeles, et ainus ala, kus saate olekut otse muuta, on konstruktor.
2. Olekuvärskendused ei pruugi olla sünkroonsed.
3. Info liikumisel on üks suund. Komponentide ehitamisel ei tea ükski neist, kas olek on mõnele teisele komponendile määratud. Pole tähtis, kuidas see või teine ​​sõltumatu funktsionaalne element moodustati – funktsionaalse või klassifitseerimisvahendi abil. Seda nimetatakse “allavoolu” andmevooguks. Olek on alati määratletud mõne elemendi jaoks ja selle oleku struktuurilised seosed võivad mõjutada ainult neid osi, mis asuvad hierarhilises järjekorras “all”.

Tavaliselt nimetatakse osariiki “kohalikuks”, “sisemiseks” või peidetud. See on nähtav ainult funktsionaalsele elemendile endale ja nähtamatu teistele Reacti osadele. Raamatukoguprogrammides on see, kas iseseisev funktsionaalne element on teatud olekuga varustatud või mitte, selle osa sisemine areng, mis võib aja jooksul muutuda. Huvitav on ka see, et töös saab kombineerida komponente olekuga ja ilma.

Sündmuse analüüs

Sündmuste parsimise protsess Reacti komponentides on sarnane sündmuste käsitlemisega dokumendiobjekti mudeli elementides. Siiski on mitmeid omadusi, mis neid üksteisest eristavad:

1. JavaScripti teegis olevaid sündmusi nimetatakse tavapärasest erinevas stiilis.
2. Süsteemi laiendatud programmeerimiskeelt kasutades edastab arendaja stringi asemel sündmuste töötlejana alamprogrammi.

Elementide tingimuslik renderdamine

JavaScripti teek võimaldab murda elementide arendamise loogika iseseisvateks komponentideks. Neid saab kuvada üldiseks kuvamiseks või peidetud, olenevalt sellest, mis olekuga need hetkel on. Elementide tingimuslik renderdamine töötab samal põhimõttel kui JavaScripti programmeerimiskeelel põhinevad tingimusavaldised. Mõnikord juhtub, et raamatukogu nõuab selgitust, kuidas olek mõjutab mõne elemendi peitmist või renderdamist. Siin on loogilisem kasutada tingimuslikku JS-i abimeest või if-ga sarnaseid avaldisi.

Komponentide vahetamine

Muutujatele saab lisada React teegi elemente. See on praktiline lahendus, kui mõni tingimus näitab, kas mõni komponendi osa tuleks joonistada või pole sellel mõtet, samas kui ülejäänud osa jääb muutumatuks.

Loendid ja võtmed

See jaotis sisaldab mitmeid komponente:

1. Mitme elemendi joonistamine . Kasutaja saab moodustada elementide komplekti ja manustada selle süsteemi programmeerimiskeelde, kasutades lokkis sulgusid.
2. Elementaarne loetelu . Sageli kohandavad kasutajad ja arendajad loendeid otse komponendi sees.

Võtmed

Võti React JavaScripti teegis tähistab spetsiaalset tööriista, mis tuleb sisestada komponentide loendi koostamisel. Võtmed aitavad JavaScripti teegil tuvastada, millised üksused on kohandatud, lisatud või eemaldatud. Oluline on need märgistada, et React saaks pärast teatud aja möödumist struktuuriandmete komponente korreleerida.

Vormid

JS teegis töötavad standardiseeritud märgistuskeele elemendid veidi teisiti kui dokumendiobjekti mudeli komponendid, kuna vormielementidel on algselt peidetud olek.

Hallatud üksused

Standardiseeritud märgistuskeeles kipuvad sellised vormid nagu sisend , valik , tekstiala säilitama oma olekut ja värskendama seda, kui arendaja sisestab uut teavet. React.js-i olek määrab alati hallatava koostamiselemendi sisendväljade väärtuse. Kuigi see viitab sellele, et kasutaja peab kirjutama algselt antud koodist veidi rohkem, on nüüd võimalik seda väärtust kasutajaliidese teistele osadele edasi anda.

Riigi tõus

State lifting on standardiseeritud mall, mida iga arendaja peaks teadma ja oskama oma töö käigus rakendada. Selle kasutamine kõrvaldab keerulised ja tavaliselt kasutud riigijuhtimismustrid.

Miks on nii vaja riigi tõusu kontrolli all hoida?

Olukorra tõstmine minevikukomponentide tasemele nende osade jaoks, mis seda nõuavad, on vajalik, et kõik elemendid saaksid olekus osaleda. Stabiilne olekutase muudab selle jaotamise kõigi sellest sõltuvate komponentide vahel lihtsamaks.

Koosseis vs pärand

React.js sisaldab tugevat kompositsioonimudelit, seega on soovitatav kasutada pärimise asemel osadest terviku ülesehitamist, et taaskasutada varem elementide vahele kirjutatud koodi. Seega pakuvad rekvisiidid ja võimalus luua komponentidest ühtne tervikkompositsioon arendajale vajaliku paindlikkuse, et luua elemendi kest ja käitumine konkreetsel ja ohutul viisil.

Meeldetuletus! Komponendid võivad hõlmata sõltumatuid rekvisiite, sealhulgas elementaarseid osi, mis moodustavad teeke või funktsioone.

Kui teil on vaja teist või kolmandat korda komponentidega töötamiseks kasutada välimusvaba funktsiooni, tõmmake see eraldi JS-moodulisse. Teisaldage see komponenti ja kasutage loodud funktsiooni ilma täiendava laiendamiseta. React või Vue või Angular, mida valida: https://youtu.be/Nm8GpLCAgwk

React.js põhimõtted

Kogu JavaScripti teegi filosoofia on Reacti juhendis peidetud. Tundub, et see on pikk ja mitte nii suur tähtsus, kuid paljud kasutajad väidavad, et pärast lugemist langes kõik paika. Dokumentatsioon on üsna vana, kuid siiski väga väärtuslik ja asjakohane –
https://ru.reactjs.org/docs/thinking-in-react.html . React js-i õpetus https://ru.reactjs.org/tutorial/tutorial.html

Teegi React.js funktsionaalsus

JavaScripti teeki kasutades saab kasutaja võimaluse pöörata kogu oma tähelepanu vahetult kasutajaliidese arendusprotsessile ja rakenduse komponentidele, olles kõige vähem häiritud kirjaliku koodi kujunemisest ja võimalikest puudujääkidest. Teek võimaldab programme kiiremini arendada, hõlbustab komponentide ja kogu projekti protsessi kui terviku seadistamist ja redigeerimist. Seega sisaldab React.js elemente, mis vastutavad globaalses võrgus suhtlemise, kasutajaliidese, programmi oleku juhtimise ja muude keeruliste probleemide lahendamise eest. Raamatukogul on ka järgmised funktsionaalsed funktsioonid:

1. Praktilisus . React.js on saadaval minimeeritud vormingus. See kompaktne pakett ei pea olema selgelt konfigureeritud. See sisaldab juba koodi jagamise funktsiooni, mis vähendab saidi brauseri versiooni avamiseks kuluvat aega, kuna see suvand takistab komponentide samaaegset renderdamist.
2. Pumbatav ökosüsteem ja vastavus . Teegis on saadaval suur hulk tööriistu, mida toetavad ka teised saidid, mis võimaldab kasutajal arendada uusi keerukaid programme mis tahes eesmärgil.
3. Täielik funktsionaalsus . JavaScripti teegi peamiseks eeliseks on see, et kõik platvormi uued versioonid vastavad vanade nõuetele, seega saab kasutada nii vana kui ka uuendatud versiooni, need kõik on toetatud ja on aktuaalsed tänaseni. Varem välja antud versioonid ei vanane pärast viimaseid värskendusi.

Praktiline kasutamine

Raamatukogu avalehel kasutajatele mõeldud juhendis on mitmeid illustreerivaid näiteid Reacti kasutamisest praktikas. Saate neid käsitsi parandada ja proovida neid käivitada. Isegi kui olete uus kasutaja ja ei mõista teegi olemust ja loogikat, kohandage koodi oma maitse järgi ja vaadake tulemust.

Reacti praktiline rakendamine kauplemisrobotite kirjutamisel JavaScriptis

Oluline on mõista, et arendaja ei programmeeri JS-i, vaid kirjutab skripte (skripte). seetõttu saab arendaja raamatukogu kasutades kirjutada koodi järgneva kauplemisroboti jaoks, mida kasutatakse kauplemiseks, ning jätkata ka selle välimuse kujundamist selle platvormi alusel. Tegelikult on kauplemiseks mõeldud kauplemisrobot ka rakendus, millest suurt osa arendatakse React.js abil. Kuid mõned funktsioonid ja roboti sisemine osa tuleb siiski teha teistel saitidel, mis pakuvad selleks sobivaid tööriistu.

GitHub ja React.js

GitHub on platvorm, mis majutab kõiki projektide versioone. Kasutaja ühendab hostimise, läbib ametlikul GitHubi veebisaidil registreerimisprotseduuri ja loob seejärel veebihoidla, kuhu edastab kõik failid Gitist.
Git on tänapäeval kõige populaarsem ja asjakohasem projekti versioonihaldusteenus ning GitHub on kaugkoodihoidla.

Viide! Failide redigeerimise ja allalaadimise juurde pääsevad ainult need kasutajad, kes on saanud vastava loaga vastava lingi.

Dokumentatsioon

Kõik õpetused ja ajakohased materjalid JavaScripti teegi kohta on värskeima värskendusega. Arendajad koostavad ja postitavad üldiseks lugemiseks ka dokumentatsiooni vanu versioone, mis on postitatud teegi eraldi lehele. Seetõttu on algajatel lihtsam saidi haldamise oskusi omandada: nii vana kui ka uus materjal – kõik on siin, juurdepääs on kõigile tasuta.

Märge! Ärge unustage juhendeid lugeda. Viska vähemalt pilk peale – juba praegu loksub enamus arusaamatuna tunduvast paika.

Reacti raamatukogu on tänapäeval populaarne ja asjakohane platvorm. Selle mitmekülgsus võimaldab arendajatel teha projekte parema kvaliteediga ja lühema ajaga. Lisaks muudab platvormi tundmine ja selle kasutamise oskuste omamine spetsialisti tööturul nõutumaks.