Hazırlayan:Furkan Fatih Çiftçi-22430070037
Projede react kullanarak tek sayfalı uygulama olan (SPA) yöntemi ile Veri Tablosu yaptım.
Projemi dosyamı npx create-react-app verisitesi-react-app bu kodları terminale yazarak react uygulaması oluşturdum içine veri atabildiğimiz bir veri tablosu oluşturdum.Veri tablosunun dış görünümü Aşağıdaki şekildeki gibidir.
Bu veri tablosu aynı SQL'de olduğu gibi içine veri ekleyebileceğiz.Tablo oluşturacağım alt tarafında soldan sağ'a dört adet boşluk olucak bunlar sırasıyla soldan sağ'a ad yeri,adres yeri,telefon numarası yeri ve email buraya kişilerin bilgilerini girebileceğiz.
Sitede içinde başında zaten veri olucak ve bunların add butonuna basıp üstüne veri ekleyebileceğiz ya da bu verileri delete butonuna basıp silebileceğiz ya da içindeki verileri edit butonuna basıp düzenleme hakkına sahip olabileceğiz.
Şimdi veri tablosu hakkındaki açtığım dosya'ya ve içindeki dosya sayfa kodları hakkında bilgi vericem.
App.js'in içinde Classname yani nesne adına sahip bir div ekleyeceğiz ver container oluşturacağız.Bu girdiğimiz kod ile veri tablosunun dış yapısı oluşacak.
App.js'de veri tablomuzun içindeki başlıklıkları App.js'in içine yazdığımız kodlar ile oluşturacağım.
App.js'de asıl işlemleri olucak map() kişiye göre satır ekleme kodu gibi contact kodu sayesinde'de verdiğimiz değerleri görüntülemeye sahip olacağız ve üstten eklediğim App.js'e import sayesinde yani diğer sayfadaki içindeki kodları içine çekmiş olucam ve hepsi burda birleşmiş olucak.
Sayesinde buton ID lerini (yani butonların görüntülenmesini) ve önceden kalan verileri direk bir sayfa toplama özelliğine sahip olucak.
App.css'de ise girdiğimiz container yani tablo'nun içinde yer alan yazı boyutunu yazıyı sola hizalamayı ayarlarız .
Bunun yanında sütunların içinde yer alan yerlerde arkanın renk yapısını ayarlarız.
Butonların işlevi için bir klasör açacağım içine iki tane kod sayfası atacağım biri EditableRow.js diğeride ReadOnlyRow.js sayfası olucak.
ReadOnlyRow.js :Sayfasında yazdığımız özellikleri düzenlemeye ve silmeye işlev yarayan buton'a bastığımızda çalışmasını sağlayan kodlar olacaktır.
EditableRow.js :Sayfasında yazdığımız özellikleri kaydetmemizi sağlayan ve düzenlemeyi buton'a bastığımızda çalışmasını sağlayan kodlar olacaktır.
{ } mockdata.json:Sayfasında tablonun önceden yazdığımız içinde olan verileri buraya yazıyoruz.