React.JS para sa mga baguhan na dummies, gamit ang library kapag nagsusulat ng mga trading robot

Ano ang React JS para sa mga baguhan na dummies, ano ito, mga tutorial, pag-install, dokumentasyon – kung paano i-install at gamitin ang React JS library kapag nagsusulat ng mga robot na pangkalakal. Kadalasan sa mga advertisement ng trabaho para sa mga espesyalista sa computer, makakahanap ka ng kinakailangan na nagsasabing mayroon kang mga kasanayan sa JavaScript library. Oo, at inaasahan nila ang kaalaman sa React hindi lamang mula sa mga developer ng software, kundi pati na rin mula sa mga programmer na nakikibahagi sa panloob na pag-unlad ng site, at hindi panlabas na disenyo. Anong uri ng silid-aklatan ito, anong mga pagkakataon ang ibinibigay nito sa trabaho, at saan nagsisimulang makilala ang isang baguhan? Alamin natin ito sa artikulong ito.

JavaScript library – React: ano ito

Ang React.JS ay isang library ng sikat na
JavaScript programming language , na binuo ng online na social network na Facebook upang mapabuti at pasimplehin ang proseso ng pagbuo ng panlabas na shell ng mga site at application – ang interface kung saan nakikipag-ugnayan ang user. Ang pangunahing tampok ng aklatan ay mga bahagi at estado. Ang isang bahagi ay isang bahagi ng isang digital set na responsable para sa hitsura ng isang partikular na bahagi ng system na idinisenyo.

Tandaan! Maaaring nested ang mga nasabing bahagi ng bahagi.

Ang isang estado ay isang koleksyon ng lahat ng data tungkol sa mga detalye ng isang interface, kasama ang representasyonal na pag-render nito. Gamit ang mga halimbawa, malalaman natin nang mas detalyado at malinaw kung ano. Ang larawan sa ibaba ay nagpapakita ng ilan sa mga malalaking bahagi – pag-post sa isang online na social network, isang seksyon na may pangkalahatang impormasyon at pagpapakita ng mga larawan. Kasama sa bawat bahagi ang mas maliliit na bahagi, na siyang mga bahagi. Halimbawa, ang isang publikasyon ay naglalaman ng teksto, mga larawan, ang pangalan ng gumagamit na nag-publish ng impormasyon, atbp. Kasama sa seksyon ng imahe ang mga indibidwal na larawan, at ang seksyon ng pangkalahatang impormasyon ay naglalaman ng maikling impormasyon.
Ang bawat isa sa mga sangkap na ito (mga bahagi) ay may estado. Iyon ay, ang seksyon na may pangkalahatang impormasyon ay magmukhang iba sa iba’t ibang mga device, ang “like” na elemento ay nagbabago ng kulay kapag pinindot at ang numero na responsable para sa kabuuang bilang ng mga gusto; ang publikasyon, sa turn, ay maaaring paikliin ang teksto o ipadala ito nang buo.

Kaya, ang kakayahang umangkop ng React.JS ay ipinahayag – ang bahagi ng interface ay isinulat nang isang beses, at pagkatapos nito ay ibinigay ang lahat ng posibleng estado.

Bakit kailangan ang React library?

Ang React.JS ay isa sa mga posibleng opsyon para magsulat ng JS o HTML code sa isang maginhawang format, bumuo ng mga kopya nito at gawin itong visual. Ang mga bahagi dito ay nakasulat sa isang espesyal na wika ng system – JSX, na kinabibilangan ng mga elemento ng JavaScript programming language at ang standardized HTML markup language.
Ang code na nakasulat sa JSX ay medyo tiyak. Mahalaga rin na hindi kailangang maunawaan ng web browser ang wika ng system na ito – ang React.JS code ay inililipat sa JS, na nakikita ng anumang browser nang walang mga problema. Upang gawin ito, ang nilikha sa library ay ipinapasa sa pamamagitan ng mga dalubhasang compiler (isa sa mas sikat ngayon ay ang Babel js), na nagko-convert ng mga code sa hindi gaanong kilalang mga programming language sa mga representasyon ng JavaScript.
Sa una ay maaaring mukhang ang sistema ng paggamit ay lubhang hindi makatwiran, ngunit pagkaraan ng ilang sandali ay nasanay ka na at napagtanto mo kung bakit ang mekanismo ay dinisenyo sa ganoong paraan. Ang JavaScript library ay may ilang matitinding pakinabang:

• ang wika ng programming ng system ay mas madaling makilala kaysa sa kilalang JavaScript, at dahil dito, kakailanganin ng ilang beses na mas kaunting oras upang suportahan ang code at alisin ang mga error dito (ang bilis ng pagsulat ng mga bagong code at programa ay tataas nang naaayon);
• isang maginhawa at praktikal na sistema ng mga elemento ng bumubuo ay binuo dito – paulit-ulit na mga bahagi ng code na ginagamit sa iba’t ibang yugto ng pagsulat at sa iba’t ibang mga programa, at nagbabago din depende sa konteksto;
• ang bawat elemento ng nasasakupan ay nasa ilalim lamang ng estado nito , samakatuwid mas madaling iwasto ang mga pagkukulang sa code kung ang isang error ay biglang natagpuan sa gawain nito sa pagsasanay; ang mga maling sandali ay lumutang sa ibabaw: ang isang elemento na gumagana nang maayos ay patuloy na gagana nang matatag sa mode na ito, maliban kung, siyempre, ang maling estado ay ginamit kaugnay nito.

Kaya, maaari nating tapusin na ang React.JS library ay maaaring makatipid ng maraming oras, gawing mas tiyak ang code, ayusin ang pagkakasunud-sunod sa tamang pagkakasunud-sunod, at gumamit muli ng malalaking bloke. Ginagawang posible ng mga bentahe na ito na bawasan ang gastos ng proseso ng paglikha ng mga interface ng gumagamit, pati na rin mapabilis ang oras ng mismong prosesong ito. Ang pagkakaroon ng mga kasanayan sa paggamit ng JS at HTML programming language, ang pag-aaral na gamitin ang system na JSX ay madali – ilang araw na lang para makabisado ito.

Tandaan! Makatuwiran na gamitin ang library kapag nagtatrabaho sa malalaking proyekto, kapag kinakailangan na magsulat ng isang malaking bilang ng mga dynamic na pahina. Ang isang maliit na site ng negosyo ay hindi nangangailangan ng gayong mga kumplikado.

Mag-react sa pangunahing kurso ng JS mula A hanggang Z: https://youtu.be/GNrdg3PzpJQ

Kakilala para sa mga nagsisimula: mga pangunahing konsepto

Hello Mundo!

Kapag ina-access ang unang pahina ng library, makikita ng user ang isang welcome heading bilang isang maliit na halimbawa – “Hello world!”.

Mga pangunahing kaalaman ng JSX system language

Ang JSX ay isang system programming language, isang extension ng kilalang JavaScript. Kasama dito ang kumbinasyon ng dalawang wika – JA programming at ang standardized HTML markup language. Ginagamit ito ng mga developer para isaayos ang konsepto para ipakita ang React kung ano dapat ang hitsura ng user interface. Ginagawa ng JSX ang “mga bahagi” ng library.

Ano ang JSX?

Ang React library ay sumusunod sa lohika na ang kakanyahan ng pag-render ay direktang nauugnay sa lohika ng user interface: kung paano pinoproseso ang mga kaganapan, kung paano nagbabago ang estado sa isang partikular na panahon, at kung paano inihahanda ang impormasyon para sa presentasyon. Ang library ng JS ay maaaring gamitin nang wala ang wika ng system nito, ngunit nakikita ng malaking bilang ng mga developer na mahalaga ito dahil sa kalinawan at pagiging konkreto nito kapag nagtatrabaho sa isang user interface na nabuo mula sa JavaScript code. Bilang karagdagan, ginagawang mas madali ng extension para sa React na bumuo ng mga di-wastong sandali at mga notification ng error.

Pagbuo ng mga expression sa wika ng system

Binibigyang-daan ka ng JSX na gumamit ng anumang mahusay na pagkakasulat na mga expression ng JavaScript sa loob ng mga kulot na brace sa isang proseso.

Ang JSX ay isa ring expression Kapag ang source code ay na-bytecode, anumang JSX expression ay magiging isang karaniwang JS function na tawag na nagta-target sa kategorya ng JavaScript. Mula dito ay mauunawaan na ang system extension ng opisyal na programming language ay maaaring gamitin sa loob ng if manual at para sa mga panahon.

Ang JSX ay Mga Bagay Ang mga bagay na kinakatawan ng extension ay tinatawag na React elements. Nilinaw nila ang resulta na gustong makita ng developer sa display. Kinikilala ng library ang mga bagay na ito at ginagamit ang mga ito sa proseso ng pagbuo at pagpapanatili ng Document Object Model.

Pag-render ng detalye

Ang mga detalye ay ang maraming maliliit na bloke na bumubuo sa mga programa ng React.
Ang mga detalye ay ang larawan na gustong makita ng developer sa dulo sa monitor. Kung ikukumpara sa mga elemento ng Document Object Model, ang mga elemento ng library ay simple at hindi kumukuha ng maraming mapagkukunan. Ang mga elemento ay ang mga bumubuo ng mga sangkap.

Mga Bahagi at Props

Ginagawang posible ng mga bahagi na hatiin ang UI sa mga independiyenteng bahagi, na mas madaling magtrabaho nang hiwalay. Maaari silang pagsamahin at gamitin nang maraming beses. Para sa karamihan, ang functionality ng mga bahagi ay katulad ng functionality ng JavaScript programming language mismo. Kinukuha nila ang impormasyon ng input, na tinatawag na props, at nagbabalik ng mga elemento ng React na nagpapahiwatig ng modelo ng pag-develop na gustong makita ng developer sa monitor.

Mga uri ng mga bahagi: functional at klase

Pinakamadaling mag-refer sa isang bahagi ng library bilang isang function.
Ang mga bahagi ay maaari ding irepresenta sa format ng klase ng ES6.

Interesting! Ang React library ay tumutukoy sa dalawang uri ng mga bahagi na ito bilang magkatulad.

props

Ang mga prop ay mga hindi nababagong bagay na read-only. Samakatuwid, ang isang bahagi ay hindi dapat sumulat ng anuman sa mga props nito, kahit anong uri ito nabibilang.

Estado at ikot ng buhay

Una, alamin natin kung paano maayos na ilapat ang estado sa trabaho. Mayroong tatlong mahahalagang bagay na dapat malaman tungkol sa estado ng bahagi:

1. Huwag baguhin ang estado nang direkta, gamitin ang setState method. Tandaan na ang tanging lugar kung saan maaari mong baguhin ang estado nang direkta ay ang tagabuo.
2. Maaaring hindi magkasabay ang mga update ng estado.
3. Ang daloy ng impormasyon ay may isang direksyon. Sa pagbuo ng bahagi, wala sa kanila ang nakakaalam kung ang estado ay itinalaga sa ibang bahagi. Hindi mahalaga kung paano ito o ang independiyenteng functional na elementong iyon ay nabuo – gamit ang isang functional o tool sa pag-uuri. Ito ay tinatawag na “downstream” na daloy ng data. Ang isang estado ay palaging tinukoy para sa ilang elemento, at ang mga istrukturang asosasyon ng estado na ito ay maaari lamang makaapekto sa mga bahagi na matatagpuan “sa ibaba” sa hierarchical na pagkakasunud-sunod.

Karaniwan, ang estado ay tinutukoy bilang “lokal”, “panloob”, o nakatago. Nakikita lamang ito ng mismong functional na elemento at hindi nakikita ng ibang bahagi ng React. Sa mga programa sa aklatan, kung ang isang independiyenteng functional na elemento ay pinagkalooban ng isang tiyak na estado o hindi ay isang panloob na pag-unlad ng bahaging ito, na maaaring magbago sa paglipas ng panahon. Ito rin ay kagiliw-giliw na sa trabaho maaari mong pagsamahin ang mga bahagi na may at walang estado.

Pagsusuri ng kaganapan

Ang proseso ng pag-parse ng mga kaganapan sa mga bahagi ng React ay katulad ng paghawak ng mga kaganapan sa mga elemento ng modelo ng object ng dokumento. Gayunpaman, mayroong ilang mga tampok na nagpapakilala sa kanila sa bawat isa:

1. Ang mga kaganapan sa JavaScript library ay pinangalanan sa ibang istilo kaysa sa karaniwan.
2. Gamit ang System Extended Programming Language, ipinapasa ng developer ang isang subroutine bilang isang event handler sa halip na isang string.

Kondisyon na pag-render ng mga elemento

Ginagawang posible ng JavaScript library na masira ang lohika ng pagbuo ng mga elemento sa mga independiyenteng bahagi. Maaaring ipakita ang mga ito para sa pangkalahatang pagpapakita o nakatago, depende sa kung anong estado ang pinagkalooban sa kanila sa ngayon. Gumagana ang conditional rendering ng mga elemento sa parehong prinsipyo tulad ng conditional expression batay sa JavaScript programming language. Minsan nangyayari na ang library ay nangangailangan ng paliwanag kung paano nakakaapekto ang estado sa pagtatago o pag-render ng ilang elemento. Dito mas lohikal na gumamit ng conditional JS helper o mga expression na katulad ng if.

Pagbabago ng mga Bahagi

Ang mga elemento ng React library ay maaaring idagdag sa mga variable. Ito ay isang praktikal na solusyon kapag ang ilang kundisyon ay nagpapahiwatig kung ang ilang bahagi ng bahagi ay dapat iguhit, o hindi ito makatuwiran, habang ang natitirang bahagi ay nananatiling hindi nagbabago.

Mga Listahan at Susi

Kasama sa seksyong ito ang ilang bahagi:

1. Pagguhit ng maraming elemento . Ang user ay maaaring bumuo ng isang set ng mga elemento at i-embed ito sa system programming language gamit ang curly braces.
2. Listahan ng elementarya ng mga elemento . Kadalasan, direktang inaayos ng mga user at developer ang mga listahan sa loob ng isang bahaging bahagi.

Mga susi

Ang isang susi sa React JavaScript library ay tumutukoy sa isang espesyal na tool na dapat ilagay kapag bumubuo ng isang listahan ng mga bahagi. Tinutulungan ng mga key ang JavaScript library na matukoy kung aling mga item ang naayos, idinagdag, o inalis. Mahalagang markahan ang mga ito upang maiugnay ng React ang mga bahagi ng structural data pagkatapos lumipas ang isang tiyak na tagal ng oras.

Mga porma

Sa library ng JS, ang mga elemento ng standardized markup language ay gumagana nang medyo naiiba kaysa sa mga bahagi ng modelo ng object ng dokumento, dahil ang mga elemento ng form sa una ay may nakatagong estado.

Mga Pinamamahalaang Item

Sa isang standardized markup language, ang mga form tulad ng input , select , textarea ay may posibilidad na panatilihin ang kanilang sariling estado at i-update ito kapag nagpasok ang developer ng bagong impormasyon. Palaging tinutukoy ng estado ng React.js ang halaga ng mga input field sa isang pinamamahalaang elemento ng pagbubuo. Bagama’t ipinapahiwatig nito na ang user ay dapat magsulat ng higit pa sa orihinal na ibinigay na code, posible na ngayong ipasa ang halagang ito sa ibang bahagi ng user interface.

Ang pagtaas ng estado

Ang state lifting ay isang standardized na template na dapat malaman ng bawat developer at mailapat sa proseso ng trabaho. Ang paggamit nito ay mag-aalis ng kumplikado at karaniwang walang silbi na mga pattern ng pamamahala ng estado.

Bakit kailangang kontrolin ang pag-angat ng estado?

Ang pagtaas ng estado sa antas ng mga nakaraang bahagi para sa mga bahaging iyon na nangangailangan nito ay kinakailangan upang ang lahat ng elemento ay makalahok sa estado. Ang isang matatag na antas ng estado ay gagawing mas madaling ipamahagi ito sa lahat ng mga sangkap na umaasa dito.

Komposisyon kumpara sa Mana

Ang React.js ay may kasamang matibay na modelo ng komposisyon, kaya inirerekomendang gamitin ang proseso ng pagbuo ng isang kabuuan mula sa mga bahagi sa halip na pamana upang muling gamitin ang code na nakasulat nang mas maaga sa pagitan ng mga elemento. Kaya, ang mga props at ang kakayahang lumikha ng isang solong buong komposisyon mula sa mga bahagi ng bahagi, ay nagbibigay sa developer ng kakayahang umangkop na kinakailangan upang lumikha ng shell at pag-uugali ng elemento sa isang tiyak at ligtas na paraan.

Paalala! Maaaring kumuha ng mga hindi nauugnay na props ang mga bahagi ng bahagi, kabilang ang mga elementaryang bahagi na bumubuo sa mga aklatan o function.

Kung kailangan mong gumamit ng function na walang hitsura para sa pagtatrabaho sa mga bahagi sa pangalawa o pangatlong beses, hilahin ito sa isang hiwalay na JS module. Ilipat ito sa isang bahagi at gamitin ang nabuong function nang walang karagdagang pagpapalawak. Mag-react o Vue o Angular, kung ano ang pipiliin: https://youtu.be/Nm8GpLCAgwk

Mga Prinsipyo ng React.js

Nakatago ang buong pilosopiya ng JavaScript library sa React guide. Tila ito ay mahaba at hindi gaanong kahalagahan, gayunpaman, maraming mga gumagamit ang nag-aangkin na pagkatapos basahin ang lahat ay nahulog sa lugar. Medyo luma na ang dokumentasyon, ngunit may malaking halaga at kaugnayan pa rin –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Functionality ng React.js library

Gamit ang JavaScript library, nagkakaroon ng pagkakataon ang user na direktang bigyang-pansin ang proseso ng pag-develop ng UI at ang mga bahagi ng application, hindi bababa sa lahat ay naabala ng pagbuo at posibleng mga pagkukulang ng nakasulat na code. Binibigyang-daan ka ng library na bumuo ng mga programa nang mas mabilis, ginagawang mas madaling i-configure at i-edit ang mga bahagi at ang proseso ng buong proyekto sa kabuuan. Kaya, ang React.js ay naglalaman ng mga elementong responsable para sa komunikasyon sa pandaigdigang network, UI, kontrol ng estado ng programa at ang kakayahang lutasin ang iba pang mga kumplikadong isyu. Ang library ay mayroon ding mga sumusunod na functional na tampok:

1. Praktikal . Available ang React.js sa pinaliit na format. Ang compact package na ito ay hindi kailangang malinaw na i-configure. May kasama na itong feature sa paghahati ng code na nagpapababa sa oras na kinakailangan upang buksan ang bersyon ng browser ng site, dahil pinipigilan ng opsyong ito ang mga bahagi na mag-render nang sabay.
2. Pumped ecosystem at pagsunod . Ang isang malaking bilang ng mga tool ay magagamit sa library, suportado ng iba pang mga site, na nagpapahintulot sa gumagamit na bumuo ng mga bagong kumplikadong mga programa para sa anumang layunin.
3. Buong pag-andar . Ang pangunahing bentahe ng JavaScript library ay ang lahat ng mga bagong bersyon ng platform ay nakakatugon sa mga kinakailangan ng mga luma, kaya maaari mong gamitin ang luma at ang na-update na bersyon, lahat ng mga ito ay suportado at may kaugnayan sa araw na ito. Ang mga dating inilabas na bersyon ay hindi nagiging lipas pagkatapos ng mga pinakabagong update.

Praktikal na paggamit

Sa pangunahing pahina ng library, sa mga tagubilin para sa mga user, mayroong ilang mga halimbawa ng paglalarawan ng paggamit ng React sa pagsasanay. Maaari mong manu-manong iwasto ang mga ito at subukang patakbuhin ang mga ito. Kahit na ikaw ay isang bagong user at hindi nauunawaan ang kakanyahan at lohika ng library, ayusin ang code ayon sa gusto mo at tingnan ang resulta.

Praktikal na aplikasyon ng React kapag nagsusulat ng mga robot sa pangangalakal sa JavaScript

Mahalagang matanto na ang isang developer ay hindi nagprograma ng JS, ngunit nagsusulat ng mga script (mga script). samakatuwid, gamit ang library, ang isang developer ay maaaring magsulat ng code para sa isang kasunod na trading robot na ginagamit para sa mga layunin ng pangangalakal, at patuloy ding magdisenyo ng hitsura nito batay sa platform na ito. Sa katunayan, ang isang trading robot para sa pangangalakal ay isa ring application, kung saan ang isang malaking bilang ay binuo gamit ang React.js. Gayunpaman, ang ilang mga function at ang panloob na bahagi ng bot ay kailangan pa ring gawin sa ibang mga site na nagbibigay ng mga tool na angkop para dito.

GitHub at React.js

Ang GitHub ay isang platform na nagho-host ng lahat ng bersyon ng mga proyekto. Ikinokonekta ng user ang pagho-host, dumaan sa pamamaraan ng pagpaparehistro sa opisyal na website ng GitHub, at pagkatapos ay gagawa ng online na repositoryo kung saan inililipat niya ang lahat ng mga file mula sa Git.
Ang Git ay ang pinakasikat at may-katuturang serbisyo sa pagkontrol ng bersyon ng proyekto ngayon, at ang GitHub ay isang malayuang imbakan ng code.

Sanggunian! Tanging ang mga user na nakatanggap ng naaangkop na link na may pahintulot ang may access sa pag-edit at pag-download ng mga file.

Dokumentasyon

Ang lahat ng mga tutorial at up-to-date na materyales tungkol sa JavaScript library ay napapanahon sa pinakabagong update. Nag-compile at nag-post din ang mga developer para sa pangkalahatang pagbabasa ng mga lumang bersyon ng dokumentasyon, na nai-post sa isang hiwalay na pahina ng library. Samakatuwid, magiging mas madali para sa mga nagsisimula na makabisado ang mga kasanayan sa pamamahala ng site: parehong luma at bagong materyal – lahat ay narito, ang pag-access ay libre para sa lahat.

Tandaan! Huwag kalimutang basahin ang mga manwal. Tingnan mo man lang – ang karamihan sa tila hindi maintindihan ay mahuhulog sa lugar.

Ang React library ay isang sikat at may-katuturang platform ngayon. Ang versatility nito ay nagbibigay-daan sa mga developer na gumawa ng mga proyekto ng mas mahusay na kalidad at sa mas kaunting oras. Bilang karagdagan, ang pag-alam sa platform at pagkakaroon ng mga kasanayan sa paggamit nito ay ginagawang mas in demand ang isang espesyalista sa labor market.