React.JS iesācēju manekeniem, izmantojot bibliotēku, rakstot tirdzniecības robotus

Kas ir React JS iesācēju manekeniem, kas tas ir, pamācības, instalēšana, dokumentācija – kā uzstādīt un izmantot React JS bibliotēku, rakstot tirdzniecības robotus. Bieži vien datorspeciālistu darba sludinājumos var atrast prasību, ka tev ir prasmes JavaScript bibliotēkā. Jā, un viņi sagaida zināšanas par React ne tikai no programmatūras izstrādātājiem, bet arī no programmētājiem, kuri nodarbojas ar vietnes iekšējo izstrādi, nevis ārējo dizainu. Kas tā par bibliotēku, kādas iespējas tā dod darbā un kur iesācējs sāk iepazīties? Noskaidrosim to šajā rakstā.

JavaScript bibliotēka — reaģēt: kas tas ir

React.JS ir populārās
JavaScript programmēšanas valodas bibliotēka, ko veido tiešsaistes sociālais tīkls Facebook, lai uzlabotu un vienkāršotu vietņu un lietojumprogrammu ārējā apvalka – saskarnes, ar kuru lietotājs mijiedarbojas, izstrādes procesu. Bibliotēkas galvenā iezīme ir komponenti un stāvokļi. Komponents ir digitālā komplekta daļa, kas ir atbildīga par noteiktas projektējamās sistēmas daļas izskatu.

Piezīme! Šādas sastāvdaļas var ievietot ligzdā.

Stāvoklis ir visu datu kopums par saskarnes detaļām, tostarp tās reprezentācijas renderēšanu. Izmantojot piemērus, mēs sīkāk un skaidrāk uzzināsim, kas ir kas. Zemāk esošajā attēlā ir redzamas dažas no lielajām sastāvdaļām – publicēšana tiešsaistes sociālajā tīklā, sadaļa ar vispārīgu informāciju un fotoattēlu rādīšana. Katra daļa ietver mazākus komponentus, kas ir komponenti. Piemēram, publikācijā ir teksts, fotogrāfijas, lietotāja vārds, kurš publicē informāciju utt. Attēlu sadaļā ir atsevišķi attēli, bet vispārīgās informācijas sadaļā ir īsa informācija.
Katrai no šīm sastāvdaļām (komponentiem) ir stāvoklis. Tas nozīmē, ka sadaļa ar vispārīgu informāciju dažādās ierīcēs izskatīsies atšķirīgi, “patīk” elements, nospiežot, maina krāsu un skaitli, kas ir atbildīgs par kopējo atzīmju Patīk skaitu; publikācija savukārt var saīsināt tekstu vai pārsūtīt to pilnībā.

Tādējādi tiek izteikta React.JS elastība – interfeisa komponents tiek uzrakstīts vienu reizi, un pēc tam tiek doti visi iespējamie stāvokļi.

Kāpēc ir nepieciešama React bibliotēka?

React.JS ir viens no iespējamiem variantiem JS vai HTML kodu uzrakstīt ērtā formātā, veidot tā kopijas un padarīt vizuālu. Komponenti šeit ir rakstīti īpašā sistēmas valodā – JSX, kas ietver JavaScript programmēšanas valodas un standartizētās HTML iezīmēšanas valodas elementus.
Kods, kas rakstīts JSX, ir diezgan specifisks. Svarīgi ir arī tas, ka interneta pārlūkprogrammai nav jāsaprot šī sistēmas valoda – React.JS kods tiek pārsūtīts uz JS, ko jebkura pārlūkprogramma uztver bez problēmām. Lai to izdarītu, bibliotēkā izveidotais tiek nodots caur specializētiem kompilatoriem (viens no populārākajiem mūsdienās ir Babel js), kas pārvērš kodus mazāk zināmās programmēšanas valodās JavaScript attēlojumos.
Sākumā var šķist, ka lietošanas sistēma ir ārkārtīgi neloģiska, taču pēc kāda laika pierod un saproti, kāpēc mehānisms ir tā veidots. JavaScript bibliotēkai ir vairākas spēcīgas priekšrocības:

• sistēmas programmēšanas valodu ir vieglāk atpazīt nekā labi zināmo JavaScript, un līdz ar to koda atbalstīšana un kļūdu novēršana tajā prasīs vairākas reizes mazāk laika (attiecīgi palielināsies jaunu kodu un programmu rakstīšanas ātrums);
• šeit ir iebūvēta ērta un praktiska veidojošo elementu sistēma – atkārtojas koda daļas, kas tiek izmantotas dažādos rakstīšanas posmos un dažādās programmās, kā arī mainās atkarībā no konteksta;
• katrs veidojošais elements ir pakārtots tikai savam stāvoklim , tāpēc koda nepilnības ir vieglāk labot, ja praksē pēkšņi tiek konstatēta kļūda; nepareizi momenti uzpeld virspusē: elements, kas darbojas pareizi, turpinās stabili darboties šajā režīmā, ja vien, protams, attiecībā uz to netiks izmantots nepareizs stāvoklis.

Tādējādi varam secināt, ka bibliotēka React.JS var ietaupīt daudz laika, padarīt kodu precīzāku, sakārtot secību pareizā secībā un atkal izmantot lielus blokus. Šīs priekšrocības ļauj samazināt lietotāja saskarnes izveides procesa izmaksas, kā arī paātrina šī procesa laiku. Ja ir prasmes lietot JS un HTML programmēšanas valodu, sistēmas JSX lietošanas apguve ir vienkārša – tikai dažas dienas, lai to apgūtu.

Piezīme! Bibliotēku ir racionāli izmantot, strādājot ar lieliem projektiem, kad nepieciešams uzrakstīt lielu skaitu dinamisku lapu. Mazā biznesa vietnei šādas sarežģītības nav vajadzīgas.

Reaģējiet uz JS fundamentālo kursu no A līdz Z: https://youtu.be/GNrdg3PzpJQ

Iepazīšanās iesācējiem: pamatjēdzieni

Sveika pasaule!

Piekļūstot bibliotēkas pirmajai lapai, lietotājs kā nelielu piemēru redzēs apsveikuma virsrakstu – “Sveika pasaule!”.

JSX sistēmas valodas pamati

JSX ir sistēmas programmēšanas valoda, plaši pazīstamā JavaScript paplašinājums. Tas ietver divu valodu kombināciju – JA programmēšanu un standartizēto HTML iezīmēšanas valodu. Izstrādātāji to izmanto, lai pielāgotu koncepciju, lai parādītu React, kā tieši jāizskatās lietotāja interfeisam. JSX izveido bibliotēkas “daļas”.

Kas ir JSX?

Bibliotēka React pieturas pie loģikas, ka renderēšanas būtība ir tieši saistīta ar lietotāja interfeisa loģiku: kā notiek notikumu apstrāde, kā mainās stāvoklis noteiktā laika posmā un kā informācija tiek sagatavota prezentācijai. JS bibliotēku var izmantot bez tās sistēmas valodas, taču liela daļa izstrādātāju uzskata, ka tā ir vērtīga tās skaidrības un konkrētības dēļ, strādājot ar lietotāja saskarni, kas ģenerēta no JavaScript koda. Turklāt paplašinājums ļauj React vieglāk ģenerēt paziņojumus par nederīgiem brīžiem un kļūdām.

Izteiksmju veidošana sistēmas valodā

JSX ļauj procesā izmantot jebkuras labi uzrakstītas JavaScript izteiksmes cirtainajās iekavās.

JSX ir arī izteiksme Kad avota kods ir baitkodēts, jebkura JSX izteiksme pārvēršas par standarta JS funkcijas izsaukumu, kas ir vērsta uz JavaScript kategoriju. No tā var saprast, ka oficiālās programmēšanas valodas sistēmas paplašinājumu var izmantot if rokasgrāmatā un uz laiku.

JSX ir objekti Objektus , kas attēloti ar paplašinājumu, sauc par React elementiem. Tie precizē rezultātu, ko izstrādātājs vēlas redzēt displejā. Bibliotēka atpazīst šos objektus un izmanto tos dokumenta objektu modeļa ģenerēšanas un uzturēšanas procesā.

Detaļu atveidošana

Sīkāka informācija ir daudzi mazie elementi, kas veido React programmas.
Sīkāka informācija ir attēls, kuru izstrādātājs vēlas redzēt monitorā. Salīdzinot ar dokumenta objektu modeļa elementiem, bibliotēkas elementi ir vienkārši un neaizņem daudz resursu. Elementi ir sastāvdaļu sastāvdaļas.

Komponenti un rekvizīti

Komponenti ļauj sadalīt lietotāja interfeisu atsevišķās daļās, ar kurām ir vieglāk strādāt atsevišķi. Tos var kombinēt un izmantot vairākas reizes. Lielākoties komponentu funkcionalitāte ir līdzīga pašas JavaScript programmēšanas valodas funkcionalitātei. Viņi ņem ievades informāciju, ko sauc par rekvizītiem, un atgriež React elementus, kas norāda izstrādes modeli, kuru izstrādātājs vēlas redzēt monitorā.

Komponentu šķirnes: funkcionālā un klase

Visvieglāk ir atsaukties uz bibliotēkas komponentu kā funkciju.
Sastāvdaļas var attēlot arī ES6 klases formātā.

Interesanti! React bibliotēka šos divu veidu komponentus definē kā līdzīgus.

rekvizīti

Rekvizīti ir nemainīgi objekti, kas ir tikai lasāmi. Tāpēc komponentam nevajadzētu neko rakstīt savam rekvizītam neatkarīgi no tā, kāda veida tas pieder.

Stāvoklis un dzīves cikls

Pirmkārt, izdomāsim, kā pareizi piemērot stāvokli darbā. Ir trīs svarīgas lietas, kas jāzina par komponentu stāvokli:

1. Nemainiet stāvokli tieši, izmantojiet metodi setState. Atcerieties, ka vienīgā joma, kurā varat tieši mainīt stāvokli, ir konstruktors.
2. Stāvokļa atjauninājumi var nebūt sinhroni.
3. Informācijas plūsmai ir viens virziens. Komponentu konstrukcijā neviens no viņiem nezina, vai stāvoklis ir piešķirts citai sastāvdaļai. Nav svarīgi, kā tas vai cits neatkarīgais funkcionālais elements tika izveidots – izmantojot funkcionālu vai klasifikācijas rīku. To sauc par “pakārtoto” datu plūsmu. Stāvoklis vienmēr ir definēts kādam elementam, un šī stāvokļa strukturālās asociācijas var ietekmēt tikai tās daļas, kas hierarhiskā secībā atrodas “zemāk”.

Parasti valsts tiek saukta par “vietējo”, “iekšējo” vai slēpto. Tas ir redzams tikai pašam funkcionālajam elementam un neredzams citām React daļām. Bibliotēkas programmās tas, vai neatkarīgs funkcionāls elements ir apveltīts ar noteiktu stāvokli vai nav, ir šīs daļas iekšēja attīstība, kas laika gaitā var mainīties. Interesanti ir arī tas, ka darbā var apvienot komponentus ar un bez stāvokļa.

Notikumu analīze

Notikumu parsēšanas process React komponentos ir līdzīgs notikumu apstrādei dokumenta objekta modeļa elementos. Tomēr ir vairākas pazīmes, kas tos atšķir vienu no otra:

1. Notikumi JavaScript bibliotēkā tiek nosaukti citā stilā nekā standarta.
2. Izmantojot sistēmas paplašināto programmēšanas valodu, izstrādātājs nodod apakšprogrammu kā notikumu apstrādātāju, nevis virkni.

Elementu nosacīta atveide

JavaScript bibliotēka ļauj sadalīt elementu izstrādes loģiku neatkarīgos komponentos. Tos var parādīt vispārējai vai slēptai, atkarībā no tā, ar kādu stāvokli tie ir apveltīti dotajā brīdī. Elementu nosacītā renderēšana darbojas pēc tāda paša principa kā nosacījuma izteiksmes, kuru pamatā ir JavaScript programmēšanas valoda. Dažkārt gadās, ka bibliotēkai ir nepieciešams skaidrojums, kā stāvoklis ietekmē dažu elementu slēpšanu vai atveidošanu. Šeit loģiskāk ir izmantot nosacījumu JS palīgu vai izteiksmes, kas līdzīgas if.

Komponentu maiņa

Mainīgajiem var pievienot React bibliotēkas elementus. Tas ir praktisks risinājums, ja kāds nosacījums norāda, vai kāda komponenta daļa ir jāzīmē, vai arī tam nav jēgas, bet pārējā daļa paliek nemainīga.

Saraksti un atslēgas

Šajā sadaļā ir iekļauti vairāki komponenti:

1. Vairāku elementu zīmēšana . Lietotājs var izveidot elementu kopu un iegult to sistēmas programmēšanas valodā, izmantojot cirtainus lencēs.
2. Elementārs elementu saraksts . Bieži vien lietotāji un izstrādātāji pielāgo sarakstus tieši sastāvdaļas daļā.

Atslēgas

Atslēga React JavaScript bibliotēkā apzīmē specializētu rīku, kas jāievada, ģenerējot komponentu sarakstu. Atslēgas palīdz JavaScript bibliotēkai noteikt, kuri vienumi ir pielāgoti, pievienoti vai noņemti. Ir svarīgi tos atzīmēt, lai React varētu korelēt strukturālo datu komponentus pēc noteikta laika.

Veidlapas

JS bibliotēkā standartizētie iezīmēšanas valodas elementi darbojas nedaudz savādāk nekā dokumenta objekta modeļa komponenti, jo veidlapas elementiem sākotnēji ir slēpts stāvoklis.

Pārvaldītie vienumi

Standartizētā iezīmēšanas valodā tādām formām kā ievade , atlase , teksta apgabals mēdz saglabāt savu stāvokli un atjaunināt to, kad izstrādātājs ievada jaunu informāciju. React.js statuss vienmēr nosaka ievades lauku vērtību pārvaldītā komponēšanas elementā. Lai gan tas norāda, ka lietotājam ir jāraksta nedaudz vairāk par sākotnēji norādīto kodu, tagad ir iespējams nodot šo vērtību citām lietotāja saskarnes daļām.

Valsts uzplaukums

Valsts liftings ir standartizēta veidne, kas jāzina katram izstrādātājam un jāspēj pielietot darba procesā. Izmantojot to, tiks novērsti sarežģīti un parasti bezjēdzīgi valsts pārvaldības modeļi.

Kāpēc ir tik nepieciešams kontrolēt valsts augšupeju?

Stāvokļa paaugstināšana līdz pagātnes komponentu līmenim tām daļām, kurām tas nepieciešams, lai visi elementi varētu piedalīties stāvoklī. Stabils stāvokļa līmenis atvieglos tā sadali starp visiem komponentiem, kas uz to balstās.

Sastāvs pret mantojumu

React.js ietver spēcīgu kompozīcijas modeli, tāpēc ieteicams izmantot veseluma veidošanas procesu no daļām, nevis mantošanu, lai atkārtoti izmantotu kodu, kas iepriekš rakstīts starp elementiem. Tādējādi rekvizīti un iespēja izveidot vienotu veselu kompozīciju no sastāvdaļām nodrošina izstrādātājam nepieciešamo elastību, lai konkrētā un drošā veidā izveidotu elementa apvalku un uzvedību.

Atgādinājums! Sastāvdaļas var izmantot nesaistītus elementus, tostarp elementāras daļas, kas veido bibliotēkas vai funkcijas.

Ja jums otro vai trešo reizi ir jāizmanto funkcija bez izskata, lai strādātu ar komponentiem, izvelciet to atsevišķā JS modulī. Pārvietojiet to uz komponentu un izmantojiet ģenerēto funkciju bez papildu paplašināšanas. React vai Vue vai Angular, ko izvēlēties: https://youtu.be/Nm8GpLCAgwk

React.js principi

Visa JavaScript bibliotēkas filozofija ir paslēpta React rokasgrāmatā. Šķiet, ka tas ir garš un nav tik liela nozīme, tomēr daudzi lietotāji apgalvo, ka pēc izlasīšanas viss nostājās savās vietās. Dokumentācija ir diezgan veca, taču joprojām liela vērtība un atbilstība –
https://ru.reactjs.org/docs/thinking-in-react.html . React js apmācība https://ru.reactjs.org/tutorial/tutorial.html

Bibliotēkas React.js funkcionalitāte

Izmantojot JavaScript bibliotēku, lietotājs iegūst iespēju visu savu uzmanību pievērst tieši lietotāja interfeisa izstrādes procesam un aplikācijas komponentiem, vismazāk viņu atraujot no rakstītā koda veidošanās un iespējamiem trūkumiem. Bibliotēka ļauj ātrāk izstrādāt programmas, atvieglo komponentu konfigurēšanu un rediģēšanu un visa projekta procesu kopumā. Tādējādi React.js satur elementus, kas atbild par komunikāciju globālajā tīklā, UI, programmas stāvokļa kontroli un spēju risināt citus sarežģītus jautājumus. Bibliotēkai ir arī šādas funkcionālās iespējas:

1. Praktiskums . React.js ir pieejams samazinātā formātā. Šī kompaktā pakotne nav skaidri jākonfigurē. Tajā jau ir iekļauta koda sadalīšanas funkcija, kas samazina laiku, kas nepieciešams vietnes pārlūkprogrammas versijas atvēršanai, jo šī opcija neļauj komponentiem atveidot vienlaikus.
2. Sūknētā ekosistēma un atbilstība . Bibliotēkā ir pieejams liels skaits rīku, ko atbalsta citas vietnes, kas ļauj lietotājam izstrādāt jaunas sarežģītas programmas jebkuram mērķim.
3. Pilna funkcionalitāte . JavaScript bibliotēkas galvenā priekšrocība ir tā, ka visas jaunās platformas versijas atbilst veco prasībām, līdz ar to var izmantot gan veco, gan atjaunināto versiju, tās visas ir atbalstītas un aktuālas šai dienai. Iepriekš izdotās versijas pēc jaunākajiem atjauninājumiem nekļūst novecojušas.

Praktiska lietošana

Bibliotēkas galvenajā lapā instrukcijās lietotājiem ir vairāki ilustratīvi piemēri React izmantošanai praksē. Varat tos manuāli labot un mēģināt palaist. Pat ja esat jauns lietotājs un nesaprotat bibliotēkas būtību un loģiku, pielāgojiet kodu pēc saviem ieskatiem un redziet rezultātu.

React praktiska pielietošana, rakstot tirdzniecības robotus JavaScript

Ir svarīgi saprast, ka izstrādātājs neprogrammē JS, bet raksta skriptus (skriptus). tāpēc, izmantojot bibliotēku, izstrādātājs var rakstīt kodu nākamajam tirdzniecības robotam, ko izmanto tirdzniecības nolūkos, kā arī turpināt veidot tā izskatu, pamatojoties uz šo platformu. Faktiski tirdzniecības robots tirdzniecībai ir arī lietojumprogramma, no kurām liela daļa tiek izstrādāta, izmantojot React.js. Tomēr dažas funkcijas un robota iekšējā daļa joprojām būs jāveic citās vietnēs, kas nodrošina šim nolūkam piemērotus rīkus.

GitHub un React.js

GitHub ir platforma, kurā tiek mitinātas visas projektu versijas. Lietotājs izveido savienojumu ar mitināšanu, veic reģistrācijas procedūru oficiālajā GitHub vietnē un pēc tam izveido tiešsaistes repozitoriju, kurā pārsūta visus failus no Git.
Git ir mūsdienās populārākais un atbilstošākais projektu versiju kontroles pakalpojums, un GitHub ir attālā kodu krātuve.

Atsauce! Tikai tiem lietotājiem, kuri ir saņēmuši atbilstošu saiti ar atļauju, ir piekļuve failu rediģēšanai un lejupielādei.

Dokumentācija

Visas apmācības un jaunākie materiāli par JavaScript bibliotēku ir atjaunināti ar jaunāko atjauninājumu. Izstrādātāji arī apkopo un vispārējai lasīšanai ievieto dokumentācijas vecās versijas, kas ievietotas atsevišķā bibliotēkas lapā. Tāpēc iesācējiem būs vieglāk apgūt vietnes pārvaldības iemaņas: gan veco, gan jauno materiālu – viss ir šeit, piekļuve visiem ir bez maksas.

Piezīme! Neaizmirstiet izlasīt rokasgrāmatas. Paskaties vismaz – jau lielākā daļa no tā, kas šķita nesaprotams, nostāsies savās vietās.

React bibliotēka mūsdienās ir populāra un atbilstoša platforma. Tā daudzpusība ļauj izstrādātājiem izveidot projektus kvalitatīvāk un īsākā laikā. Turklāt platformas pārzināšana un prasmes to lietot padara speciālistu pieprasītāku darba tirgū.