React.JS pou nul debutan, lè l sèvi avèk bibliyotèk la lè w ap ekri robo komès

Ki sa ki React JS pou nul debutan, ki sa li ye, leson patikilye, enstalasyon, dokiman – ki jan yo enstale epi sèvi ak bibliyotèk la React JS lè w ap ekri robo komès. Souvan nan reklam travay pou espesyalis òdinatè, ou ka jwenn yon kondisyon ki di ke ou gen konpetans nan bibliyotèk JavaScript la. Wi, epi yo atann konesans nan React pa sèlman nan men devlopè lojisyèl, men tou nan pwogramasyon ki angaje nan devlopman entèn nan sit la, epi yo pa konsepsyon ekstèn. Ki kalite bibliyotèk sa a, ki opòtinite li bay nan travay, ak ki kote yon debutan kòmanse fè konesans? Ann kalkile li nan atik sa a.

Bibliyotèk JavaScript – Reyaji: ki sa li ye

React.JS se yon bibliyotèk nan langaj popilè
JavaScript pwogramasyon , ki te fòme pa rezo sosyal sou entènèt Facebook la nan lòd yo amelyore ak senplifye pwosesis la nan devlope koki ekstèn nan sit ak aplikasyon – koòdone ak ki itilizatè a kominike. Karakteristik prensipal bibliyotèk la se eleman ak eta. Yon eleman se yon pati nan yon seri dijital ki responsab pou aparans nan yon sèten pati nan sistèm nan ke yo te fèt.

Remak! Pati konpozan sa yo ka enbrike.

Yon eta se yon koleksyon tout done sou detay yo nan yon koòdone, ki gen ladan rann reprezantasyon li yo. Sèvi ak egzanp, nou pral chèche konnen an plis detay ak klèman ki sa ki. Imaj ki anba a montre kèk nan gwo konpozan yo – afiche sou yon rezo sosyal sou entènèt, yon seksyon ki gen enfòmasyon jeneral ak ki montre foto. Chak pati gen ladan eleman ki pi piti, ki se eleman yo. Pa egzanp, yon piblikasyon gen tèks, foto, non itilizatè a ki pibliye enfòmasyon an, elatriye. Seksyon imaj la gen foto endividyèl, epi seksyon enfòmasyon jeneral la gen enfòmasyon kout.
Chak nan eleman sa yo (konpozan) gen yon eta. Sa vle di, seksyon an ak enfòmasyon jeneral ap gade diferan sou aparèy diferan, eleman “tankou” chanje koulè lè yo peze ak nimewo a ki responsab pou kantite total renmen; piblikasyon an, nan vire, ka diminye tèks la oswa transmèt li an antye.

Se konsa, fleksibilite nan React.JS eksprime – eleman nan koòdone ekri yon fwa, epi apre sa yo bay li tout eta posib.

Poukisa bibliyotèk React la nesesè?

React.JS se youn nan opsyon posib pou ekri kòd JS oswa HTML nan yon fòma pratik, fòme kopi li epi fè li vizyèl. Konpozan yo isit la ekri nan yon langaj sistèm espesyal – JSX, ki gen ladan eleman nan langaj pwogramasyon JavaScript ak langaj estanda HTML maketing.
Kòd ekri nan JSX se byen espesifik. Li enpòtan tou ke navigatè entènèt la pa oblije konprann lang sistèm sa a – kòd React.JS transfere nan JS, ki nenpòt navigatè wè san pwoblèm. Pou fè sa, sa ki kreye nan bibliyotèk la pase atravè konpilateur espesyalize (youn nan pi popilè jodi a se Babel js), ki konvèti kòd nan lang programmation mwens li te ye nan reprezantasyon JavaScript.
Okòmansman, li ka sanble ke sistèm nan sèvi ak yo trè lojik, men apre yon ti tan ou abitye ak li epi ou reyalize poukisa mekanis la fèt konsa. Bibliyotèk JavaScript la gen yon kantite avantaj fò:

• langaj pwogramasyon sistèm lan pi fasil pou rekonèt pase JavaScript byen li te ye a, e kidonk, li pral pran plizyè fwa mwens tan pou sipòte kòd la ak elimine erè sou li (vitès la nan ekri nouvo kòd ak pwogram ap ogmante kòmsadwa);
• se yon sistèm pratik ak pratik nan eleman konstitiyan yo bati nan isit la – repete pati nan kòd la ki itilize nan diferan etap nan ekri ak nan diferan pwogram, epi tou chanje depann sou kontèks la;
• chak eleman konstitiyan se sibòdone sèlman nan eta li yo , kidonk li pi fasil pou korije enpèfeksyon nan kòd la si yo toudenkou jwenn yon erè nan travay li an pratik; moman kòrèk flote nan sifas la: yon eleman ki fonksyone byen ap kontinye travay estab nan mòd sa a, sof si, nan kou, yo itilize eta a mal an relasyon ak li.

Kidonk, nou ka konkli ke bibliyotèk React.JS la ka sove anpil tan, fè kòd la pi espesifik, òganize sekans nan lòd ki kòrèk la, epi sèvi ak gwo blòk ankò. Avantaj sa yo fè li posib diminye pri a nan pwosesis la nan kreye interfaces itilizatè, osi byen ke pi vit tan an nan pwosesis sa a anpil. Lè w gen ladrès pou itilize langaj pwogram JS ak HTML, aprann sèvi ak sistèm JSX la fasil – jis kèk jou pou w metrize li.

Remak! Li rasyonèl pou itilize bibliyotèk la lè w ap travay ak gwo pwojè, lè li nesesè pou ekri yon gwo kantite paj dinamik. Yon sit ti biznis pa bezwen konpleksite sa yo.

Reyaji kou fondamantal JS soti nan A rive nan Z: https://youtu.be/GNrdg3PzpJQ

Konesans pou débutan: konsèp debaz

Bonjou mond!

Lè w ap jwenn aksè nan premye paj bibliyotèk la, itilizatè a pral wè yon tit akeyi kòm yon ti egzanp – “Bonjou mond!”.

Fondamantal nan lang sistèm JSX la

JSX se yon langaj pwogramasyon sistèm, yon ekstansyon JavaScript byen koni. Li gen ladann yon konbinezon de lang – pwogramasyon JA ak langaj estanda HTML maketing. Devlopè yo sèvi ak li pou ajiste konsèp la pou montre React egzakteman ki jan koòdone itilizatè a ta dwe sanble. JSX kreye “pati yo” nan bibliyotèk la.

ki sa ki JSX?

Bibliyotèk la React respekte lojik ki sans nan rann dirèkteman gen rapò ak lojik koòdone itilizatè a: ki jan evènman yo trete, ki jan eta chanje nan yon sèten peryòd, ak ki jan enfòmasyon yo prepare pou prezantasyon. Bibliyotèk JS la ka itilize san lang sistèm li yo, men yon gwo kantite devlopè yo jwenn li enpòtan akòz klè li yo ak konkrete li yo lè w ap travay ak yon koòdone itilizatè ki pwodui nan kòd JavaScript. Anplis de sa, ekstansyon an fè li pi fasil pou React jenere moman envalid ak notifikasyon erè.

Fòmasyon ekspresyon nan lang sistèm lan

JSX pèmèt ou sèvi ak nenpòt ekspresyon JavaScript ki byen ekri andedan aparèy òtopedik boukle nan yon pwosesis.

JSX se yon ekspresyon tou Yon fwa kòd sous la bytecoded, nenpòt ekspresyon JSX tounen yon apèl fonksyon JS estanda ki vize kategori JavaScript. Apati sa a li ka konprann ke ekstansyon sistèm lan nan lang ofisyèl pwogramasyon an ka itilize andedan si manyèl la ak pou peryòd.

JSX se Objè Objè yo reprezante pa ekstansyon an yo rele eleman React. Yo klarifye rezilta a ke pwomotè a vle wè sou ekspozisyon an. Bibliyotèk la rekonèt objè sa yo epi sèvi ak yo nan pwosesis pou jenere ak kenbe Modèl Objè Dokiman an.

Rann detay

Detay yo se anpil ti blòk ki fòme pwogram React yo.
Detay yo se foto a ke pwomotè a vle wè nan fen a sou monitè a. Konpare ak eleman Modèl Objè Dokiman, eleman bibliyotèk yo senp epi yo pa pran anpil resous. Eleman yo se eleman yo nan eleman yo.

Eleman ak akseswar

Eleman fè li posib divize UI an pati endepandan, ki pi fasil pou travay sou separeman. Yo ka konbine epi itilize plizyè fwa. Pou pati ki pi, fonksyonalite eleman yo sanble ak fonksyonalite langaj pwogram JavaScript li menm. Yo pran enfòmasyon opinyon, ki rele akseswar, epi retounen eleman React ki endike modèl devlopman ke pwomotè a vle wè sou monitè a.

Varyete konpozan: fonksyonèl ak klas

Li pi fasil pou refere a yon eleman bibliyotèk kòm yon fonksyon.
Konpozan yo ka reprezante tou nan fòma klas ES6.

Enteresan! Bibliyotèk React la defini de kalite eleman sa yo kòm menm jan an.

akseswar

Akseswar yo se objè imuiabl ki lekti sèlman. Se poutèt sa, yon eleman pa ta dwe ekri anyen nan akseswar li yo, kèlkeswa kalite li fè pati.

Eta ak sik lavi

Premyèman, ann chèche konnen kijan pou byen aplike eta nan travay la. Gen twa bagay enpòtan ou dwe konnen sou eta eleman:

1. Pa chanje eta dirèkteman, sèvi ak metòd setState. Sonje ke zòn nan sèlman kote ou ka chanje eta a dirèkteman se konstrukteur la.
2. Mizajou eta yo ka pa synchrone.
3. Koule enfòmasyon an gen yon sèl direksyon. Nan konstriksyon eleman, okenn nan yo pa konnen si eta a asiyen nan yon lòt eleman. Li pa enpòtan ki jan sa a oswa eleman fonksyonèl endepandan yo te fòme – lè l sèvi avèk yon zouti fonksyonèl oswa klasifikasyon. Yo rele sa “en” done koule. Yon eta toujou defini pou kèk eleman, ak asosyasyon estriktirèl nan eta sa a ka sèlman afekte pati ki sitiye “pi ba” nan lòd la yerarchize.

Tipikman, yo refere eta a kòm “lokal”, “entèn”, oswa kache. Li se sèlman vizib nan eleman nan fonksyonèl tèt li ak envizib nan lòt pati nan React. Nan pwogram bibliyotèk yo, si yon eleman fonksyonèl endepandan doue ak yon sèten eta oswa ou pa se yon devlopman entèn nan pati sa a, ki ka chanje sou tan. Li se tou enteresan ke nan travay la ou ka konbine eleman ak ak san eta.

Analiz evènman an

Pwosesis analiz evènman nan eleman React sanble ak manyen evènman nan eleman modèl objè dokiman yo. Sepandan, gen plizyè karakteristik ki distenge yo youn ak lòt:

1. Evènman nan bibliyotèk JavaScript yo nonmen nan yon stil diferan pase youn estanda a.
2. Sèvi ak System Extended Programming Language, pwomotè a pase yon sousroutine kòm yon moun kap okipe evènman olye pou yo yon fisèl.

Rann kondisyonèl nan eleman yo

Bibliyotèk JavaScript la fè li posib kraze lojik nan devlope eleman nan eleman endepandan. Yo ka parèt pou ekspozisyon jeneral oswa kache, tou depann de ki eta yo doue ak nan moman sa a. Rann kondisyonèl eleman yo travay sou menm prensip ak ekspresyon kondisyonèl ki baze sou langaj pwogramasyon JavaScript. Pafwa li rive bibliyotèk la mande pou yon eksplikasyon sou fason eta a afekte kache oswa rann kèk eleman. Isit la li pi lojik pou itilize yon asistan JS kondisyonèl oswa ekspresyon ki sanble ak si.

Chanje konpozan

Eleman bibliyotèk React ka ajoute nan varyab yo. Sa a se yon solisyon pratik lè kèk kondisyon endike si kèk pati nan eleman yo ta dwe trase, oswa li pa fè sans, pandan y ap rès la nan pati a rete san okenn chanjman.

Lis ak kle

Seksyon sa a gen ladan plizyè eleman:

1. Desine plizyè eleman . Itilizatè a ka fòme yon seri eleman epi entegre li nan lang pwogramasyon sistèm lan lè l sèvi avèk aparèy òtopedik boukle.
2. Lis elemantè eleman yo . Souvan, itilizatè yo ak devlopè ajiste lis dirèkteman nan yon pati eleman.

Kle

Yon kle nan bibliyotèk React JavaScript vle di yon zouti espesyalize ki dwe antre lè w ap jenere yon lis konpozan. Kle ede bibliyotèk JavaScript pou idantifye ki atik yo te ajiste, ajoute oswa retire. Li enpòtan pou make yo pou React ka korelasyon eleman yo nan done yo estriktirèl apre yon sèten kantite tan te pase.

Fòm

Nan bibliyotèk JS la, eleman langaj maketing estanda travay yon ti kras diferan pase eleman nan modèl objè dokiman an, paske eleman fòm yo okòmansman gen yon eta kache.

Atik jere

Nan yon langaj maketing estanda, fòm tankou input , select , textarea yo gen tandans kenbe pwòp eta yo epi mete ajou li lè pwomotè a antre nouvo enfòmasyon. React.js eta toujou defini valè a nan jaden opinyon nan yon eleman konpozisyon jere. Malgre ke sa a endike ke itilizatè a dwe ekri yon ti kras plis pase orijinal yo bay kòd la, li se kounye a posib yo pase valè sa a nan lòt pati nan koòdone itilizatè a.

Leta a monte

Leve eta a se yon modèl estanda ke chak pwomotè ta dwe konnen epi yo dwe kapab aplike nan pwosesis travay la. Sèvi ak li pral elimine modèl jesyon leta konplèks epi anjeneral initil.

Poukisa li nesesè pou kontwole monte leta a?

Ogmante eta a nan nivo konpozan ki sot pase yo pou pati sa yo ki mande li nesesè pou tout eleman yo ka patisipe nan eta a. Yon nivo eta stab ap rann li pi fasil pou distribye li pami tout konpozan ki konte sou li.

Konpozisyon vs Eritaj

React.js gen ladann yon modèl konpozisyon fò, kidonk li rekòmande pou itilize pwosesis pou bati yon antye soti nan pati olye pou yo eritaj pou reitilize kòd ki ekri pi bonè ant eleman yo. Se konsa, akseswar ak kapasite nan kreye yon sèl konpozisyon antye soti nan pati eleman, bay pwomotè a fleksibilite ki nesesè yo kreye koki a ak konpòtman nan eleman nan yon fason espesifik ak san danje.

Rapèl! Pati eleman yo ka pran akseswar ki pa gen rapò, ki gen ladan pati elemantè ki fè bibliyotèk oswa fonksyon.

Nan ka ou bezwen sèvi ak yon fonksyon gade-gratis pou travay ak konpozan yon dezyèm oswa yon twazyèm fwa, rale li soti nan yon modil JS separe. Deplase li nan yon eleman epi sèvi ak fonksyon pwodwi a san plis ekspansyon. Reyaji oswa Vue oswa angilè, kisa pou w chwazi: https://youtu.be/Nm8GpLCAgwk

Prensip React.js

Tout filozofi bibliyotèk JavaScript kache nan gid React la. Li sanble ke sa a se long epi yo pa gen anpil enpòtans konsa, sepandan, anpil itilizatè yo reklame ke apre li tout bagay te tonbe nan plas li. Dokiman an se byen fin vye granmoun, men yo toujou gen anpil valè ak enpòtans –
https://ru.reactjs.org/docs/thinking-in-react.html . React js leson patikilye https://ru.reactjs.org/tutorial/tutorial.html

Fonksyonalite bibliyotèk React.js la

Sèvi ak bibliyotèk JavaScript, itilizatè a jwenn opòtinite pou peye tout atansyon li dirèkteman nan pwosesis devlopman UI ak eleman aplikasyon an, pi piti nan tout ke yo te distrè pa fòmasyon an ak enpèfeksyon posib nan kòd la ekri. Bibliyotèk la pèmèt ou devlope pwogram pi vit, fè li pi fasil konfigirasyon ak modifye eleman yo ak pwosesis la nan tout pwojè a kòm yon antye. Kidonk, React.js gen eleman ki responsab pou kominikasyon nan rezo mondyal la, UI, kontwòl eta pwogram ak kapasite pou rezoud lòt pwoblèm konplèks. Bibliyotèk la tou gen karakteristik fonksyonèl sa yo:

1. Pratik . React.js disponib nan fòma minified. Pake kontra enfòmèl ant sa a pa bezwen konfigirasyon klèman. Li deja gen ladann yon karakteristik divize kòd ki diminye tan li pran pou louvri vèsyon navigatè sit la, paske opsyon sa a anpeche konpozan rann an menm tan.
2. Ponpe ekosistèm ak konfòmite . Yon gwo kantite zouti ki disponib nan bibliyotèk la, sipòte pa lòt sit, ki pèmèt itilizatè a devlope nouvo pwogram konplèks pou nenpòt ki rezon.
3. Fonksyonalite konplè . Avantaj prensipal la nan bibliyotèk JavaScript la se ke tout nouvo vèsyon platfòm la satisfè kondisyon ansyen yo, kidonk, ou ka itilize tou de vèsyon an fin vye granmoun ak vèsyon an mete ajou, tout nan yo sipòte epi yo enpòtan nan jou sa a. Vèsyon ki te pibliye deja yo pa vin demode apre dènye mizajou yo.

Itilizasyon pratik

Nan paj prensipal la nan bibliyotèk la, nan enstriksyon yo pou itilizatè yo, gen plizyè egzanp ilistrasyon lè l sèvi avèk React an pratik. Ou ka manyèlman korije yo epi eseye kouri yo. Menm si ou se yon nouvo itilizatè epi ou pa konprann sans ak lojik bibliyotèk la, ajiste kòd la jan ou renmen epi wè rezilta a.

Aplikasyon pratik nan React lè w ap ekri robo komès nan JavaScript

Li enpòtan pou reyalize ke yon pwomotè pa pwogram JS, men ekri scripts (scripts). Se poutèt sa, lè l sèvi avèk bibliyotèk la, yon pwomotè ka ekri kòd pou yon robo komès ki vin apre yo itilize pou rezon komès, epi tou li kontinye konsepsyon aparans li ki baze sou platfòm sa a. An reyalite, yon robo komès pou komès se tou yon aplikasyon, ki gen yon gwo kantite yo ap devlope lè l sèvi avèk React.js. Sepandan, kèk fonksyon ak pati entèn bot la ap toujou dwe fè sou lòt sit ki bay zouti apwopriye pou sa.

GitHub ak React.js

GitHub se yon platfòm ki òganize tout vèsyon pwojè yo. Itilizatè a konekte hosting, ale nan pwosedi enskripsyon an sou sit entènèt ofisyèl GitHub, ak Lè sa a, kreye yon depo sou entènèt kote li transfere tout dosye ki soti nan Git.
Git se sèvis kontwòl vèsyon pwojè ki pi popilè ak ki pi enpòtan jodi a, epi GitHub se yon depo kòd aleka.

Referans! Se sèlman itilizatè sa yo ki te resevwa lyen ki apwopriye a ak pèmisyon gen aksè a koreksyon ak telechaje dosye.

Dokimantasyon

Tout leson patikilye ak materyèl ajou konsènan bibliyotèk JavaScript yo ajou ak dènye aktyalizasyon an. Devlopè yo tou konpile epi poste pou lekti jeneral ansyen vèsyon dokiman an, ki afiche sou yon paj apa nan bibliyotèk la. Se poutèt sa, li pral pi fasil pou débutan metrize konpetans yo nan jesyon sit: tou de ansyen ak nouvo materyèl – tout bagay isit la, aksè gratis pou tout moun.

Remak! Pa bliye li manyèl yo. Omwen pran yon gade – deja pi fò nan sa ki te sanble enkonpreyansib pral tonbe an plas.

Bibliyotèk React la se yon platfòm popilè ak enpòtan jodi a. Adaptabilite li pèmèt devlopè yo fè pwojè nan pi bon kalite ak nan mwens tan. Anplis de sa, konnen platfòm la ak konpetans yo sèvi ak li fè yon espesyalis plis nan demann nan mache travay la.