React.JS fyrir byrjendur, nota bókasafnið þegar þú skrifar viðskiptavélmenni

Hvað er React JS fyrir byrjendur, hvað er það, kennsluefni, uppsetning, skjöl – hvernig á að setja upp og nota React JS bókasafnið þegar þú skrifar viðskiptavélmenni. Oft í atvinnuauglýsingum fyrir tölvusérfræðinga má finna kröfu sem segir að þú hafir kunnáttu á JavaScript bókasafninu. Já, og þeir búast við þekkingu á React ekki aðeins frá hugbúnaðarhönnuðum, heldur einnig frá forriturum sem taka þátt í innri þróun síðunnar, en ekki ytri hönnun. Hvers konar bókasafn er þetta, hvaða tækifæri gefur það í starfi og hvar byrjar byrjandi að kynnast? Við skulum reikna það út í þessari grein.

JavaScript bókasafn – React: hvað er það

React.JS er bókasafn með vinsæla
JavaScript forritunarmálinu , myndað af netsamfélagsnetinu Facebook til að bæta og einfalda ferlið við að þróa ytri skel vefsvæða og forrita – viðmótið sem notandinn hefur samskipti við. Helstu eiginleikar bókasafnsins eru íhlutir og ástand. Íhlutur er hluti af stafrænu setti sem ber ábyrgð á útliti ákveðins hluta kerfisins sem verið er að hanna.

Athugið! Slíkir íhlutar geta verið hreiður.

Ríki er safn allra gagna um smáatriði viðmóts, þar með talið framsetningu þess. Með því að nota dæmi munum við komast að nánar og skýrt hvað er hvað. Myndin hér að neðan sýnir nokkra af stóru hlutunum – birtingu á netsamfélagsneti, hluta með almennum upplýsingum og sýna myndir. Hver hluti inniheldur smærri hluti, sem eru íhlutirnir. Til dæmis inniheldur rit texta, ljósmyndir, nafn notanda sem birtir upplýsingarnar o.s.frv. Í myndahlutanum eru einstakar myndir og í almennum upplýsingahlutanum eru stuttar upplýsingar.
Hver þessara íhluta (íhluti) hefur ástand. Það er, hlutinn með almennum upplýsingum mun líta öðruvísi út á mismunandi tækjum, „like“ þátturinn breytir um lit þegar ýtt er á hann og númerið sem ber ábyrgð á heildarfjölda líkara; ritið getur aftur á móti stytt textann eða sent hann í heild sinni.

Þannig kemur fram sveigjanleiki React.JS – viðmótshlutinn er skrifaður einu sinni og eftir það er hann gefinn upp öll möguleg ríki.

Af hverju þarf React bókasafnið?

React.JS er einn af mögulegum valkostum til að skrifa JS eða HTML kóða á þægilegu sniði, mynda afrit af honum og gera hann sjónrænan. Hlutirnir hér eru skrifaðir á sérstöku kerfismáli – JSX, sem inniheldur þætti JavaScript forritunarmálsins og staðlaða HTML markup language.
Kóði skrifaður í JSX er alveg sérstakur. Það er líka mikilvægt að vafrinn þurfi ekki að skilja þetta kerfismál – React.JS kóðinn er fluttur yfir á JS, sem allir vafrar skynja án vandræða. Til að gera þetta er það sem er búið til í bókasafninu flutt í gegnum sérhæfða þýðendur (einn af þeim vinsælustu í dag er Babel js), sem umbreyta kóða á minna þekktum forritunarmálum í JavaScript framsetningu.
Í fyrstu kann að virðast sem notkunarkerfið sé afar órökrétt, en eftir smá stund venst þú því og áttar þig á því hvers vegna vélbúnaðurinn er hannaður þannig. JavaScript bókasafnið hefur marga sterka kosti:

• kerfisforritunarmálið er auðveldara að þekkja en hið vel þekkta JavaScript, og þar af leiðandi mun það taka nokkrum sinnum styttri tíma að styðja kóðann og útrýma villum á honum (hraðinn við að skrifa nýja kóða og forrit mun aukast að sama skapi);
• hér er innbyggt þægilegt og hagnýtt kerfi samsettra þátta – endurteknir hlutar kóðans sem eru notaðir á mismunandi stigum ritunar og í mismunandi forritum og breytast einnig eftir samhengi;
• hver þáttaþáttur er aðeins víkjandi fyrir ástand hans , þess vegna er auðveldara að leiðrétta galla í kóðanum ef villu finnst skyndilega í starfi hans í reynd; röng augnablik fljóta upp á yfirborðið: frumefni sem virkar rétt mun halda áfram að vinna stöðugt í þessum ham, nema auðvitað sé rangt ástand notað í tengslum við það.

Þannig getum við ályktað að React.JS bókasafnið geti sparað mikinn tíma, gert kóðann sértækari, skipulagt röðina í réttri röð og aftur notað stóra kubba. Þessir kostir gera það að verkum að hægt er að draga úr kostnaði við að búa til notendaviðmót, auk þess að flýta fyrir þessum ferli. Með því að hafa færni til að nota JS og HTML forritunarmálið er auðvelt að læra að nota kerfið JSX – aðeins nokkra daga til að ná tökum á því.

Athugið! Það er skynsamlegt að nota bókasafnið þegar unnið er með stór verkefni, þegar skrifa þarf mikinn fjölda kraftmikilla síðna. Lítil fyrirtæki síða þarf ekki slíka flókið.

React JS grunnnámskeið frá A til Ö: https://youtu.be/GNrdg3PzpJQ

Kynning fyrir byrjendur: grunnhugtök

Halló heimur!

Þegar hann opnar fyrstu síðu bókasafnsins mun notandinn sjá velkomna fyrirsögn sem lítið dæmi – “Halló heimur!”.

Grundvallaratriði JSX kerfismálsins

JSX er kerfisforritunarmál, framlenging á hinu vel þekkta JavaScript. Það felur í sér blöndu af tveimur tungumálum – JA forritun og stöðluðu HTML markup tungumáli. Hönnuðir nota það til að stilla hugmyndina til að sýna React nákvæmlega hvernig notendaviðmótið ætti að líta út. JSX býr til „hluta“ bókasafnsins.

Hvað er JSX?

React bókasafnið fylgir þeirri rökfræði að kjarni flutnings sé beintengdur rökfræði notendaviðmótsins: hvernig atburðir eru unnar, hvernig ástand breytist á ákveðnu tímabili og hvernig upplýsingar eru undirbúnar fyrir kynningu. Hægt er að nota JS bókasafnið án kerfismáls þess, en mörgum forriturum finnst það dýrmætt vegna skýrleika þess og áþreifanlegs þegar unnið er með notendaviðmót sem er búið til úr JavaScript kóða. Að auki auðveldar viðbótin React að búa til ógildar augnabliks- og villutilkynningar.

Myndun tjáningar í kerfismálinu

JSX gerir þér kleift að nota hvaða vel skrifaða JavaScript orðatiltæki sem er í hrokknum axlaböndum í ferli.

JSX er líka tjáning Þegar frumkóði er bætekóðaður breytist hvaða JSX tjáning sem er í staðlað JS fallkall sem miðar á JavaScript flokkinn. Af þessu má skilja að hægt er að nota kerfisframlengingu opinbera forritunarmálsins í if handbókinni og í tímabil.

JSX er Hlutir Hlutirnir sem framlengingin táknar eru kölluð React elements. Þeir skýra niðurstöðuna sem verktaki vill sjá á skjánum. Bókasafnið þekkir þessa hluti og notar þá í því ferli að búa til og viðhalda Document Object Model.

Smáatriði flutningur

Upplýsingar eru margar litlu byggingareiningarnar sem mynda React forritin.
Upplýsingar eru myndin sem verktaki vill sjá á endanum á skjánum. Í samanburði við skjalahlutalíkanþætti eru bókasafnsþættir einfaldir og taka ekki mikið fjármagn. Frumefni eru efnisþættir íhlutanna.

Íhlutir og leikmunir

Íhlutir gera það mögulegt að skipta HÍ í sjálfstæða hluta sem auðveldara er að vinna sérstaklega í. Hægt er að sameina þær og nota margoft. Að mestu leyti er virkni íhlutanna svipuð og virkni JavaScript forritunarmálsins sjálfs. Þeir taka inntaksupplýsingar, sem kallast leikmunir, og skila React þáttum sem gefa til kynna þróunarlíkanið sem verktaki vill sjá á skjánum.

Afbrigði af íhlutum: hagnýtur og flokkur

Auðveldast er að vísa til bókasafnshluta sem falls.
Íhlutir geta einnig verið sýndir á ES6 flokkssniði.

Áhugavert! React bókasafnið skilgreinir þessar tvær tegundir af íhlutum sem svipaða.

leikmunir

Leikmunir eru óbreytanlegir hlutir sem eru eingöngu skriflegir. Þess vegna ætti hluti ekki að skrifa neitt í leikmuni sína, sama hvers konar hann tilheyrir.

Ástand og lífsferill

Fyrst skulum við reikna út hvernig á að beita ríkinu almennilega í vinnunni. Það eru þrjú mikilvæg atriði sem þarf að vita um ástand íhluta:

1. Ekki breyta ástandinu beint, notaðu setState aðferðina. Mundu að eina svæðið þar sem þú getur breytt ástandinu beint er smiðurinn.
2. Ríkisuppfærslur gætu ekki verið samstilltar.
3. Upplýsingaflæði hefur eina stefnu. Í íhlutasmíði veit enginn þeirra hvort ríkið sé úthlutað öðrum þáltill. Það skiptir ekki máli hvernig þessi eða hinn óháði starfræni þáttur var myndaður – með því að nota hagnýtt eða flokkunartæki. Þetta er kallað „downstream“ gagnaflæði. Ríki er alltaf skilgreint fyrir einhvern þátt og byggingatengsl þessa ástands geta aðeins haft áhrif á hluta sem eru staðsettir „fyrir neðan“ í stigveldisröðinni.

Venjulega er talað um ríkið sem „staðbundið“, „innra“ eða falið. Það er aðeins sýnilegt virka þættinum sjálfum og ósýnilegt öðrum hlutum React. Í bókasafnsforritum, hvort sjálfstæður virkur þáttur er búinn tilteknu ástandi eða ekki, er innri þróun þessa hluta, sem getur breyst með tímanum. Það er líka áhugavert að í verkinu er hægt að sameina íhluti með og án ástands.

Atburðagreining

Ferlið við að flokka atburði í React íhlutum er svipað og meðhöndlun atvika í skjalahlutalíkönum. Hins vegar eru nokkrir eiginleikar sem aðgreina þá hver frá öðrum:

1. Viðburðir í JavaScript bókasafninu eru nefndir í öðrum stíl en þeim venjulegu.
2. Með því að nota System Extended Programming Language, sendir verktaki undirrútínu sem atburðastjórnun í stað strengs.

Skilyrt flutningur þátta

JavaScript bókasafnið gerir það mögulegt að brjóta rökfræði þess að þróa þætti í sjálfstæða hluti. Hægt er að birta þær til almennrar birtingar eða fela þær, allt eftir því hvaða ástandi þær eru búnar í augnablikinu. Skilyrt flutningur þátta virkar á sömu reglu og skilyrtar tjáningar sem byggjast á JavaScript forritunarmálinu. Stundum gerist það að bókasafnið krefst skýringa á því hvernig ríkið hefur áhrif á að fela eða birta suma þætti. Hér er rökréttara að nota skilyrtan JS hjálpar eða tjáningar svipaðar og if.

Að breyta íhlutum

Hægt er að bæta React bókasafnsþáttum við breytur. Þetta er hagnýt lausn þegar einhver skilyrði gefa til kynna hvort einhver hluti hlutans eigi að teikna, eða það er ekki skynsamlegt, á meðan restin af hlutanum er óbreytt.

Listar og lyklar

Þessi hluti inniheldur nokkra þætti:

1. Að teikna marga þætti . Notandinn getur myndað sett af þáttum og fellt það inn í forritunarmál kerfisins með því að nota krullaðar axlabönd.
2. Grunnlisti yfir þætti . Oft stilla notendur og forritarar lista beint innan íhluta.

Lyklar

Lykill í React JavaScript bókasafninu táknar sérhæft tól sem þarf að slá inn þegar listi yfir íhluti er búinn til. Lyklar hjálpa JavaScript bókasafninu að bera kennsl á hvaða atriði hafa verið breytt, bætt við eða fjarlægð. Mikilvægt er að merkja þau þannig að React geti tengt íhluti byggingargagnanna eftir að ákveðinn tími er liðinn.

Eyðublöð

Í JS bókasafninu virka staðlaðar áritunarmálsþættir aðeins öðruvísi en hlutir í skjalahlutalíkaninu, vegna þess að formþættir hafa upphaflega falið ástand.

Stýrðir hlutir

Á stöðluðu álagningarmáli hafa form eins og inntak , val , textasvæði tilhneigingu til að viðhalda sínu eigin ástandi og uppfæra það þegar verktaki slær inn nýjar upplýsingar. React.js ástand skilgreinir alltaf gildi innsláttarreita í stýrðu samsetningareiningu. Þó að þetta gefi til kynna að notandinn verði að skrifa aðeins meira en upphaflegan kóðann, er nú hægt að senda þetta gildi til annarra hluta notendaviðmótsins.

Uppgangur ríkisins

State lifting er staðlað sniðmát sem sérhver verktaki ætti að vera meðvitaður um og geta beitt í vinnuferlinu. Notkun þess mun útrýma flóknum og venjulega gagnslausum stjórnunarmynstri ríkisins.

Hvers vegna er svona nauðsynlegt að hafa stjórn á uppgangi ríkisins?

Það er nauðsynlegt að hækka ríkið á stigi fyrri hluta fyrir þá hluta sem krefjast þess svo allir þættir geti tekið þátt í ríkinu. Stöðugt ástand mun gera það auðveldara að dreifa því meðal allra þátta sem treysta á það.

Samsetning vs arfleifð

React.js inniheldur sterkt samsetningarlíkan, svo það er mælt með því að nota ferlið við að byggja heild úr hlutum í stað arfs til að endurnýta kóða sem skrifaður var fyrr á milli þátta. Þannig, leikmunir og hæfileikinn til að búa til eina heila samsetningu úr íhlutum, veita þróunaraðilanum þann sveigjanleika sem þarf til að búa til skel og hegðun frumefnisins á sérstakan og öruggan hátt.

Áminning! Íhlutir geta tekið ótengda leikmuni, þar á meðal grunnhluta sem mynda bókasöfn eða aðgerðir.

Ef þú þarft að nota útlitslausa aðgerð til að vinna með íhluti í annað eða þriðja skipti skaltu draga hana út í sérstaka JS-einingu. Færðu það í íhlut og notaðu myndaða aðgerðina án frekari stækkunar. React eða Vue eða Angular, hvað á að velja: https://youtu.be/Nm8GpLCAgwk

React.js meginreglur

Öll hugmyndafræði JavaScript bókasafnsins er falin í React handbókinni. Svo virðist sem þetta sé langt og skiptir ekki svo miklu máli, en margir notendur halda því fram að eftir lestur hafi allt fallið á sinn stað. Skjölin eru nokkuð gömul en samt mikils virði og mikilvæg –
https://ru.reactjs.org/docs/thinking-in-react.html . React js einkatími https://ru.reactjs.org/tutorial/tutorial.html

Virkni React.js bókasafnsins

Með því að nota JavaScript bókasafnið fær notandinn tækifæri til að gefa alla sína athygli beint að HÍ þróunarferlinu og íhlutum forritsins, síst af öllu að vera truflaður af myndun og hugsanlegum göllum hins skrifaða kóða. Bókasafnið gerir þér kleift að þróa forrit hraðar, gerir það auðveldara að stilla og breyta íhlutum og ferli alls verkefnisins í heild. Þannig inniheldur React.js þætti sem bera ábyrgð á samskiptum í alþjóðlegu neti, notendaviðmóti, stjórnunarástandi forrita og getu til að leysa önnur flókin mál. Bókasafnið hefur einnig eftirfarandi hagnýta eiginleika:

1. Hagkvæmni . React.js er fáanlegt á smækkuðu sniði. Ekki þarf að stilla þennan þétta pakka greinilega. Það inniheldur nú þegar kóðaskiptingareiginleika sem dregur úr þeim tíma sem það tekur að opna vafraútgáfu síðunnar, þar sem þessi valkostur kemur í veg fyrir að íhlutir séu birtir á sama tíma.
2. Dælt vistkerfi og samræmi . Mikill fjöldi verkfæra er til á bókasafninu, studd af öðrum síðum, sem gerir notandanum kleift að þróa ný flókin forrit í hvaða tilgangi sem er.
3. Full virkni . Helsti kosturinn við JavaScript bókasafnið er að allar nýjar útgáfur af pallinum uppfylla kröfur þeirra gömlu, þannig að hægt er að nota bæði gömlu og uppfærðu útgáfuna, þær eru allar studdar og eiga við í dag. Áður gefnar útgáfur úreldast ekki eftir nýjustu uppfærslurnar.

Hagnýt notkun

Á aðalsíðu bókasafnsins, í leiðbeiningum fyrir notendur, eru nokkur lýsandi dæmi um notkun React í reynd. Þú getur leiðrétt þau handvirkt og reynt að keyra þau. Jafnvel ef þú ert nýr notandi og skilur ekki kjarna og rökfræði bókasafnsins skaltu stilla kóðann að þínum smekk og sjá niðurstöðuna.

Hagnýt notkun React þegar þú skrifar viðskiptavélmenni í JavaScript

Mikilvægt er að átta sig á því að verktaki forritar ekki JS, heldur skrifar forskriftir (forskriftir). því, með því að nota bókasafnið, getur verktaki skrifað kóða fyrir síðari viðskiptavélmenni sem notaður er í viðskiptaskyni og einnig haldið áfram að hanna útlit sitt á grundvelli þessa vettvangs. Reyndar er viðskiptavélmenni fyrir viðskipti líka forrit, þar af er mikið magn þróað með React.js. Hins vegar verða sumar aðgerðir og innri hluti vélbúnaðarins enn að gera á öðrum síðum sem bjóða upp á verkfæri sem henta fyrir þetta.

GitHub og React.js

GitHub er vettvangur sem hýsir allar útgáfur af verkefnum. Notandinn tengir hýsingu, fer í gegnum skráningarferlið á opinberu GitHub vefsíðunni og býr síðan til netgeymslu þar sem hann flytur allar skrár frá Git.
Git er vinsælasta og viðeigandi verkefnisútgáfustýringarþjónustan í dag og GitHub er fjarkóðageymsla.

Tilvísun! Aðeins þeir notendur sem hafa fengið viðeigandi hlekk með leyfi hafa aðgang að því að breyta og hlaða niður skrám.

Skjöl

Öll kennsluefni og uppfært efni varðandi JavaScript bókasafnið eru uppfærð með nýjustu uppfærslunni. Hönnuðir safna einnig saman og birta fyrir almennan lestur gamlar útgáfur af skjölunum, settar á sérstaka síðu bókasafnsins. Þess vegna verður auðveldara fyrir byrjendur að ná tökum á færni síðustjórnunar: bæði gamalt og nýtt efni – allt er hér, aðgangur er ókeypis fyrir alla.

Athugið! Ekki gleyma að lesa handbækurnar. Skoðaðu allavega – nú þegar mun flest af því sem virtist óskiljanlegt falla á sinn stað.

React bókasafnið er vinsæll og viðeigandi vettvangur í dag. Fjölhæfni þess gerir forriturum kleift að gera verkefni af betri gæðum og á skemmri tíma. Auk þess að þekkja vettvanginn og hafa færni til að nota hann gerir sérfræðing eftirsóttari á vinnumarkaði.