React + Bootstrap + Font Awesome ile Basit Kullanıcı Arayüzü Tasarımı

Herkese Merhaba, önceki yazımda Props,Default Props, PropTypes konu başlıklarına değinmiştim. Ve bunlara bağlı olarak kullanıcı ad,soyad, yaş ve isimlerini gösteren basit bir kullanıcı bilgileri arayüzü gerçekleştirmiştim. Ancak bu alanda herhangi bir CSS, Bootstrap kullanmamıştım . Bugünkü yazımda basic seviyede bir kullanıcı arayüzü nasıl oluşturabiliriz,ona değineceğim. Aslında amacım, Bootstrap ve Font Awesome başlıklarını nasıl harmanlayacağım ve bunları React projeme nasıl entegre ettiğimi adım adım anlatmak. O halde hadi başlayalım 🙂 !

Öncelikle benim elimdeki projede App.js,User.js,Navbar.js alanlarım var. User.js ve Navbar.js aslında benim komponentlerim, App.js’te ise bu iki komponenti kullanarak , komponentler arası geçişi gerçekleştirebiliyorum. Ancak Bootstrap ve Font Awesome alanlarını entegre edeceğim ve işlem yapacağım kısım; React projesi kurulduğunda hazır olarak gelen index.html olacak.

NOT: Projenize Bootstrap’i entegre etmeyip CSS, SASS vb ile kullanıcı arayüzü de oluşturabilirsiniz.

Bootstrap’i projeme nasıl entegre edeceğim ?

  • Bootsrap 4 CDN olarak arattığınızda karşınıza çıkan ve Bootstrap’in kendi sitesi olan alana girmeniz gerekmektedir. Link
Bootstrap 4 CDN

Linkte belirtilen siteye girdiğinizde aşağıdaki alan karşınıza çıkacaktır.

CSS Link

Aşağıdaki alandaki linki projenizdeki index.html’deki <head> </head> etiketlerinin arasına koymanız gerekir.

İlk aşamayı başarıyla tamamladınız. Eğer sitenizde bir Hamburger Menü kullanacaksanız; bu menünün kapanır açılır olabilmesi için aynı sitedeki Javascript kodlarını da eklemeniz gerekir. Bu Javascript kodlarını ise index.html alanındaki <body></body> etiketlerinin arasına eklemeniz gerekir.

Bootstrap Javascript Kodları
Body etiketleri arasına kodların eklenmesi

Font-Awesome projeye nasıl entegre edilir ?

Bootstrap’i projeye dahil ettikten sonra ; kullanıcı arayüzünü görselleştirmek amacı ile ikonlardan yararlanacağız. İkonlardan yararlanabilmek için Font-Awesome’yi projeye entegre edeceğiz.

Font Awesome; web sitelerini tasarlarken , sıklıkla kullanılan ikonları font olarak sunan bir CSS kütüphanesidir.

  • Font Awesome’yu projeye entegre edebilmeniz için Font Awesome cdn olarak arattığınızda ilgili linki; kendi web sitesinden alıp , index.html içerisindeki <head> </head> etiketleri arasına eklemeniz gerekir.

Kullanıcı arayüzününün Bootstrap yardımıyla görselleştirilmesi

  • Kullanıcı arayüzünde herhangi bir CSS işlemi yapılmadan önce aşağıdaki gibiydi. Bu alanda Bootstrap’ten faydalanarak bir kart görünümü vermeye çalışacağız.
Kullanıcı arayüzü Bootstrap ile görselleştirmeden önce
  • Kullanıcı arayüzünü görselleştirmek için Bootstrap’in “card” özelliğinden yararlanacağız. Aslında temel olarak üç tane div’imiz olacak , kullanıcı kartını çerçeveleyen ve genişliğini belirlediğimiz div, “card” ve “card-body”.
  • Kullanıcı kartını çerçeveleyen ve genişliğini belirlediğimiz div aslında en dıştaki çerçeveleyen div’imiz olurken; “card” kullanıcı adının yer aldığı div, “card-body” ise kullanıcı bilgilerinin bulunduğu alan olacak.
  • Dıştaki div’e istediğiniz genişliği kullanabilirsiniz. Bu örnekte genişlik “col-md-8” olarak verilirken, her bir kullanıcının altında belirli bir boşluk bırakılmak istendiği için mb-4 verilmiştir.
  • Oluşturulan bu dıştaki div’in içerisine className’yi “card” olan bir div eklenmiştir. Hemen bu div’in içerisinde kart başlığının yazılacağı bir div daha eklenmiş, bunun içerisinde ismin yazacağı alan ve Font-Awesome yardımıyla eklenmiş olan ikon bulunmaktadır.
  • Benzer işlemler kullanıcı bilgilerinin tutulacağı alan için de gerçekleştirilmiştir. Bu alan için ise Bootstrap “card-body” className’si kullanılmıştır.

NOT : Class’ı tanımlarken className yerine class olarak tanımlarsanız aşağıdaki hatayı alırsınız.

Vee , basit bir şekilde tasarladığımız kullanıcı arayüzü

Bir sonraki yazıda görüşmek üzere, umarım faydalı olmuştur… 🙂

Kaynakça

  • Mustafa Murat Coşkun- Sıfırdan React.js ve Context Api /Udemy

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir