Bygg din React-applikasjon med Blueprint UI Toolkit

Å bygge en React-applikasjon fra bunnen av kan være en tidkrevende og utfordrende oppgave, spesielt når det kommer til stylingkomponenter. Det er her Blueprint UI Toolkit kommer godt med. Verktøysettet er et sett med gjenbrukbare UI-komponenter som kan hjelpe deg med å lage konsistente og visuelt tiltalende grensesnitt for React-applikasjonene dine.

Lær om det grunnleggende om Blueprint UI Toolkit og hvordan du bruker det til å bygge en enkel React-applikasjon.

Blueprint UI Toolkit er en React UI-komponentbibliotek. Den inneholder en samling av ferdiglagde komponenter som er enkle å bruke og tilpasse. Du kan bruke disse forhåndsdesignede komponentene ut av esken eller modifisere dem for å passe dine spesifikke behov.

Blueprint UI Toolkits komponenter inkluderer knapper, skjemaer, modaler, navigasjon og tabeller. Ved å bruke disse komponentene kan du spare tid og krefter siden du ikke trenger å designe og bygge hver komponent fra bunnen av.

For å komme i gang med Blueprint UI Toolkit, må du opprette en React-applikasjon.

Når prosjektet er satt opp, kan du installere Blueprint UI Toolkit ved å bruke et hvilket som helst Node-pakkeinstallasjonsprogram du velger. For å installere Blueprint UI Toolkit ved hjelp av npm, kjør følgende kommando i terminalen din:

npm installer @blueprintjs/core

For å bruke garn i stedet, kjør denne kommandoen:

garn legg til @blueprintjs/core

Når du har installert Blueprint UI Toolkit, kan du bruke komponentene du ønsker i React-applikasjonen.

Før du bruker komponentene, ta med CSS-filene fra Blueprint UI Toolkit:

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

Når du legger til kodeblokken ovenfor i CSS-filen din, brukes Blueprint UI-stilene til komponentene.

For å legge til en knapp i applikasjonen din, bruk for eksempel Knapp komponent fra Blueprint UI Toolkit:

import Reagere fra"reagere";
import { Knapp } fra"@blueprintjs/core";
funksjonApp() {
komme tilbake (



"suksess" tekst="Klikk på meg" icon="forfriske" liten={ekte}/>
 </div>
 );
}
eksportmisligholde App;

Denne kodeblokken legger til en knapp til applikasjonen din ved hjelp av Knapp komponent. De Knapp komponent tar rekvisitter som f.eks hensikt, tekst, ikon, liten, og stor.

De hensikt prop definerer typen av knappen, som reflekteres i bakgrunnsfargen. I dette eksemplet har knappen en suksess intent som gir den en grønn bakgrunnsfarge. Blueprint UI tilbyr flere kjernehensikter, inkludert hoved (blå), suksess (grønn), advarsel (oransje), og fare (rød).

Du kan spesifisere teksten som vises inne i knappen med tekst rekvisitt. Du kan også legge til ikoner på knappen ved å bruke ikon rekvisitt. Ved siden av ikon prop er høyreIkon prop, som legger til ikonet på høyre side av knappen.

Til slutt, den stor og liten boolske rekvisitter spesifiserer størrelsen på knappen. De stor prop gjør knappen større, mens liten prop gjør den mindre.

Den tidligere kodeblokken vil generere en knapp som ser slik ut:

Du kan også bruke Ankerknapp komponent for å lage en knapp i applikasjonen din. De Ankerknapp komponent er en spesialisert versjon av Button-komponenten som er eksplisitt designet for bruk som en lenke.

Denne komponenten godtar mange av de samme rekvisittene som Button-komponenten, inkludert tekst, stor, liten, hensikt, og ikon. Den aksepterer også href og mål Rekvisitter.

De href prop spesifiserer URL-en knappen lenker til, og mål prop spesifiserer målvinduet eller rammen for lenken:

import Reagere fra"reagere";
import { AnchorButton } fra"@blueprintjs/core";
funksjonApp() {
komme tilbake (



 href=" https://example.com/"
 hensikt="hoved"
 tekst="Klikk på meg"
 target="_blank"
 />
 </div>
 );
}
eksportmisligholde App;

Denne kodeblokken ovenfor gjengir en Ankerknapp komponent. Komponentens href prop-verdien er " https://example.com/” og mål prop-verdien er "_blank" som betyr at koblingen åpnes i en annen nettleserfane eller et annet vindu.

En annen viktig komponent i Blueprint UI Toolkit er Kort komponent. Dette er en gjenbrukbar komponent som viser informasjon på en tiltalende visuell måte.

Kort-komponenten tar to rekvisitter interaktiv og høyde. De høyde prop kontrollerer skyggedybden på kortet, med høyere verdier som gir en mer fremtredende skyggeeffekt.

De interaktiv prop godtar en boolsk verdi. Når den er satt til sann, aktiverer den sveve- og klikk-interaksjoner på kortet, slik at det kan svare på brukerinndata.

For eksempel:

import Reagere fra"reagere";
import { Kort, høyde } fra"@blueprintjs/core";
funksjonApp() {
komme tilbake (



ekte} elevation={Elevation. TO}>
Dette er et kort</h2>


Dette er noe innhold i kortet mitt</p>
 </Card>
 </div>
 );
}
eksportmisligholde App;

I dette eksemplet er Kort komponenten har en tittel og noe innhold. De interaktiv prop er satt til ekte.

Du importerer også Høyde komponent fra @blueprintjs/core. De Høyde komponent er en enum som definerer et sett med forhåndsdefinerte verdier du kan bruke til å angi en komponents skyggedybde.

Her er de tilgjengelige verdiene for Høyde enum:

1. Høyde. NULL: Denne verdien setter skyggedybden til 0, noe som indikerer at komponenten ikke har noen påført skygge
2. Høyde. EN: Denne verdien setter skyggedybden til 1.
3. Høyde. TO: Denne verdien setter skyggedybden til 2.
4. Høyde. TRE: Denne verdien setter skyggedybden til 3.
5. Høyde. FIRE: Denne verdien setter skyggedybden til 4.
6. Høyde. FEM: Denne verdien setter skyggedybden til 5.

Å gjengi kodeblokken ovenfor vil vise et bilde på skjermen din som ser slik ut:

Blueprint UI Toolkit-komponenter er enkle å tilpasse. Du kan bruke tradisjonell CSS for å endre utseendet til komponentene, eller du kan bruke rekvisittene som følger med for å endre oppførselen deres.

Du kan for eksempel tilpasse utseendet til en knapp ved å legge inn en klassenavn rekvisitt:

import Reagere fra"reagere";
import { Knapp } fra"@blueprintjs/core";
funksjonApp() {
komme tilbake (



"Klikk på meg" klassenavn='min-knapp'/>
 </div>
 );
}
eksportmisligholde App;

Kodeblokken ovenfor bruker en tilpasset klasse på knappen, slik at du kan endre utseendet ved hjelp av CSS:

.min-knappen{
grense-radius: 10px;
polstring: 0.4rem 0.8rem;
}

Hvis du bruker disse stilene, vil knappen din se litt slik ut:

Det er mye mer til Blueprint UI

Blueprint UI tilbyr flere komponenter enn nevnt ovenfor, for eksempel Alert, Popover, toast, etc. Men med informasjonen som er gitt, kan du bygge en enkel React-applikasjon ved å bruke Blueprint UI.

Du kan style React-applikasjonen din ved å bruke forskjellige metoder. Du kan bruke tradisjonell CSS, SASS/SCSS, Tailwind CSS og CSS i JS-biblioteker som følelser, stilede komponenter, etc.