Gada bibliotēkas JavaScript kas ir atbildīgi par manipulācijām ar skatiem un veidu, kādā tie parāda informāciju, arvien vairāk ietver vairāk funkciju, kas atvieglo lietojumprogrammu izstrādi izstrādātājam un patīkamāku lietotājiem, kuri tās izmanto.
Starp šīm bibliotēkām mums ir Reaģēt, kas ir bibliotēka JavaScript atvērtā pirmkoda galvenokārt koncentrējās uz lietotāju saskarņu izveidi vienas lapas lietojumprogrammas vai vienas lapas lietojumprogrammas, kuras izmanto Facebook un Instagram rīkoties ar visu, kas attiecas uz skatiem, atrisinot lielo lietojumprogrammu problēmu, kad lietotājam parādītie dati pastāvīgi mainās.
Reaģēšanas funkcijas
Lai atrisinātu šo problēmu, kuru mēs minējām Reaģēt savu filozofiju pamato ar šādām īpašībām:
VienkāršiŠī īpašība izsaka to, kā mūsu lietojumprogrammai vajadzētu izskatīties noteiktā brīdī, kādā veidā tā tiek veikta un ko tā dara Reaģēt ir tas, ka tas automātiski apstrādā visus lietotāja interfeisa atjauninājumus, kad lietojumprogrammā tiek veiktas būtiskas izmaiņas.
DeklaratīvsKad informācija mainās mūsu lietojumprogrammā Reaģēt veic mūsu lapas atsvaidzināšanas funkciju, bet tikai tad, ja informācija ir mainījusies.
Kombinējamu komponentu konstrukcijaKad mēs runājam par Reaģēt, mēs galvenokārt runājam par atkārtoti lietojamu komponentu izveidi, patiesībā ar šo bibliotēku mēs lielāko daļu laika darām komponentu veidošanu, un, pateicoties tam, ka tie ir iekapsulēti, tie ārkārtīgi padara koda atkārtotu izmantošanu, testēšanu un funkciju atdalīšanu vienkāršs.
Notiek reaģēšana
Tagad, kad mēs zinām, no kā tas sastāv Reaģēt un tās īpašības, mēs iegūsim jaunāko bibliotēkas versiju un veiksim vienkāršu ieviešanu, lai parādītu slaveno Hello World.
Lai iegūtu jaunāko versiju, mēs lejupielādējam planšetdatoru ar bibliotēku, izmantojot šo saiti. Pēc lejupielādes mēs izpakojam un ievietojam saturu mapē ar nosaukumu Sveiki_reakcija un iekšpusē mēs izveidojam failu ar nosaukumu hello_react.html kurā būs šāds saturs:
Kā redzam, tas ir diezgan vienkāršs kods, kas ļauj mums padarīt tekstu mūsu galvenajā skatā, pateicoties iekļaušanai reaģēt.js. Turklāt mēs izmantojam JSX kas ir sintakse XML mūsu iekšienē JavaScript un pēc tam veiciet transformāciju pārlūkprogrammā, kuru mēs varam izmantot, pateicoties otrās bibliotēkas ieviešanai JSXTransformer.jsPapildus tam mēs varam padarīt savu kodu lasāmāku un modulārāku, atdalot tā loģiku, mēs to varam sasniegt, izveidojot divus failus, šim nolūkam mēs izveidojam vienu ar nosaukumu labdien_react.js un mēs ievietojam šādu kodu:
React.render (, document.getElementById ('example_react'));Tad mūsu HTML mēs iesakām skripta tagā iekļaut mūsu .js failu, un mums būs tāda pati darbība:
Redzēsim, kad mēs izpildām savu piemēru pārlūkprogrammā:
Kā redzam, manipulācija ar datiem bija diezgan vienkārša, tomēr ir labāks veids, kā to ieviest Reaģēt, tā kā mēs to darām, kods izmanto transformatoru JSX pārlūkprogrammā, kā mēs redzēsim ziņojumā, ko saņemam, izmantojot konsoli.
Šis konsoles ziņojums sniedz mums risinājumu šim nelielajam brīdinājumam, un tas ir, lai iepriekš apkopotu mūsu .js kodu, šim nolūkam mēs izmantosim pakotņu pārvaldnieku Node.js šim uzdevumam, tādēļ, ja mūsu datorā nav instalēta šī vide, mēs ejam uz oficiālo lapu un lejupielādējam to gadījumā, ja mēs strādājam operētājsistēmā Windows, un gadījumā, ja mēs strādājam operētājsistēmā Linux, mēs varam veikt tālāk norādītās darbības. šī apmācība.
Mūsu koda iepriekšēja apkopošana
Lai veiktu šo uzdevumu, mēs ejam uz mūsu Node.js konsoli un ar palīdzību npm mēs uzstādījām rīku Reaģēt komandu konsolei reaģēšanas rīki mums jāizpilda tikai šī rinda:
npm instalējiet -g reaģēšanas rīkusTagad mēs tulkojam savu kodu šādā valodā JavaScript tīrs šādi:
jsx -skatīties hello_react.jsTas ne tikai tulko mūsu kodu, bet arī automātiski ģenerē failu labdien_react.js Katru reizi, kad tiek veiktas izmaiņas mūsu lietojumprogrammā, redzēsim konsoles atbildi, palaižot šo komandu:
Beidzot mēs pārveidojam savu HTML noņemot bibliotēkas iekļaušanu JSXTransformer.js tā kā mums tas nav vajadzīgs un mēs iekļaujam savu skriptu parastajā veidā, redzēsim:
Labdien, React!Kā jau minējām, pēdējā darbība, ko veicam, izmantojot konsoli, automātiski ģenerē failu ikreiz, kad veicam izmaiņas mūsu lietojumprogrammā, tādēļ, ja esam veikuši izmaiņas, konsole mūs par to informēs šādi:
Kā redzam, mums ir divi paziņojumi, ka failā ir veiktas izmaiņas, kuras faktiski tika veiktas attiecībā uz bibliotēkas noņemšanu un JavaScript faila parasto iekļaušanu.
Tā mēs pabeidzām šo apmācību, kur mēs varētu spert pirmos soļus Reaģēt un tā ieviešana mūsu lietojumprogrammās, lai palīdzētu mums izveidot komponentus datu vizualizēšanai mūsu uzskatos, pārbaudot, vai tas ir ne tikai vienkārši, bet arī nodrošina rīkus, kas ievērojami atvieglos mūsu attīstību.
