Gekissimo.net - Opi ansaitsemaan rahaa webilläsi Internetissä!

4 parasta tyylitöntä komponenttikirjastoa mukautettavien React-sovellusten rakentamiseen

Seuraava artikkeli auttaa sinua: 4 parasta tyylitöntä komponenttikirjastoa mukautettavien React-sovellusten rakentamiseen

Voit käyttää komponenttikirjastoja, jotka tarjoavat valmiiksi rakennettuja tyyliteltyjä elementtejä yksinkertaistamaan React-sovellusten kehitysprosessia. Nämä kirjastot voivat säästää paljon aikaa ja vaivaa, mutta ne voivat myös rajoittaa sovelluksesi tyylin hallintaa. Jos tarvitset enemmän React-sovellustesi tyylin hallintaa, harkitse tyylittömän komponenttikirjaston käyttöä.

Mitä ovat tyylittömien komponenttien kirjastot?

Tyylittömiä komponenttikirjastoja käytetään saavutettavien React-sovellusten kehittämiseen. Ne ovat kokoelmia uudelleenkäytettävistä käyttöliittymäkomponenteista ilman ennalta määritettyjä tyylejä. Ne tarjoavat sinulle käyttöliittymäelementtien perusrakenteen ilman tyyliä. Tämä antaa sinulle täydellisen hallinnan siihen, miltä komponentit näyttävät ja tuntuvat.

Tyylittömien komponenttien kirjastojen edut

Tässä on joitain tyylittömien komponenttikirjastojen käytön etuja:

  • Täydellinen tyylin hallinta: Tyylittömät komponenttikirjastot antavat sinulle täyden hallinnan siihen, miltä komponentit näyttävät. Voit käyttää mitä tahansa CSS- tai muotoilukehystä mukauttaaksesi komponentteja tarpeitasi vastaaviksi.
  • Nopeuta kehitystä: Tyylittömät komponenttikirjastot voivat auttaa sinua nopeuttamaan kehitystä tarjoamalla joukon valmiita komponentteja, joita voit käyttää sovelluksessasi.
  • Helppo huoltaa: Tyylittömiä komponenttikirjastoja on helppo ylläpitää, koska niitä ei ole liitetty tiukasti mihinkään tiettyyn tyylikehykseen. Tämä tarkoittaa, että voit helposti päivittää tyylin tekemättä muutoksia taustalla olevaan koodiin.

Radix UI on tyylitön komponenttikirjasto, joka keskittyy saavutettavuuteen. Se tarjoaa joukon käyttöliittymäkomponentteja, jotka on suunniteltu kaikkien käyttäjien saataville. Voit rakentaa kauniita React-sovelluksia Radix UI:n avulla.

Kun työskentelet Radix UI:n kanssa, voit asentaa tarvitsemasi yksittäiset komponentit koko kirjaston sijaan. Tämä varmistaa, että pidät sovelluksesi kevyenä.

Jos esimerkiksi tarvitset vain harmonikkakomponentin, voit asentaa sen sovellukseesi suorittamalla seuraavan komennon:

npm asennus @radix-ui/react-accordion

Kun olet asentanut haitarikomponentin, voit luoda haitareita React-sovelluksessasi.

Tässä on esimerkki harmonikkakomponentin käytöstä:

tuo React sanasta “react”
tuonti * harmonikkana osoitteesta “@radix-ui/react-accordion”

vie oletusfunktio App() {
paluu (



Onko tämä haitari tyylitön?
Kyllä. Se on tyylitön.

)
}

Yllä oleva koodilohko määrittää tyylittömän perus harmonikkakomponentin käyttämällä @radix-ui/react-accordion kirjasto, joka mahdollistaa kokoontaitettavat kohteet muokattavalla sisällöllä.

🔥 Empfohlen:  10 parasta verkkokaupan hinnoittelustrategiaa verkkosivustollesi [2023]

Koodi luo harmonikon, joka näyttää tältä:

React Aria -kirjasto on joukko koukkuja käyttöliittymien rakentamiseen Reactissa. Kirjasto helpottaa esteettömän verkkosovellusten luomista tarjoamalla kokoelman osia, jotka noudattavat saavutettavuuden parhaita käytäntöjä.

Adobe on kehittänyt ja ylläpitää React Aria -kirjastoa. Kirjasto on osa laajempaa Adobe Spectrum Design System -järjestelmää, joka tarjoaa kattavat suunnitteluohjeet ja resurssit helppokäyttöisten käyttöliittymien rakentamiseen. React Aria -kirjaston tarjoamat elementit ovat tyylittämättömiä, joten voit muokata elementtejä tarpeidesi mukaan.

Jos haluat käyttää React Ariaa React-sovelluksessasi, asenna se suorittamalla seuraava komento:

npm asenna react-aria

Tässä on esimerkki painikekomponentin luomisesta käyttämällä useButton koukku:

tuo React osoitteesta “react”
tuo {useButton} kohteesta ‘react-aria’;

function Button(rekvisiitta: mikä tahansa) {
anna ref = React.useRef(null);
anna { buttonProps } = useButton(props, ref);

paluu (

);
}

vienti oletuspainike;

Nyt voit tuoda ja renderöidä -painiketta komponenttia missä tahansa muussa valitsemassasi osassa.

Esimerkiksi:

tuo React osoitteesta “react”
tuontipainike osoitteesta ‘./Button’;

function App() {
paluu (

);
}

Vie oletussovellus;

Kun teet yllä olevan koodilohkon, se luo yksinkertaisen painikkeen, joka näyttää tältä:

Jos React Arian käyttö tuntuu epämukavalta koukkujen takia, käytä React Aria Components kirjaston sijaan. Tämä kirjasto tarjoaa valmiiksi rakennetut komponentit, jotka ovat käytettävissä oletuksena. Se on ohut kerros React Aria -kirjaston päällä. Toimitetut komponentit ovat tyylittämättömiä, joten nämä kaksi kirjastoa ovat hyvin samankaltaisia.

Peruskäyttöliittymä on tyylitön React UI -kirjasto, joka tarjoaa käyttöliittymäkomponentteja ilman tyyliä. Material UI -tiimi loi Base UI:n joukolla peruskomponentteja, joiden avulla voit rakentaa omia mukautettuja React-sovelluksiasi. Ne perustuivat Base UI -kirjastoon samaan vankkaan suunnitteluun kuin Material UI, mutta Base UI ei toteuta materiaalisuunnittelua.

Voit asentaa Base UI:n React-sovellukseesi tällä komennolla:

npm asennus @mui/base

Base UI tarjoaa komponentteja liikkeellä ollessasi, mikä tarkoittaa, että voit tuoda ja käyttää komponentteja suoraan kirjastosta. Siinä on myös koukut, joita voit käyttää komponenttien luomiseen ja konfigurointiin.

🔥 Empfohlen:  5 parasta itsenäistä kauppaa, jotka tarjoavat saumattoman ostokokemuksen

Tässä on esimerkki Base UI -komponenttien käytöstä:

tuonti React from “react”;
tuontipainike osoitteesta “@mui/base/Button”;

vie oletusfunktio App() {
paluu (

);
}

Tämä koodi luo yksinkertaisen painikkeen käyttämällä Painike Base UI -kirjaston osa. Voit myös käyttää useButton koukku suorittaaksesi saman tehtävän.

tuonti React from “react”;
tuo useButton osoitteesta “@mui/base/useButton”;

vie oletusfunktio App() {
const { getRootProps } = useButton();

paluu (

);
}

The useButton koukku ja Painike komponentti luo tyylittömän painikkeen, kuten alla olevassa kuvassa näkyy.

Toinen tutkittava kirjasto on Headless UI, joka tarjoaa tyylittelemättömiä käyttöliittymäelementtejä, jotka antavat sinulle vapauden muokata käyttöliittymäkomponenttien ulkoasua ja toimintaa parhaaksi katsomallasi tavalla.

Voit asentaa kirjaston seuraavalla komennolla:

npm install @headlessui/react

Kirjaston asennuksen jälkeen voit käyttää useita kirjaston tarjoamia komponentteja React-sovelluksessasi.

Esimerkiksi:

tuonti React from “react”;
tuo { Popover } osoitteesta “@headlessui/react”;

vie oletusfunktio App() {
paluu (


Popover

Tämä on popover


);
}

Tässä esimerkissä luot ponnahdusikkunan käyttämällä Popover komponentti Headless UI -kirjastosta. Yllä oleva koodilohko luo ponnahdusikkunan, joka näyttää tältä.

Saat täydellisen hallinnan tyylittömillä komponenteilla

Tyylittömät komponenttikirjastot antavat sinulle täydellisen hallinnan React-sovelluksesi tyyliin, jolloin voit luoda ainutlaatuisia käyttökokemuksia. Nämä kirjastot tarjoavat erilaisia ​​vaihtoehtoja tarpeisiisi. Voit luoda visuaalisesti houkuttelevia ja erittäin muokattavia React-sovelluksia hyödyntämällä yllä mainittuja kirjastoja.