Verileri HTML belgelerinizden ayırmanın en basit yollarından biri, onu JSON’da depolamaktır. JSON popülerdir ve özellikle JavaScript’te birlikte çalışması kolaydır.
React’te, JSON verilerini bir bileşen kullanarak tablolar aracılığıyla sunmak mantıklıdır. Bu bileşen, JSON verileriyle ölçeklenen bir tablo oluşturabilecektir. Ortaya çıkan tablo, veriler sabit kodlanmadığı için ihtiyaç duyduğu kadar satır içerebilir.
Neye ihtiyacınız olacak
Bu öğreticiyi takip etmek ve React’in nasıl çalıştığına dair temel bir anlayışa sahip olmak için makinenizde Node.js’nin yüklü olması gerekir.
Tabloyu oluşturmadan önce, yoksa yeni bir React projesi oluşturmanız gerekecektir .
JSON Verilerini Oluşturma
Tablo, bir JSON dosyasında saklanan verileri kullanacaktır. Bu verileri gerçek hayattaki bir uygulamadaki bir API uç noktasından alabilirsiniz.
src klasöründe data.json adlı yeni bir dosya oluşturun ve aşağıdakileri ekleyin:
[{
“id”: 1,
“first_name”: “Ethelred”,
“last_name”: “Slowly”,
“email”: “eslowly0@google.es”
},{
“id”: 2,
“first_name”: “Reta”,
“last_name”: “Woolmer”,
“email”: “rwoolmer1@miibeian.gov.cn”
},{
“id”: 3,
“first_name”: “Arabel”,
“last_name”: “Pestor”,
“email”: “apestor2@bloglovin.com”
}]
Bu, üç nesne içeren basit bir JSON dosyasıdır.
Nesne anahtarları (kimlik, ad, soyadı ve e-posta) başlıklardır ve bunlara karşılık gelen özellikler tablonun gövdesini oluşturur.
Tablo Bileşenini Oluşturma
src klasöründe Table.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin.
export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
// header row
</tr>
</thead>
<tbody>
// body data
</tbody>
</table>
);
}
Bu bileşen, theadData ve tBodyData’yı destek olarak alır. theadData, başlık satırında görüntüleyeceğiniz verileri içerir. Uygulama, bu verileri JSON dosyasından alacak ve Tablo bileşenine iletecektir.
App.js’de getHeadings() adlı bir işlev oluşturun ve aşağıdakini ekleyin.
const getHeadings = () => {
return Object.keys(data[0]);
}
JSON dosyasındaki her nesnenin anahtarları benzer olduğundan, ilk nesnenin anahtarlarını kullanabilirsiniz.
data.json’u App.js’ye aktarmayı unutmayın.
import data from “./data.json”
Table bileşenini oluşturduğunuzda, başlığı ve JSON verilerini props olarak iletin.
<Table theadData={getHeadings()} tbodyData={data}/>
Başlık Satırını Oluşturma
Bu adımda, başlık satırındaki bir öğeyi işlemek için bir bileşen oluşturacaksınız. Bu bileşen, map() yöntemini kullanarak başlıklar üzerinde yinelenir.
Table.js’de, thead etiketi içindeki başlıklar üzerinde yineleme yapmak için kodu ekleyin.
<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>
Ardından, tablonun gövdesini dolduracaksınız.
Gövde Satırlarını Oluşturma
Tablo gövdesi, satır verilerini işler. Table.js, verileri bir nesne dizisi olarak aldığından, bir satırı temsil eden her nesneyi elde etmek için önce onun üzerinde yineleme yapmanız gerekir.
Bu nedenle, Table.js’de tBodyData pervanesini şu şekilde yineleyin:
<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
// row data
</tr>;
})}
</tbody>
Her satır nesnesi, aşağıdaki nesne örneğine benzer olacaktır.
const row = {
“id”: 1,
“first_name”: “Ethelred”,
“last_name”: “Slowly”,
“email”: “eslowly0@google.es”
}
Bu öğelerin her birini görüntülemek için, nesnenin tuşları üzerinde yineleme yapmanız gerekecektir. Her yinelemede, satır nesnesindeki o anahtarla eşleşen özelliği alırsınız. Bu anahtarlar başlıklarla aynı olduğundan, theadData prop’taki değerleri kullanın.
Satır verilerini aşağıda gösterildiği gibi görüntülemek için tr etiketini değiştirin.
<tr key={index}>
// theadData contains the keys
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;
Her şeyi bir araya getiren Table bileşeni şöyle görünmelidir:
export default function Table({theadData, tbodyData}) {
return (
<table>
<thead>
<tr>
{theadData.map(heading => {
return <th key={heading}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((row, index) => {
return <tr key={index}>
{theadData.map((key, index) => {
return <td key={row[key]}>{row[key]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
<tbody> öğesinde bileşen, veri dizisi üzerinde yinelenir ve her nesne için tablo satırını döndürür.
Tablo Bileşenini Kullanma
App.js’de Tabloyu içe aktarın ve aşağıda gösterildiği gibi işleyin:
import Table from ‘./Table’;
import data from “./data.json”
function App() {
const getHeadings = () => {
return Object.keys(data[0]);
}
return (
<div className=”container”>
<Table theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
export default App;
Tablo bileşeni, theadData ve tbodyData’yı props olarak alır. theadData, JSON verilerindeki ilk öğenin anahtarlarından oluşturulan başlıkları içerir ve tbodyData, JSON dosyasının tamamını içerir.
CSS Modülleri ile Şekillendirme
Bu öğreticide bir JSON dosyasından bir React tablosu bileşeni oluşturdunuz. Ayrıca JSON verilerini ihtiyaçlarınıza uyacak şekilde nasıl değiştirebileceğinizi de öğrendiniz. Tablonuza biraz CSS ekleyerek görünümünü iyileştirebilirsiniz. Kapsamı yerel olarak belirlenmiş CSS stilleri oluşturmak için CSS modüllerini kullanmayı düşünün. Uygulama oluşturma-tepki verme uygulaması kullanıyorsanız, kullanımı basit ve kullanmaya başlaması kolaydır.