Kas ir React ASSETS?

Ja esat iepzinies ar maniem iepriekšējiem rakstiem tad Jums vajadzētu būt pazīstamam ar React komponentu izveidi un teksta pievienošanu tiem. Taču tikai ar teksta attēlošanu lietotnē vien neiztikt, un lietotāji sagaida tādas lietas kā attēli, video vai audio, lai nodrošinātu pilnīgāku izmantošanas pieredzi. Par laimi, jūs esat šeit, lai uzzinātu par līdzekļiem un to izmantošanu savas lietotnes pilnveidošanai.

Šajā rakstā jūs uzzināsiet, kas ir ASSETS un kā izstrādātāji tos organizē React lietotnes failos. Jūs arī uzzināsiet dažus izplatītākos veidus, kā importēt asset failus, kas tiks izmantoti jūsu React lietotnēs.

Vai Jūs saprotat, ko izstrādātāji domā, minot terminu “assets”?

Programmā React assets līdzekļi var būt, piemēram:

• attēli,
• stila lapas,
• fonti,
• multivides faili,
• vai būtībā jebkurš fails, kas nepieciešams jūsu lietotnei izpildlaikā.

Citiem vārdiem sakot, assets ir visi faili, kuriem jūsu React ir nepieciešama piekļuve, lai tā darbotos kā paredzēts. Piemēram, varat kodēt savu lietotni, lai parādītu konkrētus attēlus vai izmantotu noteiktus fontus. Bet, ja palaižot savu lietotni šie nepieciešamie faili nav pieejami, lietotnes izskats un darbība var nebūt tāda, kā tas ir paredzēts to izstrādājot. Piemēram, vēlamā attēla vietā lietotne var parādīt tikai vietturi, sākt izmantot tikai noklusējuma fontu, nevis tai speciāli paredzēto, vai tai var iztrūkt svarīgi stila elementi. Tāpēc ir svarīgi, lai līdzekļi assets būtu viegli pieejami jūsu komponentiem.

Izplatīts veids, kā to izdarīt, ir avota “src” mapei pievienot assets mapi un saglabāt tajā visus savus lietotņu līdzekļus. Dažus līdzekļus var ievietot arī publiskajā mapē. Piemēram, noklusējuma React instalācijā jūs redzēsit, ka daži attēli, piemēram, favicon un Logo 512, tiek saglabāti pēc noklusējuma. Vispārējais līdzekļu uzglabāšanas noteikums ir tāds, ka, ja jūsu lietotni var kompilēt bez tās, varat to paturēt publiskajā mapē. Piemēram, favicon atrodas publiskajā mapē, jo neviens komponents no tā nav atkarīgs. Citiem vārdiem sakot, React nav jāizmanto favicon fails, lai apkopotu visus komponentus lietotnē, kas tiks rādīta jūsu vietējā pārlūkprogrammā, kamēr veidojat savu lietotni. Tomēr pieņemsim, ka jums ir attēls, kas jāimportē kādā no lietotnes komponentiem, tad to vislabāk glabāt speciālā tam paredzetā assets mapē.

Izpētīsim, kā lietot assets līdzekļus…

Tagad jūs esat iepazinies ar React līdzekļu assets jēdzienu. Pieņemsim, ka esat izstrādātājs, kas strādā pie lietotnes, kas palīdz cilvēkiem adoptēt dzīvniekus savā reģionā. Jūs esat izveidojis lielāko daļu lietotņu komponentu, taču jūs gaidāt, kad dzīvnieku aizsardzības biedrība, vai dzīvnieku patversme jums nosūtīs attēlus ar dzīvniekiem, kuri meklē jaunas mājas. Gatavojoties tam, lietojumprogrammā React izveidojiet līdzekļu mapi. Attēli tiek saņemti, un jūs tos ievietojat līdzekļu mapē, lai tos varētu pievienot jūsu komponentiem. Lai komponentam pievienotu assets failu, vispirms tas ir jāimportē. To var izdarīt, izmantojot importēšanas paziņojumu.

import kaķis from './assets/bildes/melnais-kakis.jpg'

Piemēram, pieņemsim, ka šie komponenti parādīs kaķa attēlu, jūs ierakstāt atslēgvārdu, “import” kam seko nosaukums, kuru vēlaties piešķirt savam asset īpašumam. To var saukt par gandrīz visu, kas jums patīk. Bet vislabāk ir pieturēties pie kaut kā aprakstoša, kas raksturo jūsu asset īpašumu. Piemēram, kaķis. Pēc tam ierakstiet atslēgvārdu no un pēc tam ceļu uz saviem līdzekļiem. Šajā gadījumā tas ir fails ar nosaukumu melnais-kakis.jpg , kas atrodas assets mapē.

Nākamais solis ir izveidot funkciju un uzrakstīt atgriešanas paziņojumu.

import kaķis from './assets/bildes/melnais-kakis.jpg'

function pieejamsAdopcijai() {

return (

<div>

<img src={kaķis} alt="adoptējama kaķa attēls" />

</div>

);

}

export default pieejamsAdopcijai;

Atgriešanas priekšrakstā jūs izmantojat attēla tagu un pēc tam iestatāt avota atribūtu, lai norādītu līdzekļa nosaukumu, kas ir kaķis figūriekavās.

Kā alternatīvu līdzekļa nosaukuma vietā varat norādīt ceļu uz līdzekļu mapi saistībā ar komponentu. To var izdarīt ar pieprasīto atslēgvārdu, kā arī figūriekavām, kas aptver JSX izteiksmi un darbojas kā norobežotāji.

function pieejamsAdopcijai() {
return (
<div>
<img src={require('./assets/bildes/melnais-kakis.jpg')} alt="adoptējama kaķa attēls" />
</div>
);
}

Ir svarīgi zināt, ka, izmantojot šo metodi, jums vairs nav nepieciešams importēšanas paziņojums. Tas ir tāpēc, ka jūs izmantojat nepieciešamo sintaksi tieši JSX izteiksmē, kas piešķirta SRC JSX atribūtam.

Šajā raksta daļā jūs uzzinājāt, kādi assets līdzekļi ir programmā React, un paraugpraksi to glabāšanai projektu mapēs. Jūs esat arī iemācījies dažus no visizplatītākajiem veidiem, kā importēt un izmantot attēlu līdzekļus savās React lietotnēs.