React.JS ji bo dummiyên destpêkê, dema ku robotên bazirganiyê dinivîsin pirtûkxaneyê bikar tînin

React JS ji bo dummiyên destpêk çi ye, ew çi ye, dersan, sazkirin, belgekirin – dema nivîsandina robotên bazirganiyê çawa pirtûkxaneya React JS saz dike û bikar tîne. Bi gelemperî di reklamên kar de ji bo pisporên komputerê, hûn dikarin hewcedariyek bibînin ku dibêje ku hûn di pirtûkxaneya JavaScript de jêhatî ne. Erê, û ew li hêviya zanîna React ne tenê ji pêşdebirên nermalavê, lê di heman demê de ji bernamenûsên ku bi pêşkeftina navxweyî ya malperê ve mijûl in, û ne sêwirana derveyî jî ne. Ev çi celeb pirtûkxane ye, ew di xebatê de çi derfetan dide, û destpêkek li ku derê dest pê dike? Werin em di vê gotarê de wê diyar bikin.

Pirtûkxaneya JavaScript – React: ew çi ye

React.JS pirtûkxaneyek zimanê bernamenûsiya
JavaScript -ê ya populer e , ku ji hêla tora civakî ya serhêl Facebook ve hatî damezrandin da ku pêvajoya pêşkeftina şêla derveyî ya malper û serîlêdanan baştir bike û hêsan bike – pêwendiya ku bikarhêner pê re têkilî daynin. Taybetmendiya sereke ya pirtûkxaneyê pêkhate û dewlet in. Parçeyek parçeyek ji komek dîjîtal e ku ji xuyangkirina beşek diyarkirî ya pergala ku hatî sêwirandin berpirsiyar e.

Not! Parçeyên pêkhatî yên weha dikarin hêlîn bibin.

Dewlet berhevokek ji hemî daneyên li ser hûrguliyên navberekê ye, tevî pêşkêşkirina nûnertiya wê. Bi karanîna mînakan, em ê bi hûrgulî û zelal fêr bibin ka çi ye. Wêneya jêrîn hin hêmanên mezin nîşan dide – şandina tora civakî ya serhêl, beşek bi agahdariya gelemperî û nîşandana wêneyan. Her beş hêmanên piçûktir dihewîne, ku ew pêkhate ne. Mînak di weşanek de nivîs, wêne, navê bikarhênerê ku agahiyan diweşîne, hwd. Di beşa wêneyê de wêneyên kesane û di beşa agahdariya giştî de agahdariya kurt heye.
Her yek ji van pêkhateyan (pêkhatan) xwedî dewletek e. Ango, beşa bi agahdariya gelemperî dê li ser cîhazên cihêreng xuya bike, hêmana “wek” dema ku tê pêldan reng diguhezîne û hejmara berpirsiyarê jimara giştî ya hezkiriyan; weşan, dibe ku nivîsê kurt bike an bi tevahî veguhezîne.

Bi vî rengî, nermbûna React.JS tête diyar kirin – hêmana navberê carekê tête nivîsandin, û piştî wê hemî rewşên gengaz têne dayîn.

Çima pirtûkxaneya React hewce ye?

React.JS yek ji vebijarkên mimkun e ku meriv koda JS an HTML-ê bi rengek hêsan binivîsîne, kopiyên wê çêbike û wê xuyang bike. Parçeyên li vir bi zimanek pergalê taybetî têne nivîsandin – JSX, ku hêmanên zimanê bernamenûsê JavaScript û zimanê nîşankirina HTML-a standardkirî vedihewîne.
Koda ku di JSX de hatî nivîsandin pir taybetî ye. Di heman demê de girîng e ku geroka webê ne hewce ye ku vê zimanê pergalê fam bike – koda React.JS ji JS-ê re tê veguheztin, ku her gerok bêyî pirsgirêk têdigihîje. Ji bo kirina vê yekê, ya ku di pirtûkxaneyê de hatî afirandin bi berhevkerên pispor ve tê derbas kirin (yek ji yên herî populer îro Babel js e), ku kodên bi zimanên bernamesaziyê yên kêm-naskirî vediguhezînin nûnertiyên JavaScript.
Di destpêkê de dibe ku xuya bibe ku pergala karanînê pir ne mentiqî ye, lê piştî demekî hûn jê re fêr dibin û hûn fêm dikin ka çima mekanîzma bi vî rengî hatî sêwirandin. Pirtûkxaneya JavaScript gelek avantajên xurt hene:

• naskirina zimanê bernamesaziya pergalê ji JavaScript-a naskirî hêsantir e, û ji ber vê yekê, ji bo piştgirîkirina kodê û rakirina xeletiyên li ser wê çend carî kêmtir dem digire (leza nivîsandina kod û bernameyên nû dê li gorî vê yekê zêde bibe);
• pergalek hêsan û pratîkî ya hêmanên pêkhatî li vir tê çêkirin – beşên kodê dubare dike ku di qonaxên cûda yên nivîsandinê û di bernameyên cihê de têne bikar anîn, û her weha li gorî çarçovê diguhezin;
• her hêmanek pêkhatî tenê bi rewşa xwe ve girêdayî ye , ji ber vê yekê heke di pratîkê de ji nişka ve xeletiyek di xebata wê de were dîtin hêsantir e ku kêmasiyên kodê rast bikin; Demên çewt li ser rûyê erdê diherikin: hêmanek ku bi rêkûpêk tevdigere dê di vê modê de bi îstîqrar xebata xwe bidomîne, heya ku, bê guman, di derheqê wê de rewşek xelet neyê bikar anîn.

Bi vî rengî, em dikarin encam bidin ku pirtûkxaneya React.JS dikare gelek dem hilîne, kodê taybetîtir bike, rêzê bi rêza rast organîze bike, û dîsa blokên mezin bikar bîne. Van avantajên hanê gengaz dike ku lêçûna pêvajoya afirandina navrûyên bikarhêner kêm bike, û hem jî dema vê pêvajoyê bileztir bike. Xwedî jêhatîbûna karanîna zimanê bernamesaziya JS û HTML-ê, fêrbûna karanîna pergala JSX hêsan e – tenê çend rojan ji bo serweriya wê.

Not! Dema ku bi projeyên mezin re dixebitin, karanîna pirtûkxaneyê maqûl e, dema ku hewce ye ku hejmareke mezin ji rûpelên dînamîkî binivîsin. Malperek karsaziyek piçûk ne hewceyê tevliheviyên wusa ye.

Kursa bingehîn a JS ji A heya Z reaksiyonê bikin: https://youtu.be/GNrdg3PzpJQ

Nasîna ji bo destpêk: têgehên bingehîn

Silav Cîhan!

Dema ku bigihîje rûpela yekem a pirtûkxaneyê, bikarhêner dê sernavek bi xêr hatî wekî mînakek piçûk bibîne – “Silav cîhan!”.

Bingehên zimanê pergala JSX

JSX zimanek bernamesaziya pergalê ye, dirêjkirina JavaScript-a naskirî ye. Ew têkeliyek du zimanan dihewîne – bernamesaziya JA û zimanê nîşankirina HTML-a standardkirî. Pêşdebir wê bikar tînin da ku têgînê rast bikin da ku React nîşan bidin ka meriv çawa pêwendiya bikarhêner divê çawa xuya bike. JSX “beşên” pirtûkxaneyê diafirîne.

JSX çi ye?

Pirtûkxaneya React bi mantiqê ve girêdayî ye ku cewhera vegotinê rasterast bi mantiqa navbeynkariya bikarhêner ve girêdayî ye: bûyer çawa têne hilberandin, rewş çawa di heyamek diyarkirî de diguhezîne, û çawa agahdarî ji bo pêşkêşkirinê tê amadekirin. Pirtûkxaneya JS dikare bêyî zimanê xwe yê pergalê were bikar anîn, lê hejmareke mezin ji pêşdebiran dema ku bi navgînek bikarhêner a ku ji koda JavaScript-ê hatî hilberandin re dixebitin ji ber zelalî û berbiçaviya wê hêja dibînin. Wekî din, pêvek ji React re hêsantir dike ku agahdariya dem û xeletiya nederbasdar biafirîne.

Di zimanê sîstemê de pêkhatina îfadeyan

JSX destûrê dide te ku hûn di pêvajoyekê de bêjeyên JavaScript-ê yên baş-nivîsandî di hundurê pêlavên çîçek de bikar bînin.

JSX di heman demê de îfadeyek e Dema ku koda çavkaniyê ji hêla kodê ve tê kod kirin, her bêjeyek JSX vediguhere bangek fonksiyonek JS ya standard ku kategoriya JavaScript-ê dike hedef. Ji vê yekê tê fêm kirin ku dirêjkirina pergalê ya zimanê bernamesaziya fermî dikare di hundurê manualê de û ji bo heyaman were bikar anîn.

JSX Objekt e Ji tiştên ku ji hêla dirêjkirinê ve têne temsîl kirin hêmanên React têne gotin. Ew encama ku pêşdebir dixwaze li ser ekranê bibîne eşkere dikin. Pirtûkxane van tiştan nas dike û wan di pêvajoya çêkirin û domandina Modela Dokumentê de bikar tîne.

Detail rendering

Agahdarî gelek blokên avahiyê yên piçûk in ku bernameyên React pêk tînin.
Agahdarî wêneya ku pêşdebir dixwaze di dawiyê de li ser çavdêriyê bibîne ye. Li gorî hêmanên Modela Objeya Belgeyê, hêmanên pirtûkxaneyê hêsan in û gelek çavkaniyan nagirin. Hêman pêkhateyên pêkhateyan in.

Components and Props

Pêkhatî dihêle ku UI-yê li beşên serbixwe dabeş bikin, ku hêsantir e ku meriv li ser cûda bixebite. Ew dikarin gelek caran bêne hev kirin û bikar bînin. Bi piranî, fonksiyona pêkhateyan bi fonksiyona zimanê bernamesaziya JavaScript bixwe ye. Ew agahdariya têketinê digirin, ku jê re props tê gotin, û hêmanên React ên ku modela pêşkeftinê ya ku pêşdebir dixwaze li ser çavdêriyê bibîne destnîşan dikin vedigerînin.

Cûreyên pêkhateyan: fonksiyonel û çîn

Ya herî hêsan e ku meriv beşek pirtûkxaneyê wekî fonksiyonek binav bike.
Pêkhat dikarin di forma pola ES6 de jî bêne temsîl kirin.

Balkêş! Pirtûkxaneya React van her du celeb pêkhateyan wekî hev diyar dike.

props

Props tiştên neguhêrbar in ku tenê têne xwendin. Ji ber vê yekê, pêdivî ye ku pêkhateyek ji kîjan celebê be bila bibe, tiştek li ser pêlên xwe nenivîse.

Dewlet û çerxa jiyanê

Pêşî, em fêhm bikin ka meriv çawa bi rêkûpêk dewletê di xebatê de bicîh tîne. Sê tiştên girîng hene ku di derbarê rewşa pêkhateyê de zanibin:

1. Dewletê rasterast neguherînin, rêbaza setState bikar bînin. Bînin bîra xwe ku tenê qada ku hûn dikarin rasterast dewletê biguhezînin çêker e.
2. Dibe ku nûvekirinên dewletê ne hevdem bin.
3. Herikîna agahiyan yek alî ye. Di avakirina pêkhateyê de, yek ji wan nizane ka dewlet ji pêkhateyek din re tê veqetandin. Ne girîng e ka ev an ew hêmanek fonksiyonel a serbixwe çawa hate damezrandin – bi karanîna amûrek fonksiyonel an dabeşkirinê. Ji vê re herikîna daneyê ya “li jêr” tê gotin. Dewletek her gav ji bo hin hêmanan tê destnîşankirin, û komeleyên avahîsaz ên vê dewletê tenê dikarin bandorê li beşên ku di rêza hiyerarşîk de “jêr” in.

Bi gelemperî, dewlet wekî “herêmî”, “navxweyî”, an veşartî tê binav kirin. Ew tenê ji hêmana fonksiyonel bixwe re xuya dike û ji beşên din ên React re nayê dîtin. Di bernameyên pirtûkxaneyê de, gelo hêmanek fonksiyonel a serbixwe bi rewşek diyarkirî ve girêdayî ye an na, pêşveçûnek hundurîn a vê beşê ye, ku dikare bi demê re biguhere. Di heman demê de balkêş e ku di xebatê de hûn dikarin pêkhateyên bi dewlet û bê dewlet re hev bikin.

Analîza bûyerê

Pêvajoya parskirina bûyeran di hêmanên React de mîna birêvebirina bûyeran di hêmanên modela objeya belgeyê de ye. Lêbelê, çend taybetmendiyên ku wan ji hev cuda dikin hene:

1. Bûyerên di pirtûkxaneya JavaScript de ji ya standard bi şêwazek cûda têne nav kirin.
2. Bi karanîna Zimanê Bernamesaziya Berfirehkirî ya Sîstemê, pêşdebir li şûna xêzek binavberek wekî rêvekerek bûyerê derbas dike.

Rendering bi şertê hêmanan

Pirtûkxaneya JavaScript gengaz dike ku meriv mantiqa pêşkeftina hêmanan li pêkhateyên serbixwe bişkîne. Ew dikarin ji bo pêşandana gelemperî an veşartî bêne xuyang kirin, li gorî ka ew di vê gavê de bi kîjan dewletê ve girêdayî ne. Veguheztina şertî ya hêmanan li ser heman prensîbê wekî bêjeyên şertî yên ku li ser bingeha zimanê bernamesaziya JavaScript-ê têne xebitandin dixebite. Carinan diqewime ku pirtûkxane pêdivî bi ravekirinek heye ka dewlet çawa bandorê li ser veşartin an danasîna hin hêmanan dike. Li vir maqûltir e ku meriv arîkarek JS-ya şertî an îfadeyên mîna heke bikar bîne.

Guhertina pêkhateyan

Hêmanên pirtûkxaneya React dikarin li guherbaran werin zêdekirin. Ev çareseriyek pratîkî ye dema ku hin merc destnîşan dike ka divê hin beşek pêkhateyê were xêz kirin, an ew ne wate ye, dema ku beşê mayî neguherî dimîne.

Lîsteyên û Keys

Ev beş çend beşan pêk tîne:

1. Çêkirina gelek hêmanan . Bikarhêner dikare komek hêmanan ava bike û bi karanîna kelûpelên kelandî ve di zimanê bernamesaziya pergalê de bicîh bike.
2. Lîsteya bingehîn ya hêmanan . Bi gelemperî, bikarhêner û pêşdebiran navnîşan rasterast di hundurê beşek pêkhateyê de rast dikin.

Keys

Mifteyek di pirtûkxaneya React JavaScript de amûrek pispor destnîşan dike ku divê dema ku navnîşek pêkhateyan were çêkirin têkevin. Bişkojk alîkariya pirtûkxaneya JavaScriptê dikin ku nas bike ka kîjan tiştên hatine sererast kirin, zêdekirin an jêbirin. Girîng e ku hûn wan nîşan bikin da ku React piştî ku demek diyar derbas bû bi pêkhateyên daneyên avahîsaziyê re têkildar bike.

Forms

Di pirtûkxaneya JS de, hêmanên zimanê nîşankirina standardkirî ji pêkhateyên modela objekta belgeyê hinekî cûdatir dixebitin, ji ber ku hêmanên formê di destpêkê de xwedan rewşek veşartî ne.

Tiştên Managed

Di zimanek nîşankirinê ya standardkirî de, formên wekî têketin, hilbijartî, qada tekstê mêl dikin ku rewşa xwe biparêzin û dema ku pêşdebir agahdariya nû têkeve nûve bikin. Dewleta React.js her gav nirxa qadên têketinê di hêmanek pêkhatî ya birêvebir de diyar dike. Her çend ev destnîşan dike ku pêdivî ye ku bikarhêner ji koda hatî dayîn hinekî bêtir binivîsîne, naha gengaz e ku vê nirxê ji beşên din ên navrûya bikarhêner re derbas bike.

Rabûna dewletê

Rakirina dewletê şablonek standardkirî ye ku divê her pêşdebir jê haydar be û bikaribe di pêvajoya xebatê de bicîh bîne. Bikaranîna wê dê şêwazên rêveberiya dewletê yên tevlihev û bi gelemperî bêkêr ji holê rake.

Çima ev qas pêwîst e ku rabûna dewletê were kontrol kirin?

Bilindkirina dewletê di asta pêkhateyên rabirdûyê de ji bo wan beşên ku pêwîstî pê heye, pêwîst e ku hemû pêkhate beşdarî dewletê bibin. Asta dewletî ya bi îstîqrar dê belavkirina wê di nav hemû pêkhateyên ku xwe dispêrin wê hêsantir bike.

Pêkhatina vs Mîrasiyê

React.js modelek pêkhatî ya bihêz vedihewîne, ji ber vê yekê tê pêşniyar kirin ku hûn pêvajoya avakirina yekparçeyek ji parçeyan li şûna mîrasiyê bikar bînin da ku koda ku berê di navbera hêmanan de hatî nivîsandin ji nû ve bikar bînin. Ji ber vê yekê, pêlav û şiyana afirandina pêkhateyek yekane ji perçeyên pêkhateyê, ji pêşdebir re nermbûna ku hewce dike peyda dike da ku çêlek û tevgera hêmanê bi rengek taybetî û ewledar biafirîne.

Reminder! Parçeyên pêkhatî dikarin hêmanên negirêdayî bigirin, tevî beşên bingehîn ên ku pirtûkxane an fonksiyonan pêk tînin.

Di bûyera ku hûn hewce ne ku ji bo xebata duyemîn an sêyem bi pêkhateyan re fonksiyonek bê nihêrîn bikar bînin, wê derxin nav modulek JS-ê ya cihê. Wê bixin nav pêkhateyek û fonksiyona hatî çêkirin bêyî berfirehkirina bêtir bikar bînin. React an Vue an Angular, çi hilbijêrin: https://youtu.be/Nm8GpLCAgwk

Prensîbên React.js

Tevahiya felsefeya pirtûkxaneya JavaScript di rêberê React de veşartî ye. Wusa dixuye ku ev dirêj e û ne xwedî girîngiyek ewqas mezin e, lêbelê, gelek bikarhêneran îdîa dikin ku piştî xwendinê her tişt li cîhê xwe ket. Belgekirin pir kevn e, lê dîsa jî xwedî nirx û girîng e –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Fonksiyona pirtûkxaneya React.js

Bi karanîna pirtûkxaneya JavaScript-ê, bikarhêner fersendê digire ku hemî bala xwe rasterast bide pêvajoya pêşkeftina UI û hêmanên serîlêdanê, ya herî kêm ji hêla damezrandin û kêmasiyên gengaz ên koda nivîskî ve mijûl dibe. Pirtûkxane dihêle hûn bernameyan zûtir pêşde bibin, mîhengkirin û sererastkirina pêkhateyan û pêvajoya tevahiya projeyê bi tevahî hêsantir dike. Bi vî rengî, React.js hêmanên berpirsiyar ên ragihandinê di tora gerdûnî de, UI, kontrola dewleta bernameyê û şiyana çareserkirina pirsgirêkên din ên tevlihev vedihewîne. Di pirtûkxaneyê de taybetmendiyên fonksiyonel ên jêrîn jî hene:

1. Practicality . React.js di forma kêmkirî de heye. Ev pakêta kompakt ne hewce ye ku bi zelalî were mîheng kirin. Ew jixwe taybetmendiyek dabeşkirina kodê vedihewîne ku dema ku ji bo vekirina guhertoya geroka malperê kêm dike, ji ber ku ev vebijark rê nade ku pêkhateyên di heman demê de werin pêşkêş kirin.
2. Ekosîstema pompkirî û lihevhatî . Di pirtûkxaneyê de hejmareke mezin a amûran hene, ku ji hêla malperên din ve têne piştgirî kirin, ku destûrê dide bikarhêner ku ji bo her armancê bernameyên nû yên tevlihev pêşve bibe.
3. Fonksiyona tevahî . Feydeya sereke ya pirtûkxaneya JavaScript ev e ku hemî guhertoyên nû yên platformê hewcedariyên yên kevn pêk tînin, ji ber vê yekê hûn dikarin hem guhertoya kevn û hem jî ya nûvekirî bikar bînin, hemî jî piştgirî ne û heya roja îro têkildar in. Guhertoyên berê hatine derxistin piştî nûvekirinên herî dawî kevnar nabin.

Bikaranîna pratîkî

Li ser rûpela sereke ya pirtûkxaneyê, di rêwerzên ji bo bikarhêneran de, çend mînakên berbiçav ên karanîna React di pratîkê de hene. Hûn dikarin wan bi destan rast bikin û hewl bidin ku wan bimeşînin. Her çend hûn bikarhênerek nû bin û ji esl û mantiqa pirtûkxaneyê fam nekin jî, kodê li gorî dilê xwe sererast bikin û encamê bibînin.

Serîlêdana pratîkî ya React dema ku robotên bazirganiyê di JavaScript de dinivîsin

Girîng e ku meriv zanibe ku pêşdebirek JS bername nake, lê nivîsan (skrîptan) dinivîse. ji ber vê yekê, bi karanîna pirtûkxaneyê, pêşdebirek dikare kodê ji bo robotek bazirganiyê ya paşîn ku ji bo mebestên bazirganiyê tê bikar anîn binivîse, û di heman demê de sêwirana xuyangê xwe li ser bingeha vê platformê jî bidomîne. Bi rastî, robotek bazirganiyê ya ji bo bazirganiyê jî serîlêdanek e, ku hejmareke mezin bi karanîna React.js têne pêşve xistin. Lêbelê, hin fonksiyon û beşa navxweyî ya botê hîn jî pêdivî ye ku li ser malperên din ên ku amûrên ji bo vê yekê peyda dikin bêne kirin.

GitHub û React.js

GitHub platformek e ku hemî guhertoyên projeyan digire. Bikarhêner mêvandariyê girêdide, prosedûra qeydkirinê li ser malpera fermî ya GitHub derbas dike, û dûv re depoyek serhêl diafirîne ku ew hemî pelan ji Git vediguhezîne.
Git îro karûbarê kontrolkirina guhertoya projeyê ya herî populer û têkildar e, û GitHub depoyek kodê ya dûr e.

Balkêşî! Tenê ew bikarhênerên ku zencîreya guncav bi destûr wergirtine, gihîştina guherandin û dakêşana pelan hene.

Documentation

Hemî hînkar û materyalên nûjen ên di derbarê pirtûkxaneya JavaScript de bi nûvekirina herî dawî re nûve ne. Pêşdebir her weha ji bo xwendina gelemperî guhertoyên kevn ên belgeyê, ku li ser rûpelek cihê ya pirtûkxaneyê hatine şandin, berhev dikin û dişînin. Ji ber vê yekê, ji bo destpêkeran dê hêsantir be ku hûn jêhatîbûna rêveberiya malperê biserkevin: hem materyalê kevn û hem jî nû – her tişt li vir e, gihîştin ji bo her kesî belaş e.

Not! Ji bîr nekin ku pirtûkan bixwînin. Bi kêmanî binihêrin – jixwe piraniya tiştên ku nayên fêm kirin dê bi cîh bibin.

Pirtûkxaneya React îro platformek populer û têkildar e. Pirrengiya wê dihêle pêşdebiran ku projeyên bi kalîte çêtir û di demek hindik de çêbikin. Wekî din, zanîna platformê û hebûna jêhatîbûna karanîna wê pisporek di bazara kedê de bêtir daxwaz dike.