Izveidojiet savu React lietojumprogrammu, izmantojot Blueprint UI rīkkopu

React lietojumprogrammas izveide no nulles var būt laikietilpīgs un izaicinošs uzdevums, īpaši, ja runa ir par stila komponentiem. Šeit noder Blueprint UI Toolkit. Rīku komplekts ir atkārtoti lietojamu UI komponentu kopums, kas var palīdzēt izveidot konsekventas un vizuāli pievilcīgas saskarnes jūsu React lietojumprogrammām.

Uzziniet par Blueprint UI Toolkit pamatiem un to, kā to izmantot, lai izveidotu vienkāršu React lietojumprogrammu.

Blueprint UI Toolkit ir a React UI komponentu bibliotēka. Tas satur jau sagatavotu komponentu kolekciju, ko ir viegli lietot un pielāgot. Jūs varat izmantot šos iepriekš izstrādātos komponentus vai pārveidot tos, lai tie atbilstu jūsu īpašajām vajadzībām.

Blueprint UI Toolkit komponentos ietilpst pogas, veidlapas, modāļi, navigācija un tabulas. Izmantojot šos komponentus, varat ietaupīt laiku un pūles, jo jums nav jāprojektē un jāveido katrs komponents no jauna.

Lai sāktu darbu ar Blueprint UI Toolkit, jums tas ir jādara izveidot React lietojumprogrammu.

Kad projekts ir iestatīts, varat instalēt Blueprint UI Toolkit, izmantojot jebkuru izvēlēto Node pakotnes instalētāju. Lai instalētu Blueprint UI Toolkit, izmantojot npm, terminālī palaidiet šādu komandu:

npm instalējiet @blueprintjs/core

Lai tā vietā izmantotu dziju, palaidiet šo komandu:

dziju pievieno @blueprintjs/core

Kad esat instalējis Blueprint UI Toolkit, varat izmantot jūsu izvēlētos komponentus savā React lietojumprogrammā.

Pirms komponentu izmantošanas iekļaujiet CSS failus no Blueprint UI Toolkit:

@importēt"normalize.css";
@importēt"@blueprintjs/core/lib/css/blueprint.css";
@importēt"@blueprintjs/icons/lib/css/blueprint-icons.css";

Pievienojot iepriekš norādīto koda bloku savam CSS failam, tā komponentiem tiek piemēroti Blueprint UI stili.

Piemēram, lai savai lietojumprogrammai pievienotu pogu, izmantojiet Poga komponents no Blueprint UI Toolkit:

imports Reaģēt no"reaģēt";
imports { Button } no"@blueprintjs/core";
funkcijuApp() {
atgriezties (



"panākumi" teksts="Noklikšķiniet uz mani" ikona="atjaunot" mazs={taisnība}/>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šis koda bloks pievieno pogu jūsu lietojumprogrammai, izmantojot Poga komponents. The Poga komponents ņem rekvizītus, piemēram, nolūks, tekstu, ikonu, mazs, un liels.

The nolūks prop nosaka pogas raksturu, kas atspoguļojas tās fona krāsā. Šajā piemērā pogai ir a panākumus nolūks, kas tai piešķir zaļu fona krāsu. Blueprint UI piedāvā vairākus galvenos nolūkus, tostarp primārs (zils), panākumus (zaļš), brīdinājums (oranža), un briesmas (sarkans).

Varat norādīt tekstu, kas parādās pogas iekšpusē, izmantojot tekstu prop. Varat arī pievienot ikonas pogai, izmantojot ikonu prop. Līdzās ikonu rekvizīts ir labās puses ikona prop, kas pievieno ikonu pogas labajā pusē.

Visbeidzot, liels un mazs Būla rekvizīti norāda pogas izmēru. The liels prop padara pogu lielāku, savukārt mazs prop padara to mazāku.

Iepriekšējais koda bloks ģenerēs pogu, kas izskatās šādi:

Varat arī izmantot Enkura poga komponents, lai lietojumprogrammā izveidotu pogu. The Enkura poga komponents ir specializēta Button komponenta versija, kas ir īpaši paredzēta izmantošanai kā saite.

Šis komponents pieņem daudzus tos pašus rekvizītus kā Button komponents, tostarp tekstu, liels, mazs, nolūks, un ikonu. Tas arī pieņem href un mērķis rekvizīti.

The href prop norāda URL, uz kuru poga ir saistīta, un mērķis prop norāda saites mērķa logu vai rāmi:

imports Reaģēt no"reaģēt";
imports { Enkura poga } no"@blueprintjs/core";
funkcijuApp() {
atgriezties (



 href=" https://example.com/"
 nolūks ="primārs"
 teksts="Noklikšķiniet uz mani"
 mērķis="_blank"
 />
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šis koda bloks iepriekš atveido an Enkura poga komponents. Komponents href prop vērtība ir " https://example.com/” un mērķis prop vērtība ir “_blank”, kas nozīmē, ka saite tiks atvērta citā pārlūkprogrammas cilnē vai logā.

Vēl viena būtiska Blueprint UI rīkkopas sastāvdaļa ir Kart komponents. Šis ir atkārtoti lietojams komponents, kas parāda informāciju pievilcīgā vizuālā veidā.

Kartes komponents aizņem divus balstus interaktīvs un pacēlums. The pacēlums prop kontrolē kartes ēnas dziļumu, ar augstākām vērtībām radot pamanāmāku ēnu efektu.

The interaktīvs prop pieņem Būla vērtību. Ja tas ir iestatīts uz patiesu, kartītē tiek iespējota mijiedarbība ar peles kursoru un klikšķi, ļaujot tai reaģēt uz lietotāja ievadi.

Piemēram:

imports Reaģēt no"reaģēt";
imports { Karte, pacēlums } no"@blueprintjs/core";
funkcijuApp() {
atgriezties (



taisnība} elevation={Paaugstinājums. DIVI}>
Šī ir karte</h2>


Šis ir kāds saturs iekšā mana karte</p>
 </Card>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šajā piemērā Kart komponentam ir nosaukums un saturs. The interaktīvs rekvizīts ir iestatīts uz taisnība.

Jūs arī importējat Pacēlums komponents no @blueprintjs/core. The Pacēlums komponents ir uzskaitījums, kas definē iepriekš definētu vērtību kopu, ko var izmantot, lai iestatītu komponenta ēnas dziļumu.

Šeit ir pieejamās vērtības Pacēlums enum:

1. Pacēlums. NULLE: šī vērtība iestata ēnas dziļumu uz 0, norādot, ka komponentam nav lietotas ēnas.
2. Pacēlums. VIENS: šī vērtība iestata ēnas dziļumu uz 1.
3. Pacēlums. DIVI: šī vērtība iestata ēnas dziļumu uz 2.
4. Pacēlums. TRĪS: šī vērtība iestata ēnas dziļumu uz 3.
5. Pacēlums. ČETRI: šī vērtība iestata ēnas dziļumu uz 4.
6. Pacēlums. PIECI: šī vērtība iestata ēnas dziļumu uz 5.

Atveidojot iepriekš minēto koda bloku, ekrānā tiks parādīts šāds attēls:

Blueprint UI Toolkit komponentus ir viegli pielāgot. Varat izmantot tradicionālo CSS lai mainītu komponentu izskatu, vai arī varat izmantot komplektācijā iekļautos rekvizītus, lai mainītu to uzvedību.

Piemēram, varat pielāgot pogas izskatu, ievadot a klasesNosaukums rekvizīts:

imports Reaģēt no"reaģēt";
imports { Button } no"@blueprintjs/core";
funkcijuApp() {
atgriezties (



"Noklikšķiniet uz mani" klasesNosaukums="mana poga"/>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Iepriekš minētais koda bloks pogai piemēro pielāgotu klasi, ļaujot mainīt tās izskatu, izmantojot CSS:

.mana poga{
robeža-rādiuss: 10px;
polsterējums: 0.4rem 0.8rem;
}

Lietojot šos stilus, poga izskatīsies apmēram šādi:

Blueprint lietotāja saskarnē ir daudz vairāk

Blueprint UI piedāvā vairāk komponentu, nekā minēts iepriekš, piemēram, Alert, Popover, Toast utt. Tomēr, izmantojot sniegto informāciju, varat izveidot vienkāršu React lietojumprogrammu, izmantojot Blueprint UI.

Varat veidot savu React lietojumprogrammu, izmantojot dažādas metodes. JS bibliotēkās varat izmantot tradicionālo CSS, SASS/SCSS, Tailwind CSS un CSS, piemēram, emocijas, stila komponentus utt.