Bir React bileşeninin nasıl biçimlendirme oluşturabileceğini ve JSON formatında verilere nasıl erişebileceğini öğrenin.
Verileri HTML belgelerinizden ayırmanın en basit yollarından biri onu JSON’da depolamaktır. JSON popülerdir ve özellikle JavaScript’te ç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. Elde edilen tablo, veriler sabit kodlanmadığından ihtiyaç duyduğu kadar satıra sahip olabilir.
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 kurulu olması gerekir.
Tabloyu oluşturmadan önce, yoksa yeni bir React projesi oluşturmanız gerekecektir .
JSON Verilerini Oluşturma
Tablo, bir JSON dosyasında depolanan verileri kullanacaktır. Bu verileri gerçek hayattaki bir uygulamadaki bir API uç noktasından getirebilirsiniz.
src klasöründe data.json adında 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, karşılık gelen özellikleri ise tablonun gövdesini oluşturur.
Tablo Bileşenini Oluşturma
src klasöründe Table.js adında 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, sahne olarak theadData ve tBodyData’yı 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 teslim edecektir.
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 nesnedeki anahtarları kullanabilirsiniz.
Data.json’u App.js’ye almayı unutmayın.
import data from “./data.json”
Tablo 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 oluşturmak 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 etiketinin içindeki başlıklar üzerinde yinelenecek 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 dizi nesne olarak aldığından, her nesnenin bir satırı temsil etmesini sağlamak için önce bunun üzerinde yineleme yapmanız gerekir.
Bu nedenle, Table.js’de tBodyData prop üzerinde ş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’daki değerleri kullanın.
Aşağıda gösterildiği gibi satır verilerini 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 Tablo 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
Tabloyu App.js’ye içe aktarın ve aşağıda gösterildiği gibi oluşturun:
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, sahne olarak theadData ve tbodyData öğelerini 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ülleriyle Şekillendirme
Bu öğreticide bir JSON dosyasından bir React tablosu bileşeni oluşturdunuz. Ayrıca JSON verilerini ihtiyaçlarınıza göre nasıl değiştirebileceğinizi de öğrendiniz. Tablonuza biraz CSS ekleyerek görünümünü iyileştirebilirsiniz. Yerel kapsamlı CSS stilleri oluşturmak için CSS modüllerini kullanmayı düşünün. Bir create-tepki-app uygulaması kullanıyorsanız, kullanımı basit ve başlaması kolaydır.