React.JS hasiberrientzako manikientzako, liburutegia erabiliz merkataritza-robotak idazterakoan

Zer da React JS maniki hasiberrientzat, zer da, tutorialak, instalazioa, dokumentazioa – nola instalatu eta erabili React JS liburutegia merkataritza-robotak idaztean. Sarritan informatika espezialistentzako lan iragarkietan, JavaScript liburutegian gaitasunak dituzula dioen baldintza bat aurki dezakezu. Bai, eta React-en ezagutza espero dute software-garatzaileengandik ez ezik, gunearen barne-garapenean diharduten programatzaileengandik ere, eta ez kanpoko diseinuan. Nolako liburutegia da hau, zer aukera ematen ditu lanean eta non hasten da ezagutzen hasiberria? Azal dezagun artikulu honetan.

JavaScript liburutegia – React: zer da

React.JS JavaScript programazio-lengoaia ezagunaren liburutegia da,
Facebook lineako sare sozialak eratua, guneen eta aplikazioen kanpoko shell-a garatzeko prozesua hobetzeko eta sinplifikatzeko, erabiltzaileak elkarreragiten duen interfazea. Liburutegiaren ezaugarri nagusia osagaiak eta egoerak dira. Osagai bat diseinatzen ari den sistemaren zati jakin baten itxuraz arduratzen den multzo digital baten zati bat da.

Ohar! Horrelako osagai-zatiak habiaratu daitezke.

Egoera interfaze baten xehetasunei buruzko datu guztien bilduma da, bere irudikapenaren errendaketa barne. Adibideak erabiliz, zehatzago eta argiago jakingo dugu zer den. Beheko irudiak osagai handietako batzuk erakusten ditu: lineako sare sozial batean argitaratzea, informazio orokorra duen atala eta argazkiak erakusten. Zati bakoitzak osagai txikiagoak ditu, hau da, osagaiak. Esaterako, argitalpen batek testua, argazkiak, informazioa argitaratzen duen erabiltzailearen izena, etab. Irudien atalean irudi indibidualak biltzen ditu, eta informazio orokorraren atalean informazio laburra.
Osagai (osagai) horietako bakoitzak egoera bat du. Hau da, informazio orokorra duen atalak itxura ezberdina izango du gailu ezberdinetan, “atsegin dut” elementuak kolorez aldatzen du sakatzean eta guztizko gustatuen kopuruaren arduraduna den kopurua; argitalpenak, berriz, testua laburtu edo osorik transmititu dezake.

Horrela, React.JS-ren malgutasuna adierazten da – interfazearen osagaia behin idazten da, eta ondoren egoera posible guztiak ematen zaizkio.

Zergatik behar da React liburutegia?

React.JS JS edo HTML kodea formatu egoki batean idazteko, kopiak egiteko eta bisual bihurtzeko aukeretako bat da. Hemen osagaiak sistema-lengoaia berezi batean idatzita daude: JSX, JavaScript programazio-lengoaiaren eta HTML markatze-lengoaia estandarizatuaren elementuak barne hartzen dituena.
JSXn idatzitako kodea nahiko zehatza da. Garrantzitsua da web arakatzaileak sistemaren hizkuntza hau ulertu behar ez izatea – React.JS kodea JSra transferitzen da, edozein arakatzaileek arazorik gabe hautematen duena. Horretarako, liburutegian sortutakoa konpilatzaile espezializatuetatik igarotzen da (gaur egun ezagunenetako bat Babel js da), programazio hizkuntza ezezagunetako kodeak JavaScript irudikapen bihurtzen dituztenak.
Hasieran badirudi erabilera sistema oso ilogikoa dela, baina pixka bat geroago ohitzen zara eta konturatzen zara zergatik diseinatu den mekanismoa horrela. JavaScript liburutegiak abantaila handi batzuk ditu:

• sistemaren programazio-lengoaia errazago ezagutzen da JavaScript ezaguna baino, eta, ondorioz, hainbat aldiz denbora gutxiago beharko du kodea onartzen eta bertan akatsak ezabatzeko (kode eta programa berriak idazteko abiadura handituko da horren arabera);
• elementu osagaien sistema eroso eta praktikoa eraikitzen da hemen – idazketa-fase desberdinetan eta programa desberdinetan erabiltzen diren kodearen zatiak errepikatuz, eta testuinguruaren arabera aldatzen dira;
• elementu osatzaile bakoitza bere egoeraren menpe dago soilik , beraz, errazagoa da kodearen akatsak zuzentzea praktikan bere lanean akats bat aurkitzen bada; une okerrak gainazalean flotatzen dira: behar bezala funtzionatzen duen elementu batek modu honetan egonkor funtzionatzen jarraituko du, baldin eta, noski, egoera okerra erabiltzen ez bada.

Horrela, ondoriozta dezakegu React.JS liburutegiak denbora asko aurreztu dezakeela, kodea zehatzagoa egin, sekuentzia ordena egokian antolatu eta bloke handiak berriro erabili. Abantaila hauek erabiltzaile-interfazeak sortzeko prozesuaren kostua murriztea ahalbidetzen dute, baita prozesu honen denbora azkartu ere. JS eta HTML programazio-lengoaia erabiltzeko trebetasunak edukita, JSX sistema erabiltzen ikastea erraza da – egun gutxi batzuk besterik ez dira menderatzeko.

Ohar! Arrazionala da liburutegia erabiltzea proiektu handiekin lan egiten denean, orrialde dinamiko ugari idaztea beharrezkoa denean. Enpresa txikien gune batek ez du halako konplexutasunik behar.

Erreakzionatu JS oinarrizko ikastaroa Atik Zra: https://youtu.be/GNrdg3PzpJQ

Hasiberrientzako ezagutza: oinarrizko kontzeptuak

Kaixo Mundua!

Liburutegiko lehen orrialdera sartzean, erabiltzaileak ongi etorria den goiburu bat ikusiko du adibide txiki gisa: “Kaixo mundua!”.

JSX sistema-lengoaiaren oinarriak

JSX sistemaren programazio lengoaia bat da, JavaScript ezagunaren luzapena. Bi hizkuntzaren konbinazioa barne hartzen du: JA programazioa eta HTML markatze-lengoaia estandarizatua. Garatzaileek kontzeptua doitzeko erabiltzen dute React erabiltzaile-interfazea nolakoa izan behar den erakusteko. JSX-k liburutegiaren “zatiak” sortzen ditu.

Zer da JSX?

React liburutegiak errendatzearen funtsa erabiltzailearen interfazearen logikarekin zuzenean lotuta dagoela dioen logikari atxikitzen du: gertaerak nola prozesatzen diren, egoera nola aldatzen den aldi jakin batean eta informazioa aurkezteko nola prestatzen den. JS liburutegia bere sistema-lengoaiarik gabe erabil daiteke, baina garatzaile ugariri baliotsua iruditzen zaio bere argitasunagatik eta zehatztasunagatik JavaScript kodetik sortutako erabiltzaile-interfaze batekin lan egitean. Horrez gain, luzapenak React-i erraztu egiten dio momentu baliogabeak eta erroreen jakinarazpenak sortzea.

Sistema-hizkuntzan esamoldeen eraketa

JSX-k giltza kizkurren barruan ondo idatzitako JavaScript adierazpenak erabiltzeko aukera ematen du prozesu batean.

JSX adierazpen bat ere bada . Iturburu-kodea bytedekatuta dagoenean, edozein JSX adierazpena JavaScript kategoriara zuzendutako JS funtzio-dei estandar bihurtzen da. Hortik uler daiteke programazio-lengoaia ofizialaren sistemaren hedapena if eskuliburuaren barruan eta epeetan erabil daitekeela.

JSX Objects da Luzapenaren bidez adierazten diren objektuei React elementu deitzen zaie. Garatzaileak pantailan ikusi nahi duen emaitza argitzen dute. Liburutegiak objektu hauek ezagutzen ditu eta dokumentu-objektuen eredua sortzeko eta mantentzeko prozesuan erabiltzen ditu.

Xehetasun errendatzea

Xehetasunak React programak osatzen dituzten bloke txiki asko dira.
Xehetasunak garatzaileak azkenean monitorean ikusi nahi duen argazkia dira. Document Object Model elementuekin alderatuta, liburutegiko elementuak sinpleak dira eta ez dute baliabide askorik hartzen. Elementuak osagaien osagaiak dira.

Osagaiak eta Atrezzoak

Osagaiek UI-a zati independenteetan banatzea ahalbidetzen dute, erraz lantzen direnak bereizita. Hainbat aldiz konbinatu eta erabil daitezke. Gehienetan, osagaien funtzionalitatea JavaScript programazio-lengoaiaren beraren funtzionalitatearen antzekoa da. Sarrerako informazioa hartzen dute, atrezzo deritzona, eta garatzaileak monitorean ikusi nahi duen garapen eredua adierazten duten React elementuak itzultzen dituzte.

Osagaien barietateak: funtzionalak eta klaseak

Liburutegiko osagai bat funtzio gisa aipatzea errazena da.
Osagaiak ES6 klase formatuan ere irudika daitezke.

Interesgarria! React liburutegiak bi osagai mota hauek antzeko gisa definitzen ditu.

atrezzo

Atrezzoak irakurtzeko soilik diren objektu aldaezinak dira. Beraz, osagai batek ez luke ezer idatzi behar bere atrezzoan, edozein motatakoa den ere.

Egoera eta bizi-zikloa

Lehenik eta behin, azter dezagun egoera nola aplikatu behar bezala lanean. Hiru gauza garrantzitsu jakin behar dira osagaien egoerari buruz:

1. Ez aldatu egoera zuzenean, erabili setState metodoa. Gogoratu egoera zuzenean alda dezakezun eremu bakarra eraikitzailea dela.
2. Baliteke egoera-eguneratzeak sinkronoak ez izatea.
3. Informazio-fluxuak norabide bakarra du. Osagaien eraikuntzan, horietako inork ez daki egoera beste osagai bati esleitzen zaion. Berdin du elementu funtzional independente hau edo hura nola eratu zen – funtzional edo sailkapen-tresna bat erabiliz. Horri “behean” deitzen zaio datu-fluxua. Egoera bat elementu batzuentzat definitzen da beti, eta egoera horren egitura-elkarteek ordena hierarkikoan “behean” kokatzen diren zatiei bakarrik eragin diezaiekete.

Normalean, estatua “tokikoa”, “barnekoa” edo ezkutua deitzen zaio. Elementu funtzionalarentzat baino ez da ikusgai eta React-eko beste atalentzat ikusezina. Liburutegiko programetan, elementu funtzional independente bat egoera jakin batekin hornituta dagoen ala ez zati honen barne garapena da, denborarekin alda daitekeena. Era berean, interesgarria da lanean konbinatu ditzakezula osagaiak egoerarekin eta gabe.

Gertaeren azterketa

React osagaietako gertaerak analizatzeko prozesua dokumentu-objektu-ereduaren elementuetako gertaerak kudeatzeko antzekoa da. Hala ere, elkarrengandik bereizten dituzten hainbat ezaugarri daude:

1. JavaScript liburutegiko gertaerak estandarra ez den beste estilo batean izendatzen dira.
2. System Extended Programming Language erabiliz, garatzaileak azpierrutina bat pasatzen du gertaeren kudeatzaile gisa kate baten ordez.

Elementuen errendatze baldintzatua

JavaScript liburutegiak elementuak garatzeko logika osagai independenteetan apurtzea ahalbidetzen du. Bistaratzeko modu orokorrean edo ezkutuan egon daitezke, unean uneko egoeraren arabera. Elementuen baldintzazko errendatzeak JavaScript programazio-lengoaian oinarritutako baldintzazko adierazpenen printzipio berdinean funtzionatzen du. Batzuetan gertatzen da liburutegiak egoerak elementu batzuen ezkutazioan edo errendatzean nola eragiten duen azaltzea eskatzen duela. Hemen logikoagoa da baldintzazko JS laguntzailea edo if-en antzeko esamoldeak erabiltzea.

Osagaiak aldatzea

React liburutegiko elementuak aldagaietan gehi daitezke. Irtenbide praktikoa da baldintzaren batek osagaiaren zatiren bat marraztu behar den ala ez adierazten duenean edo zentzurik ez duenean, gainerako zatia aldatu gabe geratzen den bitartean.

Zerrendak eta giltzak

Atal honek hainbat osagai ditu:

1. Hainbat elementu marraztea . Erabiltzaileak elementu multzo bat osatu eta sistemaren programazio-lengoaian txertatu dezake giltza kizkur erabiliz.
2. Elementuen zerrenda oinarrizkoa . Sarritan, erabiltzaileek eta garatzaileek zuzenean doitzen dituzte zerrendak osagai zati batean.

Giltzak

React JavaScript liburutegiko gako batek osagaien zerrenda sortzean sartu behar den tresna espezializatu bat adierazten du. Gakoek JavaScript liburutegiari zer elementu egokitu, gehitu edo kendu diren identifikatzen laguntzen dute. Garrantzitsua da horiek markatzea, React-ek egiturazko datuen osagaiak korrelaziona ditzan denbora jakin bat igaro ondoren.

Formak

JS liburutegian, markatze-lengoaia estandarizatuko elementuek dokumentu-objektu-ereduaren osagaiek baino apur bat ezberdinean funtzionatzen dute, inprimaki-elementuek hasiera batean ezkutuko egoera dutelako.

Kudeatutako elementuak

Markatze-lengoaia estandarizatu batean, input , select , textarea bezalako inprimakiek beren egoera mantendu ohi dute eta garatzaileak informazio berria sartzen duenean eguneratzen du. React.js egoerak idazketa-eremuen balioa definitzen du beti kudeatutako konposaketa-elementu batean. Horrek erabiltzaileak jatorrizko emandako kodea baino pixka bat gehiago idatzi behar duela adierazten badu ere, orain posible da balio hori erabiltzaile-interfazearen beste zati batzuetara pasatzea.

Estatuaren gorakada

State lifting estandarizatutako txantiloi bat da, garatzaile guztiek ezagutu eta lan prozesuan aplikatu ahal izateko. Erabiliz gero, egoera kudeatzeko eredu konplexuak eta normalean alferrikakoak ezabatuko dira.

Zergatik da hain beharrezkoa estatuaren gorakada kontrolatzea?

Estatua iraganeko osagaien mailara igotzea beharrezkoa da elementu guztiek estatuan parte hartu ahal izateko. Egoera-maila egonkor batek errazagoa izango du bertan oinarritzen diren osagai guztien artean banatzea.

Konposizioa vs Herentzia

React.js-ek konposizio-eredu sendoa dakar, beraz, gomendagarria da zatietatik osotasun bat eraikitzeko prozesua erabiltzea herentziaren ordez elementuen artean lehenago idatzitako kodea berrerabiltzeko. Horrela, atrezzoak eta osagai zatietatik osaera oso bat sortzeko gaitasunak elementuaren oskola eta portaera modu zehatz eta seguruan sortzeko behar den malgutasuna ematen dio garatzaileari.

Gogoratu! Osagai zatiek zerikusirik ez duten atrezzo har dezakete, liburutegiak edo funtzioak osatzen dituzten oinarrizko zatiak barne.

Osagaiekin bigarren edo hirugarren aldiz lan egiteko itxurarik gabeko funtzio bat erabili behar baduzu, atera JS modulu batera. Mugitu osagai batera eta erabili sortutako funtzioa gehiago hedatu gabe. React edo Vue edo Angular, zer aukeratu: https://youtu.be/Nm8GpLCAgwk

React.js printzipioak

JavaScript liburutegiaren filosofia osoa React gidan ezkutatuta dago. Badirudi hau luzea dela eta ez du hain garrantzi handikoa, hala ere, erabiltzaile askok irakurri ondoren dena bere lekuan geratu zela diote. Dokumentazioa nahiko zaharra da, baina oraindik ere balio eta garrantzi handikoa –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutoriala https://ru.reactjs.org/tutorial/tutorial.html

React.js liburutegiaren funtzionaltasuna

JavaScript liburutegia erabiliz, erabiltzaileak bere arreta guztia zuzenean emateko aukera du UI garapen-prozesuan eta aplikazioaren osagaietan, gutxienez idatzizko kodearen eraketa eta izan daitezkeen gabeziak distraituz. Liburutegiak programak azkarrago garatzeko aukera ematen du, osagaiak eta proiektu osoaren prozesuak konfiguratzea eta editatzea errazten du. Horrela, React.js-ek sare globaleko komunikazioaz arduratzen diren elementuak ditu, UI, programaren egoera kontrolatzeko eta beste arazo konplexu batzuk konpontzeko gaitasuna. Liburutegiak funtzio funtzional hauek ere baditu:

1. Praktikotasuna . React.js formatu txikituan dago eskuragarri. Pakete trinko hau ez da argi eta garbi konfiguratuta egon behar. Dagoeneko kodea zatitzeko eginbide bat dakar webgunearen arakatzailearen bertsioa irekitzeko denbora murrizten duena, aukera honek osagaiak aldi berean errendatzea eragozten baitu.
2. Pumped ekosistema eta betetzea . Liburutegian tresna ugari daude eskuragarri, beste gune batzuek lagunduta, eta horri esker, erabiltzaileak edozein helburutarako programa konplexu berriak garatzeko aukera ematen du.
3. Funtzionalitate osoa . JavaScript liburutegiaren abantaila nagusia da plataformaren bertsio berri guztiek zaharren eskakizunak betetzen dituztela, beraz, bertsio zaharra zein eguneratua erabil dezakezu, denak onartzen dira eta gaur egunera arte garrantzitsuak dira. Aurretik kaleratutako bertsioak ez dira zaharkitzen azken eguneraketen ondoren.

Erabilera praktikoa

Liburutegiko orrialde nagusian, erabiltzaileentzako argibideetan, React praktikan erabiltzeko hainbat adibide argigarri daude. Eskuz zuzendu ditzakezu eta exekutatzen saiatu. Nahiz eta erabiltzaile berria izan eta liburutegiaren funtsa eta logika ulertzen ez baduzu, egokitu kodea zure gustura eta ikusi emaitza.

React-en aplikazio praktikoa JavaScript-en merkataritza-robotak idaztean

Garrantzitsua da konturatzea garatzaile batek ez duela JS programatzen, script-ak (script-ak) idazten dituela baizik. beraz, liburutegia erabiliz, garatzaile batek merkataritza helburuetarako erabilitako ondorengo merkataritza-robot baterako kodea idatzi dezake eta, gainera, bere itxura diseinatzen jarrai dezake plataforma honetan oinarrituta. Izan ere, merkataritzarako robot bat aplikazio bat ere bada, eta horietako asko React.js erabiliz garatzen ari dira. Hala ere, funtzio batzuk eta bot-aren barneko zatia horretarako tresna egokiak eskaintzen dituzten beste gune batzuetan egin beharko dira oraindik.

GitHub eta React.js

GitHub proiektuen bertsio guztiak hartzen dituen plataforma bat da. Erabiltzaileak hostinga konektatzen du, GitHub webgune ofizialean erregistratzeko prozedura egiten du eta, ondoren, lineako biltegi bat sortzen du, non Git-etik fitxategi guztiak transferitzen dituen.
Git gaur egungo proiektuen bertsio-kontrol zerbitzurik ezagunena eta garrantzitsuena da, eta GitHub urruneko kode biltegi bat da.

Erreferentzia! Baimenarekin lotura egokia jaso duten erabiltzaileek soilik dute fitxategiak editatzeko eta deskargatzeko sarbidea.

Dokumentazioa

JavaScript liburutegiari buruzko tutorial eta material eguneratu guztiak azken eguneraketarekin eguneratuta daude. Garatzaileek dokumentazioaren bertsio zaharrak orokorrean irakurtzeko konpilatu eta argitaratzen dituzte, liburutegiko orrialde bereizi batean argitaratuak. Hori dela eta, hasiberrientzat errazagoa izango da guneen kudeaketarako trebetasunak menderatzea: material zaharra zein berria – dena dago hemen, sarbidea doakoa da guztiontzat.

Ohar! Ez ahaztu eskuliburuak irakurtzea. Begiratu bederen – dagoeneko ulergaitza zirudien gehiena tokian sartuko da.

React liburutegia gaur egun plataforma ezaguna eta garrantzitsua da. Bere aldakortasunari esker, garatzaileek kalitate hobeagoko proiektuak egin ditzakete eta denbora gutxiagoan. Gainera, plataforma ezagutzeak eta hura erabiltzeko gaitasunak izateak espezialista bat eskatzen du lan merkatuan.