React'te Özel Bildirim Bileşeni Nasıl Oluşturulur

React'te, bir bildirim bileşeni oluşturmanıza yardımcı olabilecek birkaç üçüncü taraf paketi vardır. Ancak, yalnızca basit bir bildirim bileşeni istiyorsanız, uygulamanıza gereksiz bağımlılıklar eklemekten kaçınmak için kendi bildirim bileşeninizi oluşturmak isteyebilirsiniz.

Proje Kurulumu

Olacaksın React uygulamasını kurmak için Vite'ı kullanın. Vite, bir React projesini hızlı bir şekilde iskele kurmanıza izin veren bir oluşturma aracıdır.

Başlamak için, aşağıdaki komutu çalıştırarak yeni bir Vite projesi oluşturmak için yarn paket yöneticisini kullanın.

İplik davet oluştur

Komut sizden bir proje adı girmenizi isteyecektir. Projenin adını girin ve Enter tuşuna basın. Ardından, bir çerçeve seçmenizi isteyecektir. Seçmek tepki ve Enter'a basın. Son olarak, sizden bir değişken seçmenizi isteyecektir, seçin JavaScript ve ardından Enter'a basın.

Bu öğreticinin kullanacağı yapılandırmalar şunlardır:

Vite projeyi oluşturduktan sonra, proje klasörüne gidin ve bir kod düzenleyici kullanarak açın.

Daha sonra aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatabilirsiniz.

iplik geliştirme

Bu, yeni React uygulamanızı şu adresteki varsayılan tarayıcınızda açacaktır: http://localhost: 5173/.

Bildirim Bileşenini Tasarlama

Esnek bir bildirim bileşeni oluşturmak için, farklı başlık, açıklama ve stillere sahip farklı bildirim türlerini işleyebilmesi gerekir. Örneğin uyarı, başarı ve hata bildirimi yapması gerekiyor.

İşte bildirim bileşeninin işleyebilmesi gereken farklı varyasyonlar.

Bunu, oluşturulacak bildirim türünü, başlığı ve açıklama metnini belirten bileşene props ileterek başarabilirsiniz. Bu donanımları kullanarak, bileşeni özelleştirebilir ve minimum çabayla uygulamanız boyunca yeniden kullanabilirsiniz. Sahne donanımı hakkında bir bilgi tazelemeye ihtiyacınız varsa, işte açıklayan bir makale React'te sahne donanımı nasıl kullanılır?.

Bildirim Bileşenini Oluşturma

İçinde kaynak klasöründe, adlı yeni bir dosya oluşturun. Bildirim.jsx ve aşağıdaki kodu ekleyin.

ihracatvarsayılanişlevBildiri({tür, başlık, açıklama}) {
geri dönmek (


 {/* Bildirim içeriği */}
 </div>
 )
}

Bu kod, adlı işlevsel bir bileşen oluşturur. Bildiri üç sahne ile: tip, başlık, Ve Tanım. Bildirimin stilini ve içeriğini özelleştirmek için bu donanımları kullanacaksınız.

Tasarımdan, bileşenin birkaç simgesi, yani bilgi ve bir çapraz simgesi vardır. Yapabilirsiniz ücretsiz simgeler indir veya gibi bir paketten bir simge bileşeni kullanın. tepki simgeleri. Bu öğretici kullanacak tepki simgeleri bu yüzden aşağıdaki komutu çalıştırarak kurun.

iplik reaksiyon simgeleri ekleyin

Ardından, ekranın üst kısmındaki simgeleri içe aktarın. Bildiri bileşen.

içe aktarmak { RxCross2, RxInfoCircled } itibaren"tepki simgeleri/rx"

Artık, bildirim içeriğini oluşturmak için simgeleri, başlığı ve açıklama prop değerlerini kullanmak üzere bileşeni değiştirebilirsiniz.

ihracatvarsayılanişlevBildiri({tür, başlık, açıklama}) {
geri dönmek (







{başlık}</div>
{açıklama}</div>
 </div>
 </div>

 </div>
 )
}

Bir sonraki adım, iletilen türe göre stil vermektir.

Kullanabileceğiniz bir yaklaşım, görüntülemek istediğiniz her bildirim türü için CSS sınıfları tanımlamaktır. Ardından, iletilen türe göre uygun sınıfı koşullu olarak uygulayabilirsiniz.

Başlamak için, adlı yeni bir dosya oluşturun. bildirim.css ve içeri aktarın Bildirim.jsx en üste aşağıdaki kodu ekleyerek.

"./notification.css" dosyasını içe aktar

Daha sonra bildirim.css bildirim bileşeni için temel stilleri tanımlayın:

.bildiri {
görüntülemek: esnek;
esnek yön: sıra;
hizalama öğeleri: esnek başlangıç;
dolgu malzemesi: 8piksel;
}
.bildirim__sol {
görüntülemek: esnek;
esnek yön: sıra;
dolgu malzemesi: 0piksel;
açıklık: 8piksel;
sağ kenar boşluğu: 24piksel;
}
.bildirim__içerik {
görüntülemek: esnek;
esnek yön: kolon;
hizalama öğeleri: esnek başlangıç;
dolgu malzemesi: 0piksel;
}
.bildirim__başlık {
font ailesi: "Inter";
yazı stili: normal;
yazı tipi ağırlığı: 500;
yazı Boyutu: 14piksel;
}
.bildirim__açıklama {
font ailesi: "Inter";
yazı stili: normal;
yazı tipi ağırlığı: 400;
yazı Boyutu: 12piksel;
dolgu malzemesi: 0;
}

Ardından, CSS dosyasına aşağıdaki kodu ekleyerek farklı bildirim türleri için stilleri tanımlayabilirsiniz.

.bildirim__başarı {
arka plan: #f6fef9;
sınır: 1pikselsağlam#2f9461;
sınır yarıçapı: 8piksel;
}
.bildirim__hata {
arka plan: #fffbfa;
sınır: 1pikselsağlam#cd3636;
sınır yarıçapı: 8piksel;
}
.bildirim__uyarı {
arka plan: #fffcf5;
sınır: 1pikselsağlam#c8811a;
sınır yarıçapı: 8piksel;
}

Yukarıdaki kod, iletilen türe göre bildirim kapsayıcısını biçimlendirir.

Başlığı özelleştirmek için aşağıdaki stilleri kullanın.

.bildirim__başlık__başarı {
renk: #2f9461;
}
.bildirim__başlık__uyarı {
renk: #c8811a;
}
.notification__title__error {
renk: #cd3636;
}

Özel açıklama metni için bu stilleri kullanın.

.notification__description__başarı {
renk: #53b483;
}
.notification__description__uyarı {
renk: #e9a23b;
}
.notification__description__error {
renk: #f34141;
}

Ve simgeler için aşağıdaki sınıfları kullanın.

.notification_icon_error {
renk: #cd3636;
}
.notification__icon__success {
renk: #2f9461;
}
.bildirim__icon__uyarı {
renk: #c8811a;
}

Daha sonra, içinde Bildiri bileşenine göre uygun sınıfı koşullu olarak uygulayabilirsiniz. tip pervane, bunun gibi:

ihracatvarsayılanişlevBildiri({tür, başlık, açıklama}) {
geri dönmek (
`bildirim bildirimi__${tür}`}>
"bildirim__sol"}>
`bildirim__icon__${tür}`}/>
"bildirim__içerik">
`bildirim__başlık bildirimi__başlık__${tür}`}>{başlık}</div>
`bildirim__açıklama bildirim__açıklama__${tür}`}>{açıklama}</div>
 </div>
 </div>
`bildirim__icon__${tür}`}/>
 </div>
 )
}

Bu bileşende, sınıfı aşağıdaki gibi türe bağlı olarak dinamik olarak ayarlarsınız: bildirim_başarı veya bildirim_hata.

Bunu çalışırken görmek için Bildirim bileşenini içe aktarın. Uygulama.jsx ve aşağıdaki gibi kullanın:

içe aktarmak Bildiri itibaren'./Bildiri'
işlevUygulama() {
geri dönmek (
 <>
 tür="başarı"
 başlık="Görev tamamlandı"
 açıklama="Göreviniz başarıyla tamamlandı."
 />
 </>
 )
}
ihracatvarsayılan Uygulama

Şimdi, farklı bir türü iletebilirsiniz. Bildiri bileşen ve mesajla eşleşen uygun bir bildirim oluşturun.

Bu, iyi bir kullanıcı deneyimi için çok önemlidir çünkü kullanıcılar farklı renkleri ve stilleri farklı senaryolarla ilişkilendirmeye başlamıştır ve bu ilişkilendirmeleri tutarlı bir şekilde kullanmak önemlidir. Örneğin, bir kullanıcının bir fotoğrafı başarıyla yüklediğini kırmızı bir bildirim kutusuna bildirmek kafa karıştırıcı olabilir. Başarılı olsa bile yüklemenin başarısız olduğunu düşünebilirler.

Bildirim Bileşenine Etkileşim Ekleme

Özelleştirilebilir bir bildirim bileşeni oluşturmak için donanımları nasıl kullanabileceğinizi öğrendiniz. Daha da ileri götürmek için bu bileşene geçişler ekleyerek daha ilgi çekici hale getirebilirsiniz. Örneğin, bildirim bileşenini ekrana kaydırmak ve belirli bir süre geçtikten sonra dışarı kaydırmak için CSS animasyonlarını kullanabilirsiniz.