React JS ni nini kwa dummies zinazoanza, ni nini, mafunzo, usakinishaji, hati – jinsi ya kusakinisha na kutumia maktaba ya React JS wakati wa kuandika roboti za biashara. Mara nyingi katika matangazo ya kazi kwa wataalamu wa kompyuta, unaweza kupata mahitaji ambayo inasema kwamba una ujuzi katika maktaba ya JavaScript. Ndiyo, na wanatarajia ujuzi wa React sio tu kutoka kwa watengenezaji wa programu, lakini pia kutoka kwa watengenezaji wa programu ambao wanahusika katika maendeleo ya ndani ya tovuti, na sio muundo wa nje. Hii ni maktaba ya aina gani, inatoa fursa gani katika kazi, na anayeanza anaanza wapi kufahamiana? Hebu tufikirie katika makala hii.
- Maktaba ya JavaScript – React: ni nini
- Kwa nini maktaba ya React inahitajika?
- Ujuzi kwa Kompyuta: dhana za kimsingi
- Salamu, Dunia!
- Misingi ya lugha ya mfumo wa JSX
- JSX ni nini?
- Uundaji wa misemo katika lugha ya mfumo
- Utoaji wa kina
- Vipengele na Props
- Aina ya vipengele: kazi na darasa
- vifaa
- Hali na mzunguko wa maisha
- Uchambuzi wa tukio
- Utoaji wa masharti wa vipengele
- Kubadilisha Vipengele
- Orodha na Vifunguo
- Funguo
- Fomu
- Vipengee Vinavyosimamiwa
- Kuinuka kwa serikali
- Kwa nini ni muhimu sana kudhibiti kuongezeka kwa serikali?
- Utungaji dhidi ya Urithi
- Kanuni za React.js
- Utendaji kazi wa maktaba ya React.js
- Matumizi ya vitendo
- Utumiaji wa vitendo wa React wakati wa kuandika roboti za biashara kwenye JavaScript
- GitHub na React.js
- Nyaraka
Maktaba ya JavaScript – React: ni nini
React.JS ni maktaba ya lugha maarufu ya
programu ya JavaScript , iliyoundwa na mtandao wa kijamii wa mtandaoni wa Facebook ili kuboresha na kurahisisha mchakato wa kuunda ganda la nje la tovuti na programu – kiolesura ambacho mtumiaji huingiliana. Kipengele kikuu cha maktaba ni vipengele na majimbo. Sehemu ni sehemu ya seti ya dijiti ambayo inawajibika kwa kuonekana kwa sehemu fulani ya mfumo inayoundwa.
Kumbuka! Sehemu za sehemu kama hizo zinaweza kuwekwa.
Jimbo ni mkusanyiko wa data yote kuhusu maelezo ya kiolesura, ikijumuisha uwasilishaji wake wa uwakilishi. Kwa kutumia mifano, tutajua kwa undani zaidi na kwa uwazi ni nini. Picha hapa chini inaonyesha baadhi ya vipengele vikubwa – kuchapisha kwenye mtandao wa kijamii wa mtandaoni, sehemu yenye maelezo ya jumla na kuonyesha picha. Kila sehemu inajumuisha vipengele vidogo, ambavyo ni vipengele. Kwa mfano, chapisho lina maandishi, picha, jina la mtumiaji anayechapisha habari, n.k. Sehemu ya picha inajumuisha picha za kibinafsi, na sehemu ya habari ya jumla ina habari fupi.
Kila moja ya vipengele hivi (vipengele) vina hali. Hiyo ni, sehemu iliyo na maelezo ya jumla itaonekana tofauti kwenye vifaa tofauti, kipengele cha “kama” kinabadilisha rangi wakati wa kushinikizwa na nambari inayohusika na jumla ya idadi ya kupenda; uchapishaji, kwa upande wake, unaweza kufupisha maandishi au kusambaza kwa ukamilifu.
Kwa hivyo, kubadilika kwa React.JS kunaonyeshwa – sehemu ya interface imeandikwa mara moja, na baada ya hapo inapewa majimbo yote iwezekanavyo.
Kwa nini maktaba ya React inahitajika?
React.JS ni mojawapo ya chaguo zinazowezekana za kuandika msimbo wa JS au HTML katika umbizo linalofaa, kuunda nakala zake na kuifanya ionekane. Vipengee hapa vimeandikwa katika lugha maalum ya mfumo – JSX, ambayo inajumuisha vipengele vya lugha ya programu ya JavaScript na lugha sanifu ya HTML.
Nambari iliyoandikwa katika JSX ni maalum kabisa. Pia ni muhimu kwamba kivinjari cha wavuti haipaswi kuelewa lugha ya mfumo huu – msimbo wa React.JS huhamishiwa kwa JS, ambayo kivinjari chochote hutambua bila matatizo. Ili kufanya hivyo, kile kilichoundwa kwenye maktaba hupitishwa kupitia watunzi maalum (moja ya maarufu zaidi leo ni Babeli js), ambayo hubadilisha nambari katika lugha zisizojulikana sana za programu kuwa uwakilishi wa JavaScript.
Mara ya kwanza inaweza kuonekana kuwa mfumo wa matumizi hauna mantiki sana, lakini baada ya muda unaizoea na unagundua kwa nini utaratibu umeundwa kwa njia hiyo. Maktaba ya JavaScript ina idadi ya faida kali:
- lugha ya programu ya mfumo ni rahisi kutambua kuliko JavaScript inayojulikana, na kwa hiyo, itachukua muda mara kadhaa chini ya kuunga mkono msimbo na kuondoa makosa juu yake (kasi ya kuandika kanuni mpya na programu itaongezeka ipasavyo);
- mfumo rahisi na wa vitendo wa vitu vya msingi umejengwa hapa – kurudia sehemu za nambari ambazo hutumiwa katika hatua tofauti za uandishi na katika programu tofauti, na pia hubadilika kulingana na muktadha;
- kila kipengele kiko chini ya hali yake tu , kwa hivyo ni rahisi kusahihisha mapungufu katika nambari ikiwa kosa litapatikana ghafla katika kazi yake katika mazoezi; wakati usio sahihi huelea kwenye uso: kipengele kinachofanya kazi vizuri kitaendelea kufanya kazi kwa utulivu katika hali hii, isipokuwa, bila shaka, hali mbaya inatumiwa kuhusiana nayo.
Kwa hivyo, tunaweza kuhitimisha kwamba maktaba ya React.JS inaweza kuokoa muda mwingi, kufanya msimbo maalum zaidi, kupanga mlolongo kwa utaratibu sahihi, na kutumia vitalu vikubwa tena. Faida hizi hufanya iwezekanavyo kupunguza gharama ya mchakato wa kuunda miingiliano ya watumiaji, na pia kuharakisha wakati wa mchakato huu. Kuwa na ujuzi wa kutumia lugha ya programu ya JS na HTML, kujifunza kutumia mfumo wa JSX ni rahisi – siku chache tu kuumaliza.
Kumbuka! Ni busara kutumia maktaba wakati wa kufanya kazi na miradi mikubwa, wakati ni muhimu kuandika idadi kubwa ya kurasa zenye nguvu. Tovuti ndogo ya biashara haihitaji ugumu kama huo.
Jibu kozi ya kimsingi ya JS kutoka A hadi Z: https://youtu.be/GNrdg3PzpJQ
Ujuzi kwa Kompyuta: dhana za kimsingi
Salamu, Dunia!
Wakati wa kufikia ukurasa wa kwanza wa maktaba, mtumiaji ataona kichwa cha kukaribisha kama mfano mdogo – “Hujambo ulimwengu!”.
Misingi ya lugha ya mfumo wa JSX
JSX ni lugha ya programu ya mfumo, kiendelezi cha JavaScript inayojulikana. Inajumuisha mchanganyiko wa lugha mbili – programu ya JA na lugha sanifu ya alama ya HTML. Wasanidi huitumia kurekebisha dhana ili kuonyesha React haswa jinsi kiolesura cha mtumiaji kinapaswa kuonekana. JSX huunda “sehemu” za maktaba.
JSX ni nini?
Maktaba ya React hufuata mantiki kwamba kiini cha uwasilishaji kinahusiana moja kwa moja na mantiki ya kiolesura cha mtumiaji: jinsi matukio yanavyochakatwa, jinsi hali inavyobadilika katika kipindi fulani, na jinsi maelezo yanavyotayarishwa kwa ajili ya kuwasilishwa. Maktaba ya JS inaweza kutumika bila lugha ya mfumo wake, lakini idadi kubwa ya watengenezaji wanaona kuwa ya thamani kutokana na uwazi na uwazi wake wakati wa kufanya kazi na kiolesura cha mtumiaji kinachozalishwa kutoka kwa msimbo wa JavaScript. Kwa kuongeza, kiendelezi hurahisisha React kutoa arifa za hitilafu na wakati batili.
Uundaji wa misemo katika lugha ya mfumo
JSX hukuruhusu kutumia maneno yoyote ya JavaScript yaliyoandikwa vizuri ndani ya viunga vilivyojipinda katika mchakato.
JSX pia ni usemi Mara tu msimbo wa chanzo unapochapishwa, usemi wowote wa JSX hubadilika kuwa simu ya kawaida ya utendaji ya JS ambayo inalenga aina ya JavaScript. Kutokana na hili inaweza kueleweka kuwa upanuzi wa mfumo wa lugha rasmi ya programu inaweza kutumika ndani ya ikiwa mwongozo na kwa muda.
JSX ni Vipengee Vipengee vinavyowakilishwa na kiendelezi huitwa vipengele vya React. Wanafafanua matokeo ambayo msanidi anataka kuona kwenye onyesho. Maktaba hutambua vitu hivi na kuvitumia katika mchakato wa kutengeneza na kudumisha Mfano wa Kitu cha Hati.
Utoaji wa kina
Maelezo ni vizuizi vingi vidogo vya ujenzi vinavyounda programu za React.
Maelezo ni picha ambayo msanidi anataka kuona mwisho kwenye kifuatilia. Ikilinganishwa na vipengele vya Mfano wa Kitu cha Hati, vipengele vya maktaba ni rahisi na havichukui rasilimali nyingi. Vipengele ni vipengele vya vipengele.
Vipengele na Props
Vipengele hufanya iwezekanavyo kugawanya UI katika sehemu za kujitegemea, ambazo ni rahisi kufanya kazi tofauti. Wanaweza kuunganishwa na kutumika mara kadhaa. Kwa sehemu kubwa, utendaji wa vipengele ni sawa na utendaji wa lugha ya programu ya JavaScript yenyewe. Wanachukua maelezo ya ingizo, ambayo huitwa props, na kurudisha vipengele vya React ambavyo vinaonyesha muundo wa usanidi ambao msanidi programu anataka kuona kwenye kifuatilia.
Aina ya vipengele: kazi na darasa
Ni rahisi kurejelea sehemu ya maktaba kama chaguo la kukokotoa.
Vipengele vinaweza pia kuwakilishwa katika umbizo la darasa la ES6.
Inavutia! Maktaba ya React inafafanua aina hizi mbili za vipengele kuwa sawa.
vifaa
Viigizo ni vitu visivyoweza kubadilika ambavyo vinasomwa tu. Kwa hivyo, sehemu haipaswi kuandika chochote kwa props zake, haijalishi ni ya aina gani.
Hali na mzunguko wa maisha
Kwanza, hebu tuone jinsi ya kutumia hali vizuri kazini. Kuna mambo matatu muhimu ya kujua kuhusu hali ya sehemu:
- Usibadili hali moja kwa moja, tumia njia ya setState. Kumbuka kwamba eneo pekee ambalo unaweza kubadilisha hali moja kwa moja ni mjenzi.
- Huenda masasisho ya serikali yasilandanishwe.
- Mtiririko wa habari una mwelekeo mmoja. Katika ujenzi wa sehemu, hakuna hata mmoja wao anayejua ikiwa serikali imepewa sehemu nyingine. Haijalishi jinsi hii au kipengele hicho cha kazi cha kujitegemea kiliundwa – kwa kutumia chombo cha kazi au uainishaji. Hii inaitwa mtiririko wa data “chini”. Hali hufafanuliwa kila mara kwa kipengele fulani, na miunganisho ya kimuundo ya jimbo hili inaweza tu kuathiri sehemu ambazo ziko “chini” katika mpangilio wa hali ya juu.
Kwa kawaida, hali hiyo inajulikana kama “ndani”, “ndani”, au iliyofichwa. Inaonekana tu kwa kipengele cha kazi yenyewe na haionekani kwa sehemu nyingine za React. Katika programu za maktaba, ikiwa kipengele cha kazi cha kujitegemea kinapewa hali fulani au la ni maendeleo ya ndani ya sehemu hii, ambayo inaweza kubadilika kwa muda. Pia ni ya kuvutia kwamba katika kazi unaweza kuchanganya vipengele na bila hali.
Uchambuzi wa tukio
Mchakato wa kuchanganua matukio katika vipengele vya React ni sawa na kushughulikia matukio katika vipengee vya muundo wa kitu cha hati. Walakini, kuna sifa kadhaa zinazowatofautisha kutoka kwa kila mmoja:
- Matukio katika maktaba ya JavaScript yanaitwa kwa mtindo tofauti na ule wa kawaida.
- Kwa kutumia Lugha ya Utayarishaji Iliyoongezwa ya Mfumo, msanidi programu hupitisha utaratibu mdogo kama kidhibiti tukio badala ya mfuatano.
Utoaji wa masharti wa vipengele
Maktaba ya JavaScript hufanya iwezekanavyo kuvunja mantiki ya vipengele vya kuendeleza katika vipengele vya kujitegemea. Wanaweza kuonyeshwa kwa maonyesho ya jumla au kufichwa, kulingana na hali gani wamejaliwa kwa sasa. Utoaji wa masharti wa vipengele hufanya kazi kwa kanuni sawa na maneno yenye masharti kulingana na lugha ya programu ya JavaScript. Wakati mwingine hutokea kwamba maktaba inahitaji maelezo ya jinsi hali inavyoathiri kufichwa au utoaji wa baadhi ya vipengele. Hapa ni busara zaidi kutumia msaidizi wa masharti wa JS au misemo sawa na if.
Kubadilisha Vipengele
Vipengele vya maktaba ya React vinaweza kuongezwa kwa vigeu. Hili ni suluhisho la vitendo wakati hali fulani inaonyesha ikiwa sehemu fulani ya sehemu inapaswa kuchorwa, au haina maana, wakati sehemu iliyobaki inabaki bila kubadilika.
Orodha na Vifunguo
Sehemu hii inajumuisha vipengele kadhaa:
- Kuchora vipengele vingi . Mtumiaji anaweza kuunda seti ya vipengele na kupachika katika lugha ya programu ya mfumo kwa kutumia braces curly.
- Orodha ya msingi ya vipengele . Mara nyingi, watumiaji na wasanidi hurekebisha orodha moja kwa moja ndani ya sehemu ya sehemu.
Funguo
Ufunguo katika maktaba ya React JavaScript huashiria zana maalum ambayo lazima iwekwe wakati wa kuunda orodha ya vipengee. Vifunguo husaidia maktaba ya JavaScript kutambua ni vipengee vipi ambavyo vimerekebishwa, kuongezwa au kuondolewa. Ni muhimu kuziweka alama ili React iweze kuunganisha vipengele vya data ya kimuundo baada ya muda fulani kupita.
Fomu
Katika maktaba ya JS, vipengele vya lugha sanifu sanifu hufanya kazi kwa njia tofauti kidogo kuliko vipengee vya kielelezo cha kitu cha hati, kwa sababu vipengele vya umbo mwanzoni vina hali iliyofichwa.
Vipengee Vinavyosimamiwa
Katika lugha sanifu ya alama, fomu kama vile input , select , textarea huwa hudumisha hali yao wenyewe na kuisasisha wakati msanidi anapoingiza taarifa mpya. Hali ya React.js daima hufafanua thamani ya sehemu za ingizo katika kipengele cha utunzi kinachodhibitiwa. Ingawa hii inaonyesha kwamba mtumiaji lazima aandike zaidi ya msimbo wa awali uliotolewa, sasa inawezekana kupitisha thamani hii kwa sehemu nyingine za kiolesura cha mtumiaji.
Kuinuka kwa serikali
Kuinua hali ni kiolezo sanifu ambacho kila msanidi anapaswa kufahamu na kuweza kutumia katika mchakato wa kazi. Kuitumia kutaondoa mifumo ngumu na isiyo na maana ya usimamizi wa serikali.
Kwa nini ni muhimu sana kudhibiti kuongezeka kwa serikali?
Kuinua hali kwa kiwango cha vipengele vya zamani kwa sehemu zinazohitaji ni muhimu ili vipengele vyote viweze kushiriki katika serikali. Kiwango cha hali ya utulivu kitafanya iwe rahisi kusambaza kati ya vipengele vyote vinavyotegemea.
Utungaji dhidi ya Urithi
React.js inajumuisha muundo thabiti wa utunzi, kwa hivyo inashauriwa kutumia mchakato wa kuunda sehemu nzima badala ya urithi kutumia tena msimbo ulioandikwa mapema kati ya vipengee. Kwa hivyo, props na uwezo wa kuunda muundo mmoja mzima kutoka kwa sehemu za sehemu, humpa msanidi ubadilikaji unaohitajika kuunda ganda na tabia ya kitu hicho kwa njia maalum na salama.
Kikumbusho! Sehemu za vijenzi zinaweza kuchukua propu zisizohusiana, ikijumuisha sehemu za msingi zinazounda maktaba au vitendaji.
Katika tukio ambalo unahitaji kutumia kazi isiyo na kuangalia kwa kufanya kazi na vipengele mara ya pili au ya tatu, iondoe kwenye moduli tofauti ya JS. Isogeze kwenye kijenzi na utumie kitendakazi kilichozalishwa bila upanuzi zaidi. React au Vue au Angular, cha kuchagua: https://youtu.be/Nm8GpLCAgwk
Kanuni za React.js
Falsafa nzima ya maktaba ya JavaScript imefichwa kwenye mwongozo wa React. Inaonekana kwamba hii ni ndefu na sio ya umuhimu mkubwa, hata hivyo, watumiaji wengi wanadai kwamba baada ya kusoma kila kitu kilianguka. Nyaraka ni za zamani kabisa, lakini bado zina thamani kubwa na umuhimu –
https://ru.reactjs.org/docs/thinking-in-react.html . React js mafunzo https://ru.reactjs.org/tutorial/tutorial.html
Utendaji kazi wa maktaba ya React.js
Kutumia maktaba ya JavaScript, mtumiaji anapata fursa ya kulipa kipaumbele chake kwa moja kwa moja kwa mchakato wa maendeleo ya UI na vipengele vya programu, angalau ya yote yanapotoshwa na malezi na mapungufu iwezekanavyo ya kanuni iliyoandikwa. Maktaba hukuruhusu kukuza programu haraka, hurahisisha kusanidi na kuhariri vipengee na mchakato wa mradi mzima kwa ujumla. Kwa hivyo, React.js ina vipengele vinavyohusika na mawasiliano katika mtandao wa kimataifa, UI, udhibiti wa hali ya programu na uwezo wa kutatua masuala mengine changamano. Maktaba pia ina sifa zifuatazo za utendaji:
- Utendaji . React.js inapatikana katika umbizo la minified. Kifurushi hiki cha kompakt hakihitaji kusanidiwa wazi. Tayari inajumuisha kipengele cha kugawanya msimbo ambacho kinapunguza muda wa kufungua toleo la kivinjari cha tovuti, kwa kuwa chaguo hili huzuia vipengele kutoa kwa wakati mmoja.
- Mfumo wa ikolojia uliosukuma na kufuata . Idadi kubwa ya zana zinapatikana kwenye maktaba, inayoungwa mkono na tovuti zingine, ambayo inaruhusu mtumiaji kuendeleza programu mpya ngumu kwa madhumuni yoyote.
- Utendaji kamili . Faida kuu ya maktaba ya JavaScript ni kwamba matoleo yote mapya ya jukwaa yanakidhi mahitaji ya zamani, kwa hivyo unaweza kutumia toleo la zamani na lililosasishwa, zote zinaungwa mkono na zinafaa hadi leo. Matoleo yaliyotolewa hapo awali hayatumiki baada ya sasisho za hivi karibuni.
Matumizi ya vitendo
Kwenye ukurasa kuu wa maktaba, katika maagizo kwa watumiaji, kuna mifano kadhaa ya kielelezo ya kutumia React katika mazoezi. Unaweza kuzisahihisha wewe mwenyewe na ujaribu kuziendesha. Hata kama wewe ni mtumiaji mpya na huelewi kiini na mantiki ya maktaba, rekebisha msimbo kwa kupenda kwako na uone matokeo.
Utumiaji wa vitendo wa React wakati wa kuandika roboti za biashara kwenye JavaScript
Ni muhimu kutambua kwamba msanidi hana mpango wa JS, lakini anaandika maandishi (scripts). kwa hiyo, kwa kutumia maktaba, msanidi programu anaweza kuandika msimbo kwa roboti ya biashara inayofuata inayotumiwa kwa madhumuni ya biashara, na pia kuendelea kuunda mwonekano wake kulingana na jukwaa hili. Kwa kweli, roboti ya biashara kwa ajili ya biashara pia ni maombi, ambayo idadi kubwa inatengenezwa kwa kutumia React.js. Hata hivyo, baadhi ya vipengele na sehemu ya ndani ya bot bado itabidi kufanywa kwenye tovuti nyingine zinazotoa zana zinazofaa kwa hili.
GitHub na React.js
GitHub ni jukwaa ambalo hupangisha matoleo yote ya miradi. Mtumiaji huunganisha upangishaji, hupitia utaratibu wa usajili kwenye tovuti rasmi ya GitHub, na kisha huunda hazina ya mtandaoni ambapo huhamisha faili zote kutoka kwa Git.
Git ndio huduma maarufu na inayofaa zaidi ya udhibiti wa toleo la mradi leo, na GitHub ni hazina ya msimbo wa mbali.
Rejea! Wale watumiaji ambao wamepokea kiungo kinachofaa kwa ruhusa pekee ndio wanaoweza kufikia kuhariri na kupakua faili.
Nyaraka
Mafunzo yote na nyenzo za kisasa kuhusu maktaba ya JavaScript zimesasishwa na sasisho la hivi punde. Watengenezaji pia hukusanya na kuchapisha kwa usomaji wa jumla matoleo ya zamani ya hati, yaliyotumwa kwenye ukurasa tofauti wa maktaba. Kwa hivyo, itakuwa rahisi kwa Kompyuta kujua ustadi wa usimamizi wa tovuti: nyenzo za zamani na mpya – kila kitu kiko hapa, ufikiaji ni bure kwa kila mtu.
Kumbuka! Usisahau kusoma miongozo. Angalau angalia – tayari zaidi ya kile kilichoonekana kutoeleweka kitaanguka mahali.
Maktaba ya React ni jukwaa maarufu na linalofaa leo. Uwezo wake mwingi huruhusu wasanidi kuunda miradi ya ubora bora na kwa muda mfupi. Kwa kuongeza, kujua jukwaa na kuwa na ujuzi wa kutumia hufanya mtaalamu zaidi katika mahitaji katika soko la ajira.