React Listeler

React'ta döngüler için genellikle map() fonksiyonu kullanılır. Bu fonksiyon, bir dizi veya koleksiyon içinde dolaşmanıza ve her öğe için belirli bir işlemi gerçekleştirmenize olanak tanır. React bileşenlerinde döngüleri oluşturmak için map() fonksiyonunu kullanarak dinamik içerik oluşturabilirsiniz.

Aşağıda map() fonksiyonunun nasıl kullanıldığına dair basit bir örnek bulunmaktadır:

  
import React from 'react';

function App() {
  // Renkleri içeren bir dizi oluşturun
  const renkler = ['Kırmızı', 'Mavi', 'Yeşil', 'Sarı', 'Mor'];

  return (
    <div>
      <h1>Renk Listesi</h1>
      <ul>
        {renkler.map((renk, index) => (
          <li key={index}>{renk}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Yukarıdaki örnekte, renkler adında bir dizi oluşturduk ve bu diziyi map fonksiyonuyla döngüleyerek her bir renk için bir liste öğesi (<li>) oluşturduk. key özelliği, her liste öğesini benzersiz bir şekilde tanımlamak için kullanılır ve React için önemlidir.

Bu kod parçasını bir React projesinde kullanarak, renkleri listeleyen bir bileşen oluşturabilirsiniz.

React'ta props özelliğini kullanarak bileşenlere veri iletebilirsiniz. Renkleri listeleyen bir bileşen oluşturmak için map fonksiyonunu kullanarak ve props ile renk verisini iletmek için aşağıdaki örneği kullanabilirsiniz:

import React from 'react';

// RenkListesi adında yeni bir bileşen oluşturuyoruz
function RenkListesi(props) {
  const { renkler } = props; // props aracılığıyla renkleri alıyoruz

  return (
    <div>
      <h1>Renk Listesi</h1>
      <ul>
        {renkler.map((renk, index) => (
          <li key={index}>{renk}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  // Renkleri içeren bir dizi oluşturun
  const renkler = ['Kırmızı', 'Mavi', 'Yeşil', 'Sarı', 'Mor'];

  return (
    <div>
      {/* RenkListesi bileşenini kullanırken renkleri props ile iletiyoruz */}
      <RenkListesi renkler={renkler} />
    </div>
  );
}

export default App;

Yukarıdaki örnekte, RenkListesi adında bir bileşen oluşturduk ve bu bileşene renkler adında bir prop ile renk verisini ilettik. Daha sonra App bileşeninde bu RenkListesi bileşenini kullanarak renkleri listeledik. Bu, React'ta bileşenler arasında veri iletmek için yaygın bir yol olan props kullanımını göstermektedir.

React'ta bileşenler arasında veri iletmek ve renkleri listelemek için setState özelliğini kullanabiliriz. İşte bu yöntemi kullanarak bir örnek:

import React, { useState } from 'react';

function App() {
 const[renkler, setRenkler]= useState(['Kırmızı', 'Mavi', 'Yeşil', 'Sarı', 'Mor']);

  return (
    <div>
      <h1>Renk Listesi</h1>
      <ul>
        {renkler.map((renk, index) => (
          <li key={index}>{renk}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Yukarıdaki örnekte, App bileşeni bir fonksiyon bileşeni olarak tanımlanmıştır ve Hook'lardan state ile renkleri bir bileşen durumu olarak saklar. Ardından, return yöntemi içinde bu durumu kullanarak renkleri listelemek için map fonksiyonunu kullanırız.

Bu örnekte, bileşen içindeki durumu değiştirmiyoruz, bu nedenle bileşen statik bir şekilde renkleri listeler. Eğer renkleri dinamik olarak değiştirmek isterseniz, bir olay veya diğer etkileşimler ile setState yöntemini kullanarak durumu güncellemeniz gerekecektir.

React, bu tür döngülerle dinamik içerik oluştururken oldukça güçlüdür ve map() fonksiyonu bu işlemi kolaylaştırır. Ancak başka durumlar için de döngü veya döngü benzeri yapılar kullanabilirsiniz. Örneğin, for döngüsü veya forEach() fonksiyonu gibi JavaScript'in standart döngü yöntemlerini kullanabilirsiniz, ancak genellikle map() React projelerinde tercih edilen yöntemdir çünkü daha deklaratif bir yaklaşım sunar.

React, bir JavaScript kütüphanesi ve kullanıcı arayüzleri oluşturmak için kullanılan bir teknolojidir. React, web uygulamaları geliştirmek için yaygın olarak kullanılır ve birçok farklı bileşen (component) içeren bir uygulama geliştirmenize olanak tanır. React'ta listeleri işlemek ve görüntülemek için özel bileşenler ve teknikler bulunmaktadır.

Listeleri React içinde işlemek için aşağıdaki adımları takip edebilirsiniz:

Veriyi Hazırlama:

İlk adım, liste için kullanılacak veriyi hazırlamaktır. Bu veri, bir dizi (array) veya nesnelerden oluşan bir koleksiyon olabilir. Örneğin, bir dizi kullanıcı nesnesi içeren bir veri listesi olabilir.

const userList = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

Bir Liste BileÅŸeni OluÅŸturma:

Şimdi, bu veriyi görüntülemek için bir liste bileşeni oluşturmalısınız. React'ta bir bileşen sınıfı veya fonksiyonu kullanabilirsiniz. Aşağıda bir örnek fonksiyonel bileşen bulunmaktadır:

  

import React from "react";

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Listeyi Return Etmek:

Oluşturduğunuz liste bileşenini bir üst düzey bileşen içinde kullanabilirsiniz. Bu, listeyi uygulamanızın diğer bileşenleriyle birleştirmenizi sağlar.

import React from "react";
import UserList from "./UserList";

const userList = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

function App() {
  return (
    <div>
      <h1>User List</h1>
      <UserList users={userList} />
    </div>
  );
}

export default App;

Key Kullanımı:

React'ta liste öğelerini oluÅŸtururken, her öğenin benzersiz bir key özelliÄŸi olması önemlidir. Bu, React'ın öğelerin nasıl güncellendiÄŸini izlemesine yardımcı olur ve performansı artırır. Yukarıdaki örnekte key özelliÄŸi olarak user.id kullanıldı.

<li key={user.id}>{user.name}</li>

React listelerini daha fazla özelleştirmek için aşağıdaki bazı yaygın senaryoları ele alabiliriz:

1. Liste Öğelerini Filtreleme:

Verilerinizi filtrelemek veya sıralamak için JavaScript fonksiyonlarını kullanabilirsiniz. Örneğin, sadece belirli bir koşulu karşılayan öğeleri görüntülemek için filter fonksiyonunu kullanabilirsiniz.

  

const filteredData = myData.filter(item => item.name.startsWith('Öğe'));

2. Liste Öğelerini Sıralama:

Verilerinizi belirli bir sıraya göre sıralamak için JavaScript'in sort fonksiyonunu kullanabilirsiniz.

  
const sortedData = myData.sort((a, b) => a.name.localeCompare(b.name));

3. Liste Öğelerini Düzenleme:

Kullanıcıların liste öğelerini düzenlemesine olanak tanımak için her öğeyi düzenleme modunda veya düzenleme düğmesine tıkladığında düzenleme moduna geçirebilirsiniz.

4. Liste Öğelerini Silme:

Kullanıcıların liste öğelerini silmelerine izin vermek için her öğe yanında bir "Sil" düğmesi veya işaretleme seçeneği ekleyebilirsiniz. Silme işlemi gerçekleştiğinde, ilgili öğeyi veri kaynağınızdan kaldırın ve React yeniden render yapacaktır.

5. Liste Öğelerini Sürükle ve Bırak:

Kullanıcıların liste öğelerini sürükleyip bırakarak sıralamalarına olanak tanımak için React'ta sürükle ve bırak kütüphanelerini kullanabilirsiniz, örneğin "react-beautiful-dnd" gibi.

6. Liste Öğelerini Sayfalama:

Büyük veri kümesiyle çalışıyorsanız, liste öğelerini sayfalama veya "sonsuz kaydırma" yöntemleriyle görüntüleyebilirsiniz. Bu, performansı artırabilir.

7. Liste Öğelerine Arama Eklemek:

Kullanıcının belirli bir öğeyi bulmasına yardımcı olmak için liste öğeleri üzerinde arama işlevselliği ekleyebilirsiniz. Bu, kullanıcı deneyimini geliştirebilir.

Her madde hakkında basit örnek verelim

1. Liste Öğelerini Filtreleme:

import React, { useState } from 'react';

function FilteredList() {
  const [myData, setMyData] = useState([
    { id: 1, name: 'Öğe 1' },
    { id: 2, name: 'Öğe 2' },
    { id: 3, name: 'Öğe 3' },
  ]);

  const filteredData = myData.filter(item => item.name.startsWith('Öğe'));

  return (
    <ul>
      {filteredData.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default FilteredList;

2. Liste Öğelerini Sıralama:

  

import React, { useState } from 'react';

function SortedList() {
  const [myData, setMyData] = useState([
    { id: 1, name: 'Zeytin' },
    { id: 2, name: 'Elma' },
    { id: 3, name: 'Armut' },
  ]);

  const sortedData = myData.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <ul>
      {sortedData.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default SortedList;

3. Liste Öğelerini Düzenleme ve Silme:

import React, { useState } from 'react';

function EditableList() {
  const [myData, setMyData] = useState([
    { id: 1, name: 'Öğe 1' },
    { id: 2, name: 'Öğe 2' },
    { id: 3, name: 'Öğe 3' },
  ]);

  const handleDelete = (id) => {
    const updatedData = myData.filter(item => item.id !== id);
    setMyData(updatedData);
  };

  return (
    <ul>
      {myData.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => handleDelete(item.id)}>Sil</button>
        </li>
      ))}
    </ul>
  );
}

export default EditableList;

4. Liste Öğelerini Sürükle ve Bırak:

Sürükle ve bırak işlevselliği eklemek için "react-beautiful-dnd" gibi bir kütüphane kullanmanız gerekecektir. Bu kütüphane ile bir örnek oluşturmak oldukça karmaşıktır ve detaylı bir açıklama gerektirir.

5. Liste Öğelerini Sayfalama:

Liste öğelerini sayfalama için bir sayfalama bileşeni oluşturmanız gerekecektir. Bu, sayfalama işlevselliğini sağlamak için belirli bir sayıda öğeyi görüntülemek ve sayfa değiştirmek için düğmeler eklemeyi içerir.

6. Liste Öğelerine Arama Eklemek:

import React, { useState } from 'react';

function SearchableList() {
  const [myData, setMyData] = useState([
    { id: 1, name: 'Öğe 1' },
    { id: 2, name: 'Öğe 2' },
    { id: 3, name: 'Öğe 3' },
  ]);

  const [searchTerm, setSearchTerm] = useState('');

  const filteredData = myData.filter(item => item.name.toLowerCase()
  .includes(searchTerm.toLowerCase()));

  return (
    <div>
      <input
        type="text"
        placeholder="Ara..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchableList;

Yukarıdaki örnekler, farklı liste özelleştirmelerini göstermek için temel React bileşenleri kullanır. Projenizin gereksinimlerine ve karmaşıklığına bağlı olarak daha fazla özelleştirme ve işlevsellik ekleyebilirsiniz.