React Tutorial 2023 21 – JSX İçinde JavaScript Kodlarının ve Değişkenlerin Kullanımı

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bu yazımda JSX kodları içinde JavaScript değişkenleri nasıl kullanılır ve işlemleri nasıl gerçekleştirilir buna bakacağız.

Bir önceki yazımda oluşturduğum ProductCard.jsx dosyasının mevcut kodlarına şöyle bir bakalım.

import "./ProductCard.css";

const ProductCard = () => {
    return (
        <div className="container">
            <h1 className="heading">Ürün Kartları</h1>
            <div className="card-container">
                <div className="card">
                    <img
                        src="https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg"
                        alt="Asus"
                        className="image"
                    />
                    <h2 style={{ marginBottom: '10px' }}>Asus ZenBook</h2>
                    <p style={{ margin: '0' }}>Kategori: Teknoloji</p>
                    <p style={{ margin: '0' }}>Fiyat: 30.000 ₺</p>
                </div>
            </div>
        </div>
    );
};

export default ProductCard;

Şimdi burada static olarak kullandığımız bazı değerler var gördüğünüz gibi. Mesela görselin adresi, Ürün adı, kategorisi ve fiyatı static ifadelerimiz.

Şimdi öncelikle bunları birer değişken haline getirelim, sonra JSX içinde bu değişkenleri çağırarak yine aynı ifadeleri yazdıralım.

JSX içinde JavaScript kodları yazacaksak bunu {} süslü parantezler açıp içinde gerçekleştiriyoruz.

Tanımlamalarım aşağıdaki gibi olacak.

const productName = "Asus ZenBook";
const productCategory = "Teknoloji";
const productPrice = "30.000 ₺";
const productImage = "https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg";

Şimdi bunları JSX’de yerlerine koyalım. Kodlarımız aşağıdaki gibi olacak.

import "./ProductCard.css";

const productName = "Asus ZenBook";
const productCategory = "Teknoloji";
const productPrice = "30.000 ₺";
const productImage = "https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg";

const ProductCard = () => {
    return (
        <div className="container">
            <h1 className="heading">Ürün Kartları</h1>
            <div className="card-container">
                <div className="card">
                    <img
                        src={productImage}
                        alt="Asus"
                        className="image"
                    />
                    <h2 style={{ marginBottom: '10px' }}>{productName}</h2>
                    <p style={{ margin: '0' }}>Kategori: {productCategory}</p>
                    <p style={{ margin: '0' }}>Fiyat: {productPrice} ₺</p>
                </div>
            </div>
        </div>
    );
};

export default ProductCard;

<h2 style={{ marginBottom: '10px' }}>{productName}</h2>

Şunu ele aldığımızda ne demek istediğimiz çok net gözüküyor. Düzenleme yapmadan önce bu kodun olduğu yerde Asus Zenbook yazıyordu. Şimdi ben bu ifadeyi bir değişkene aldım ve olması gereken yere süslü parantezler içinde bu değişken ismini yazdım.

Tüm bu işlemler sonunda görüntümüz aşağıdaki gibi olmalı.

JavaScript Kodlarının Kullanımı

JSX içinde sadece değişken mi tanımlıyoruz, hayır. JavaScript ile yaptığımız kodlamaları da yapabiliriz.

Mesela şöyle yapalım.

Bir ürün listesi oluşturalım. 3 ürünümüz olsun. Sonra ilgili bölümde bu liste üzerinde map fonksiyonu ile dönelim ürünlerin kartını oluşturalım.

Oluşturduğum productList şu şekilde.

const productList =[
        
        { id: 1, name: 'Asus Zenbook', category: 'Teknoloji', price: 50, image: 'https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg' },

        { id: 2, name: 'Iphone 12', category: 'Teknoloji', price: 50, image: 'https://cdn.vatanbilgisayar.com/Upload/PRODUCT/apple/thumb/140330-3_large.jpg' },

        { id: 3, name: 'Samsung Galaxy S21', category: 'Teknoloji', price: 50, image: 'https://cdn.vatanbilgisayar.com/Upload/PRODUCT/samsung/thumb/140331-3_large.jpg' },
      
    ]

Normal kodlarımızdaki aşağıdaki kısmı biraz değiştireceğiz.

Class’ı card-container olan div bizim için kapsayıcı olan div. Onun içinde card nesnesi elimizdeki dizinin boyutu kadar tekrar tekrar oluşturulacak.

<div className="card-container">
    <div className="card">
         <img
             src={productImage}
             alt="Asus"
             className="image"
          />
          <h2 style={{ marginBottom: '10px' }}>{productName}</h2>
          <p style={{ margin: '0' }}>Kategori: {productCategory}</p>
          <p style={{ margin: '0' }}>Fiyat: {productPrice} ₺</p>
     </div>
</div>

Yukarıdaki bölümden aşağıdaki kod bloğunu kesip alalım.

<div className="card">
         <img
             src={productImage}
             alt="Asus"
             className="image"
          />
          <h2 style={{ marginBottom: '10px' }}>{productName}</h2>
          <p style={{ margin: '0' }}>Kategori: {productCategory}</p>
          <p style={{ margin: '0' }}>Fiyat: {productPrice} ₺</p>
</div>

Elimizde aşağıdaki kod kalsın.

Şimdi burada dizinin elamanlarını bir map fonksiyonu ile döneceğim için diyorum ki, javascript kodu yazacağım o zaman { } süslü parantezlerimi aç kapat içine gel.

<div className="card-container">
                   
</div>

<div className="card-container">

{

}
                   
</div>

productList üzerinde bir map dönücez. Map ifadesinin genel yapısı aşağıdaki gibidir. Dönülecek olan dizi yazılır. .map denir. Parantezler açılır, sonra içinde bir parantez daha açılır, bir değişken ismi yazılır.

Bu değişkene her defasından dizinin bir elemanı gelecektir. Bu onun bilgisini tutar.

Biz böylelikle o anki dizi elemanının tüm değerlerine ulaşıp istediğimiz işlemleri yaptırabiliriz.

Sonrasında bir arrow function işareti bununda ardından açılıp kapanan parantezler bu fonksiyonun içinde ne olacak ve geriye ne return edilecek bunu belirlediğimiz yerdir.

<div className="card-container">

  {
     productList.map((product) => (
       
     ))
  }

 </div>

İşte o parantezler içine başlangıçta aldığımız Card div’ini koyuyoruz. Sonra ilgili alanları aşağıdaki gibi güncelliyoruz.

Bir listeden elemanlar oluşturulurken kök elemente key değeri verilir. Bu şekilde o ögeyi diğerlerinden benzersiz kılmış oluruz ve map’leme konusunda React’e kolaylık sağlarız.

Key değerlerinin her biri birbirinden benzersiz olmalıdır. O yüzden ürünlerimize verdiğimiz Id numaralarını key olarak atadım.

Her yeni dizi elemanı product değişkeninde tutuluyor demiştim. O anki ürünün Id’sine mi ulaşmak istiyorum {product.id}, name’ine mi ulaşmak istiyorum {product.name} bu şekilde ilgili yerlere doğru bilgileri yazıyoruz. Aşağıdaki gibi bir kod bloğu oluşuyor.

<div className="card-container">

  {
     productList.map((product) => (
       <div key={product.id} className="card">
           <img src={product.image} alt={product.name} className="image" />
           <h2 style={{ marginBottom: '10px' }}>{product.name}</h2>
           <p style={{ margin: '0' }}>Kategori: {product.category}</p>
           <p style={{ margin: '0' }}>Fiyat: {product.price} TL</p>
       </div>
     ))
  }

 </div>

Bu işlemleri tamamladığımızda kodlarımız genel olarak nasıl gözüküyor buna bakalım.

import "./ProductCard.css";

const productName = "Asus ZenBook";
const productCategory = "Teknoloji";
const productPrice = "30.000 ₺";
const productImage = "https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg";

const ProductCard = () => {


    const productList = [

        { id: 1, name: 'Asus Zenbook', category: 'Teknoloji', price: 50, image: 'https://cdn.vatanbilgisayar.com/Upload/PRODUCT/asus/thumb/140362-3_large.jpg' },

        { id: 2, name: 'Iphone 12', category: 'Teknoloji', price: 50, image: 'https://st-troy.mncdn.com/mnresize/1500/1500/Content/media/ProductImg/original/mu793tua-apple-iphone-15-pro-max-256gb-natural-titanium-638305576694571609.jpg' },

        { id: 3, name: 'Samsung Galaxy S21', category: 'Teknoloji', price: 50, image: 'https://imagedelivery.net/lPgwcHyAfEPS8sv66eGzog/uploads/46100/getmobil-samsung-s21-phantomviolet-00webp.png/quality=70,format=webp,width=720' },

    ]

    return (
        <div className="container">
            <h1 className="heading">Ürün Kartları</h1>
            <div className="card-container">

                {
                    productList.map((product) => (
                        <div key={product.id} className="card">
                            <img src={product.image} alt={product.name} className="image" />
                            <h2 style={{ marginBottom: '10px' }}>{product.name}</h2>
                            <p style={{ margin: '0' }}>Kategori: {product.category}</p>
                            <p style={{ margin: '0' }}>Fiyat: {product.price} TL</p>
                        </div>
                    ))
                }

            </div>
        </div>
    );
};

export default ProductCard;

Sonuca baktığımızda aşağıdaki gibi olmalı.