React.JS pradedantiesiems manekenams, naudojantiems biblioteką rašant prekybos robotus

Kas yra React JS pradedantiesiems manekenams, kas tai yra, pamokos, diegimas, dokumentacija – kaip įdiegti ir naudoti React JS biblioteką rašant prekybos robotus. Dažnai kompiuterių specialistų darbo skelbimuose galite rasti reikalavimą, kad turite JavaScript bibliotekos įgūdžių. Taip, ir žinių apie React jie tikisi ne tik iš programinės įrangos kūrėjų, bet ir iš programuotojų, kurie užsiima vidiniu svetainės kūrimu, o ne išoriniu dizainu. Kokia tai biblioteka, kokias galimybes ji suteikia darbe ir nuo ko pradeda pažintis pradedančiajam? Išsiaiškinkime tai šiame straipsnyje.

JavaScript biblioteka – Reaguoti: kas tai

React.JS yra populiarios
JavaScript programavimo kalbos biblioteka , kurią sudaro internetinis socialinis tinklas Facebook, siekiant pagerinti ir supaprastinti išorinio svetainių ir programų apvalkalo – sąsajos, su kuria vartotojas sąveikauja – kūrimo procesą. Pagrindinė bibliotekos savybė yra komponentai ir būsenos. Komponentas yra skaitmeninio rinkinio dalis, atsakinga už tam tikros projektuojamos sistemos dalies išvaizdą.

Pastaba! Tokios sudedamosios dalys gali būti įdėtos.

Būsena yra visų duomenų apie sąsajos detales, įskaitant jos reprezentacinį atvaizdavimą, rinkinys. Naudodamiesi pavyzdžiais, mes išsamiau ir aiškiau išsiaiškinsime, kas yra kas. Žemiau esančiame paveikslėlyje pavaizduoti keli pagrindiniai komponentai – paskelbimas internetiniame socialiniame tinkle, skiltis su bendra informacija ir nuotraukų rodymas. Kiekviena dalis apima mažesnius komponentus, kurie yra komponentai. Pavyzdžiui, leidinyje yra tekstas, nuotraukos, informaciją skelbiančio vartotojo vardas ir pavardė ir kt. Vaizdų skiltyje yra atskiros nuotraukos, o bendros informacijos skiltyje – trumpa informacija.
Kiekvienas iš šių komponentų (komponentų) turi būseną. Tai yra, skyrelis su bendra informacija skirtinguose įrenginiuose atrodys skirtingai, paspaudus elementas „patinka“ keičia spalvą ir skaičių, atsakingą už bendrą paspaudimų „patinka“ skaičių; publikacija savo ruožtu gali sutrumpinti tekstą arba perduoti jį visą.

Taigi išreiškiamas React.JS lankstumas – sąsajos komponentas parašomas vieną kartą, o po to jam suteikiamos visos įmanomos būsenos.

Kodėl reikalinga React biblioteka?

React.JS yra vienas iš galimų variantų patogiu formatu parašyti JS arba HTML kodą, suformuoti jo kopijas ir padaryti vizualų. Komponentai čia parašyti specialia sistemos kalba – JSX, kuri apima JavaScript programavimo kalbos elementus ir standartizuotą HTML žymėjimo kalbą.
JSX parašytas kodas yra gana specifinis. Taip pat svarbu, kad interneto naršyklė neprivalo suprasti šios sistemos kalbos – į JS perduodamas React.JS kodas, kurį bet kuri naršyklė suvokia be problemų. Norėdami tai padaryti, tai, kas sukurta bibliotekoje, perduodama per specializuotus kompiliatorius (vienas iš populiariausių šiandien yra Babel js), kurie konvertuoja kodus mažiau žinomomis programavimo kalbomis į JavaScript reprezentacijas.
Iš pradžių gali atrodyti, kad naudojimo sistema yra itin nelogiška, tačiau po kurio laiko pripranti ir supranti, kodėl mechanizmas sukurtas būtent taip. „JavaScript“ biblioteka turi keletą stiprių pranašumų:

• sistemos programavimo kalba yra lengviau atpažįstama nei gerai žinoma JavaScript, todėl kodo palaikymas ir klaidų pašalinimas užtruks kelis kartus trumpiau (atitinkamai padidės naujų kodų ir programų rašymo greitis);
• čia įmontuota patogi ir praktiška sudedamųjų elementų sistema – kartojamos kodo dalys, kurios naudojamos skirtinguose rašymo etapuose ir įvairiose programose, taip pat keičiasi priklausomai nuo konteksto;
• kiekvienas sudedamasis elementas yra pavaldus tik savo būsenai , todėl lengviau ištaisyti kodo trūkumus, jei jo darbe praktiškai staiga randama klaida; neteisingi momentai išplaukia į paviršių: tinkamai funkcionuojantis elementas ir toliau veiks stabiliai šiuo režimu, nebent, žinoma, jo atžvilgiu bus panaudota netinkama būsena.

Taigi galime daryti išvadą, kad React.JS biblioteka gali sutaupyti daug laiko, padaryti kodą konkretesnį, sutvarkyti seką tinkama tvarka ir vėl naudoti didelius blokus. Šie pranašumai leidžia sumažinti vartotojo sąsajų kūrimo proceso išlaidas, taip pat pagreitinti šio proceso laiką. Turint JS ir HTML programavimo kalbų naudojimo įgūdžius, išmokti naudotis JSX sistema yra paprasta – per kelias dienas ją įvaldyti.

Pastaba! Biblioteką racionalu naudoti dirbant su dideliais projektais, kai reikia parašyti daug dinamiškų puslapių. Smulkaus verslo svetainei nereikia tokio sudėtingumo.

Reaguokite į pagrindinį JS kursą nuo A iki Z: https://youtu.be/GNrdg3PzpJQ

Pažintis pradedantiesiems: pagrindinės sąvokos

Labas pasauli!

Prisijungęs prie pirmojo bibliotekos puslapio, vartotojas matys sveikinimo antraštę kaip nedidelį pavyzdį – „Sveikas pasaulis!“.

JSX sistemos kalbos pagrindai

JSX yra sistemos programavimo kalba, gerai žinomo JavaScript plėtinys. Tai apima dviejų kalbų derinį – JA programavimą ir standartizuotą HTML žymėjimo kalbą. Kūrėjai jį naudoja norėdami pakoreguoti koncepciją, kad „React“ būtų tiksliai parodyta, kaip turėtų atrodyti vartotojo sąsaja. JSX sukuria bibliotekos „dalis“.

Kas yra JSX?

React biblioteka laikosi logikos, kad atvaizdavimo esmė tiesiogiai susijusi su vartotojo sąsajos logika: kaip apdorojami įvykiai, kaip keičiasi būsena tam tikru laikotarpiu, kaip informacija paruošiama pateikimui. JS biblioteka gali būti naudojama be jos sistemos kalbos, tačiau daugeliui kūrėjų ji yra vertinga dėl savo aiškumo ir konkretumo dirbant su vartotojo sąsaja, sugeneruota iš JavaScript kodo. Be to, plėtinys leidžia „React“ lengviau generuoti pranešimus apie netinkamus momentus ir klaidas.

Išraiškų formavimas sistemos kalba

JSX leidžia procese naudoti bet kokias gerai parašytas „JavaScript“ išraiškas skliausteliuose.

JSX taip pat yra išraiška Kai šaltinio kodas yra užkoduotas baitais, bet kuri JSX išraiška virsta standartiniu JS funkcijos iškvietimu, nukreiptu į „JavaScript“ kategoriją. Iš to galima suprasti, kad oficialios programavimo kalbos sistemos plėtinys gali būti naudojamas if vadovo viduje ir tam tikrus laikotarpius.

JSX yra objektai Objektai , atstovaujami plėtiniu, vadinami React elementais. Jie paaiškina rezultatą, kurį kūrėjas nori matyti ekrane. Biblioteka atpažįsta šiuos objektus ir naudoja juos kurdama ir prižiūrėdama dokumento objektų modelį.

Detalių atvaizdavimas

Išsami informacija yra daugybė mažų elementų, sudarančių „React“ programas.
Išsami informacija yra paveikslėlis, kurį kūrėjas galiausiai nori matyti monitoriuje. Palyginti su dokumento objektų modelio elementais, bibliotekos elementai yra paprasti ir neužima daug išteklių. Elementai yra komponentų sudedamosios dalys.

Komponentai ir rekvizitai

Komponentai leidžia padalyti vartotojo sąsają į atskiras dalis, kurias lengviau dirbti atskirai. Juos galima derinti ir naudoti kelis kartus. Daugeliu atvejų komponentų funkcionalumas yra panašus į pačios JavaScript programavimo kalbos funkcionalumą. Jie paima įvesties informaciją, kuri vadinama rekvizitu, ir grąžina „React“ elementus, nurodančius kūrimo modelį, kurį kūrėjas nori matyti monitoriuje.

Komponentų įvairovė: funkcinė ir klasė

Bibliotekos komponentą lengviausia nurodyti kaip funkciją.
Komponentai taip pat gali būti pateikti ES6 klasės formatu.

Įdomus! „React“ biblioteka apibrėžia šių dviejų tipų komponentus kaip panašius.

rekvizitai

Rekvizitai yra nekintantys objektai, kurie yra tik skaitomi. Todėl komponentas neturėtų nieko rašyti savo rekvizitų, nesvarbu, kokiai rūšiai jis priklauso.

Būsena ir gyvenimo ciklas

Pirmiausia išsiaiškinkime, kaip tinkamai pritaikyti būseną darbe. Yra trys svarbūs dalykai, kuriuos reikia žinoti apie komponento būseną:

1. Nekeiskite būsenos tiesiogiai, naudokite setState metodą. Atminkite, kad vienintelė sritis, kurioje galite tiesiogiai pakeisti būseną, yra konstruktorius.
2. Būsenos atnaujinimai gali būti nesinchroniniai.
3. Informacijos srautas turi vieną kryptį. Komponentų konstrukcijoje nė vienas iš jų nežino, ar būsena priskirta kitam komponentui. Nesvarbu, kaip buvo suformuotas tas ar kitas nepriklausomas funkcinis elementas – naudojant funkcinį ar klasifikavimo įrankį. Tai vadinama „pasroviui“ duomenų srautu. Būsena visada apibrėžiama tam tikram elementui, o šios būsenos struktūrinės asociacijos gali paveikti tik tas dalis, kurios yra „žemiau“ hierarchine tvarka.

Paprastai valstybė vadinama „vietine“, „vidine“ arba paslėpta. Jis matomas tik pačiam funkciniam elementui ir nematomas kitoms React dalims. Bibliotekos programose nepriklausomas funkcinis elementas turi tam tikrą būseną ar ne yra šios dalies vidinė plėtra, kuri laikui bėgant gali keistis. Įdomu ir tai, kad darbe galite derinti komponentus su būsena ir be jos.

Įvykių analizė

React komponentų įvykių analizavimo procesas yra panašus į įvykių apdorojimą dokumento objekto modelio elementuose. Tačiau yra keletas bruožų, kurie juos skiria vienas nuo kito:

1. Įvykiai „JavaScript“ bibliotekoje pavadinti kitu stiliumi nei standartinis.
2. Naudodamas sistemos išplėstinę programavimo kalbą, kūrėjas perduoda paprogramę kaip įvykių tvarkyklę, o ne eilutę.

Sąlyginis elementų atvaizdavimas

„JavaScript“ biblioteka leidžia suskaidyti elementų kūrimo logiką į nepriklausomus komponentus. Jie gali būti rodomi bendram rodymui arba paslėpti, priklausomai nuo to, kokia būsena šiuo metu jiems suteikta. Sąlyginis elementų atvaizdavimas veikia tuo pačiu principu kaip ir sąlyginės išraiškos, pagrįstos JavaScript programavimo kalba. Kartais nutinka taip, kad biblioteka reikalauja paaiškinimo, kaip būsena veikia kai kurių elementų slėpimą ar atvaizdavimą. Čia prasmingiau naudoti sąlyginį JS pagalbininką arba išraiškas, panašias į if.

Komponentų keitimas

React bibliotekos elementus galima pridėti prie kintamųjų. Tai praktiškas sprendimas, kai kokia nors sąlyga nurodo, ar kurią nors komponento dalį reikia nubraižyti, arba tai nėra prasmės, o likusi dalis lieka nepakitusi.

Sąrašai ir raktai

Šį skyrių sudaro keli komponentai:

1. Kelių elementų piešimas . Vartotojas gali sudaryti elementų rinkinį ir įterpti jį į sistemos programavimo kalbą, naudodamas garbanotas petnešas.
2. Pradinis elementų sąrašas . Dažnai vartotojai ir kūrėjai koreguoja sąrašus tiesiogiai sudedamojoje dalyje.

Raktai

Raktas „React JavaScript“ bibliotekoje žymi specializuotą įrankį, kurį reikia įvesti generuojant komponentų sąrašą. Raktai padeda „JavaScript“ bibliotekai nustatyti, kurie elementai buvo pakoreguoti, pridėti arba pašalinti. Svarbu juos pažymėti, kad praėjus tam tikram laikui React galėtų susieti struktūrinių duomenų komponentus.

Formos

JS bibliotekoje standartizuoti žymėjimo kalbos elementai veikia šiek tiek kitaip nei dokumento objekto modelio komponentai, nes formos elementai iš pradžių turi paslėptą būseną.

Tvarkomi elementai

Standartizuotoje žymėjimo kalboje tokios formos kaip įvestis , pasirinkimas , teksto sritis paprastai išlaiko savo būseną ir atnaujina ją, kai kūrėjas įveda naują informaciją. React.js būsena visada apibrėžia valdomo kūrimo elemento įvesties laukų reikšmę. Nors tai rodo, kad vartotojas turi parašyti šiek tiek daugiau nei nurodytas pradinis kodas, dabar šią reikšmę galima perduoti kitoms vartotojo sąsajos dalims.

Valstybės iškilimas

„State lifting“ yra standartizuotas šablonas, kurį kiekvienas kūrėjas turėtų žinoti ir mokėti pritaikyti savo darbo procese. Jį naudodami pašalinsite sudėtingus ir paprastai nenaudingus valstybės valdymo modelius.

Kodėl taip reikia kontroliuoti valstybės iškilimą?

Toms dalims, kurioms to reikia, būtina pakelti būseną į praeities komponentų lygį, kad visi elementai galėtų dalyvauti būsenoje. Stabilus būsenos lygis leis lengviau paskirstyti jį visiems komponentams, kurie ja remiasi.

Sudėtis prieš paveldėjimą

React.js apima tvirtą kompozicijos modelį, todėl rekomenduojama naudoti visumos kūrimo iš dalių, o ne paveldėjimo procesą, norint pakartotinai naudoti kodą, anksčiau parašytą tarp elementų. Taigi, rekvizitai ir galimybė iš sudedamųjų dalių sukurti vientisą kompoziciją suteikia kūrėjui lankstumo, reikalingo norint konkrečiu ir saugiu būdu sukurti elemento apvalkalą ir elgseną.

Priminimas! Sudedamosios dalys gali turėti nesusijusių rekvizitų, įskaitant elementarias dalis, kurios sudaro bibliotekas arba funkcijas.

Jei antrą ar trečią kartą dirbdami su komponentais turite naudoti funkciją be išvaizdos, ištraukite ją į atskirą JS modulį. Perkelkite jį į komponentą ir naudokite sugeneruotą funkciją neplėsdami. React ar Vue ar Angular, ką rinktis: https://youtu.be/Nm8GpLCAgwk

React.js principai

Visa „JavaScript“ bibliotekos filosofija yra paslėpta „React“ vadove. Atrodo, kad tai ilgas ir ne toks svarbus, tačiau daugelis vartotojų teigia, kad perskaičius viskas atsistojo į savo vietas. Dokumentacija gana sena, bet vis dar labai vertinga ir aktuali –
https://ru.reactjs.org/docs/thinking-in-react.html . „React js“ pamoka https://ru.reactjs.org/tutorial/tutorial.html

React.js bibliotekos funkcionalumas

Naudodamasis JavaScript biblioteka, vartotojas turi galimybę visą savo dėmesį skirti tiesiogiai vartotojo sąsajos kūrimo procesui ir programos komponentams, mažiausiai blaškomas dėl parašyto kodo formavimosi ir galimų trūkumų. Biblioteka leidžia greičiau kurti programas, lengviau konfigūruoti ir redaguoti viso projekto komponentus ir procesą. Taigi React.js yra elementų, atsakingų už komunikaciją pasauliniame tinkle, vartotojo sąsają, programos būsenos valdymą ir galimybę spręsti kitas sudėtingas problemas. Biblioteka taip pat turi šias funkcines funkcijas:

1. Praktiškumas . React.js galimas sumažintu formatu. Šio kompaktiško paketo nereikia aiškiai sukonfigūruoti. Jame jau yra kodo padalijimo funkcija, kuri sumažina laiką, per kurį atidaroma svetainės naršyklės versija, nes ši parinktis neleidžia komponentams pateikti vienu metu.
2. Siurbiama ekosistema ir atitiktis . Bibliotekoje yra daug įrankių, palaikomų kitų svetainių, todėl vartotojas gali kurti naujas sudėtingas programas bet kokiam tikslui.
3. Pilnas funkcionalumas . Pagrindinis JavaScript bibliotekos privalumas yra tas, kad visos naujos platformos versijos atitinka senųjų keliamus reikalavimus, todėl galima naudoti tiek seną, tiek atnaujintą versiją, visos jos yra palaikomos ir aktualios šiai dienai. Anksčiau išleistos versijos po naujausių atnaujinimų nepasensta.

Praktinis naudojimas

Pagrindiniame bibliotekos puslapyje, naudotojams skirtose instrukcijose, yra keletas iliustruojančių „React“ naudojimo praktikoje pavyzdžių. Galite juos pataisyti rankiniu būdu ir pabandyti paleisti. Net jei esate naujas vartotojas ir nesuprantate bibliotekos esmės bei logikos, pakoreguokite kodą pagal savo skonį ir pamatysite rezultatą.

Praktinis React taikymas rašant prekybos robotus JavaScript

Svarbu suvokti, kad kūrėjas neprogramuoja JS, o rašo scenarijus (skriptus). todėl, naudodamasis biblioteka, kūrėjas gali parašyti kodą vėlesniam prekybos robotui, kuris naudojamas prekybos tikslais, ir toliau kurti jo išvaizdą pagal šią platformą. Tiesą sakant, prekybos robotas, skirtas prekybai, taip pat yra programa, kurios didelė dalis yra kuriama naudojant React.js. Tačiau kai kurias funkcijas ir vidinę roboto dalį vis tiek teks atlikti kitose svetainėse, kuriose pateikiami tam tinkami įrankiai.

GitHub ir React.js

„ GitHub “ yra platforma, kurioje yra visos projektų versijos. Vartotojas prisijungia prie prieglobos, atlieka registracijos procedūrą oficialioje „GitHub“ svetainėje ir sukuria internetinę saugyklą, kurioje perkelia visus failus iš „Git“.
Šiandien „ Git “ yra populiariausia ir aktualiausia projekto versijų valdymo paslauga, o „GitHub“ yra nuotolinė kodų saugykla.

Nuoroda! Tik tie naudotojai, kurie gavo atitinkamą nuorodą su leidimu, turi prieigą prie failų redagavimo ir atsisiuntimo.

Dokumentacija

Visos mokymo programos ir naujausia medžiaga, susijusi su „JavaScript“ biblioteka, yra atnaujinta su naujausiu atnaujinimu. Kūrėjai taip pat sudaro ir bendram skaitymui skelbia senas dokumentacijos versijas, paskelbtas atskirame bibliotekos puslapyje. Todėl pradedantiesiems bus lengviau įvaldyti svetainės valdymo įgūdžius: tiek sena, tiek nauja medžiaga – čia viskas, prieiga visiems nemokama.

Pastaba! Nepamirškite perskaityti vadovų. Bent jau pasižiūrėk – jau dauguma to, kas atrodė nesuprantama, pateks į savo vietas.

„React“ biblioteka šiandien yra populiari ir aktuali platforma. Jo universalumas leidžia kūrėjams kurti geresnės kokybės projektus per trumpesnį laiką. Be to, žinant platformą ir turint įgūdžių ja naudotis, specialistas yra paklausesnis darbo rinkoje.