Sinun ei tarvitse luottaa kolmannen osapuolen pakettiin luodaksesi ilmoituskomponentin. Näin voit rakentaa sen itse.
Reactissa on saatavilla useita kolmannen osapuolen paketteja, joiden avulla voit luoda ilmoituskomponentin. Jos kuitenkin haluat vain yksinkertaisen ilmoituskomponentin, voit luoda oman, jotta sovellukseesi ei lisätä tarpeettomia riippuvuuksia.
Projektin perustaminen
Tulet käytä Vitea React-sovelluksen määrittämiseen. Vite on rakennustyökalu, jonka avulla voit nopeasti rakentaa React-projektin.
Aloita luomalla uusi Vite-projekti lankapakettien hallinnan avulla suorittamalla alla oleva komento.
lanka luo vite
Komento kehottaa syöttämään projektin nimen. Kirjoita projektin nimi ja paina Enter. Seuraavaksi se kehottaa sinua valitsemaan kehyksen. Valita reagoida ja paina Enter. Lopuksi se pyytää sinua valitsemaan muunnelman, valitse JavaScript ja paina sitten Enter.
Tässä opetusohjelmassa käytettävät kokoonpanot:
Kun Vite on luonut projektin, siirry projektikansioon ja avaa se koodieditorilla.
Voit sitten käynnistää kehityspalvelimen suorittamalla seuraavan komennon.
lanka dev
Tämä avaa uuden React-sovelluksesi oletusselaimessa osoitteessa http://localhost: 5173/.
Ilmoituskomponentin suunnittelu
Joustavan ilmoituskomponentin luomiseksi sen on kyettävä käsittelemään erityyppisiä ilmoituksia, joiden otsikot, kuvaukset ja tyylit vaihtelevat. Sen on esimerkiksi annettava varoitus-, onnistumis- ja virheilmoitus.
Tässä on erilaisia muunnelmia, joita ilmoituskomponentin pitäisi pystyä hahmontamaan.
Voit saavuttaa tämän välittämällä rekvisiitta komponentille, joka määrittää hahmonnettavan ilmoituksen tyypin, otsikon ja kuvaustekstin. Käyttämällä näitä apuvälineitä voit mukauttaa komponenttia ja käyttää sitä uudelleen koko sovelluksessasi vähällä vaivalla. Jos tarvitset päivitystä rekvisiitta, tässä on artikkeli, joka selittää kuinka käyttää rekvisiittaa Reactissa.
Ilmoituskomponentin luominen
Vuonna src kansio, luo uusi tiedosto nimeltä Notification.jsx ja lisää seuraava koodi.
viedäoletuksenatoimintoIlmoitus({tyyppi, otsikko, kuvaus}) {
palata (
{/* Ilmoituksen sisältö */}
</div>
)
}
Tämä koodi luo toiminnallisen komponentin nimeltä Ilmoitus kolmella rekvisiitillä: tyyppi, otsikko, ja kuvaus. Näiden rekvisiittausten avulla voit mukauttaa ilmoituksen tyyliä ja sisältöä.
Suunnittelusta komponentissa on pari kuvaketta, nimittäin tiedot ja ristikuvake. Sinä pystyt lataa ilmaisia kuvakkeita tai käytä kuvakekomponenttia paketista, kuten reagoi-kuvakkeet. Tämä opetusohjelma käyttää reagoi-kuvakkeet joten asenna se suorittamalla alla oleva komento.
lanka lisää reaktiokuvakkeita
Tuo sitten yläreunassa olevat kuvakkeet Ilmoitus komponentti.
tuonti { RxCross2, RxInfoCircled } alkaen"react-icons/rx"
Nyt voit muokata komponenttia käyttämään kuvakkeita, otsikkoa ja kuvausehdotuksen arvoja ilmoituksen sisällön luomiseen.
viedäoletuksenatoimintoIlmoitus({tyyppi, otsikko, kuvaus}) {
palata (
{title}</div>
{kuvaus}</div>
</div>
</div>
</div>
)
}
Seuraava vaihe on muotoilla se sisään siirretyn tyypin mukaan.
Yksi tapa, jota voit käyttää, on määrittää CSS-luokat kullekin näytettävälle ilmoitustyypille. Voit sitten käyttää ehdollisesti sopivaa luokkaa siirretyn tyypin perusteella.
Aloita luomalla uusi tiedosto nimeltä ilmoitus.css ja tuoda se sisään Notification.jsx lisäämällä seuraavan koodin yläosaan.
tuo "./notification.css"
Sitten sisään ilmoitus.css määritä ilmoituskomponentin perustyylit:
.ilmoitus {
näyttö: flex;
flex-suunta: rivi;
kohdista-kohteet: flex-start;
pehmuste: 8px;
}
.notification__left {
näyttö: flex;
flex-suunta: rivi;
pehmuste: 0px;
aukko: 8px;
marginaali-oikea: 24px;
}
.notification__content {
näyttö: flex;
flex-suunta: sarakkeessa;
kohdista-kohteet: flex-start;
pehmuste: 0px;
}
.notification__title {
font-perhe: "Inter";
fonttityyli: normaali;
fontin paino: 500;
Fonttikoko: 14px;
}
.notification__description {
font-perhe: "Inter";
fonttityyli: normaali;
fontin paino: 400;
Fonttikoko: 12px;
pehmuste: 0;
}
Voit sitten määrittää tyylit eri ilmoitustyypeille lisäämällä seuraavan koodin CSS-tiedostoon.
.notification__success {
tausta: #f6fef9;
rajaa: 1pxkiinteä#2f9461;
raja-säde: 8px;
}
.notification__error {
tausta: #fffbfa;
rajaa: 1pxkiinteä#cd3636;
raja-säde: 8px;
}
.notification__warning {
tausta: #fffcf5;
rajaa: 1pxkiinteä#c8811a;
raja-säde: 8px;
}
Yllä oleva koodi tyylittelee ilmoitussäilön välitetyn tyypin perusteella.
Mukauta otsikkoa käyttämällä seuraavia tyylejä.
.notification__title__success {
väri: #2f9461;
}
.notification__title__warning {
väri: #c8811a;
}
.notification__title__error {
väri: #cd3636;
}
Käytä mukautettua kuvaustekstiä varten näitä tyylejä.
.notification__description__success {
väri: #53b483;
}
.notification__description__warning {
väri: #e9a23b;
}
.notification__description__error {
väri: #f34141;
}
Ja kuvakkeille käytä seuraavia luokkia.
.notification_icon_error {
väri: #cd3636;
}
.notification__icon__success {
väri: #2f9461;
}
.notification__icon__warning {
väri: #c8811a;
}
Sitten, Ilmoitus komponentti, voit ehdollisesti soveltaa sopivaa luokkaa tyyppi prop, näin:
viedäoletuksenatoimintoIlmoitus({tyyppi, otsikko, kuvaus}) {
palata (
`ilmoitusilmoitus__${type}`}>
`ilmoitus__left`}>
`ilmoitus__kuvake__${type}`}/>
"ilmoitus__sisältö">
`ilmoitus__title-ilmoitus__title__${type}`}>{title}</div>
`ilmoitus__description-ilmoitus__description__${type}`}>{description}</div>
</div>
</div>
`ilmoitus__kuvake__${type}`}/>
</div>
)
}
Tässä komponentissa asetat luokan dynaamisesti tyypin mukaan, kuten ilmoitus__menestys tai ilmoitus__virhe.
Näet tämän toiminnassa tuomalla ilmoituskomponentin sisään App.jsx ja käytä sitä seuraavasti:
tuonti Ilmoitus alkaen'./Ilmoitus'toimintoSovellus() {
palata (
<>
tyyppi="menestys"
otsikko="Tehtävä suoritettu"
kuvaus ="Tehtäväsi on suoritettu onnistuneesti."
/>
</>
)
}
viedäoletuksena Sovellus
Nyt voit välittää eri tyypin Ilmoitus komponentti ja anna viestiä vastaava ilmoitus.
Tämä on olennaista hyvän käyttökokemuksen kannalta, koska käyttäjät ovat oppineet yhdistämään eri värejä ja tyylejä eri skenaarioihin, ja on tärkeää käyttää näitä assosiaatioita johdonmukaisesti. Olisi esimerkiksi hämmentävää ilmoittaa käyttäjälle, että hän on ladannut valokuvan onnistuneesti punaisessa ilmoitusruudussa. He saattavat ajatella, että lataus epäonnistui, vaikka se olisi onnistunut.
Vuorovaikutteisuuden lisääminen ilmoituskomponenttiin
Olet oppinut, kuinka voit luoda mukautettavan ilmoituskomponentin apuvälineiden avulla. Jos haluat viedä sitä vielä pidemmälle, voit lisätä tähän komponenttiin siirtymiä, jotka tekevät siitä kiinnostavamman. CSS-animaatioiden avulla voit esimerkiksi liu'uttaa ilmoituskomponentin näytölle ja liu'uttaa sen ulos tietyn ajan kuluttua.
