React Tutorial 2023 20 – React İle CSS 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 React ile CSS’leri nasıl kullanıyoruz buna bakacağız.

Bir önceki yazımda oluşturduğum ProductCard ve onun için yazdığım Style ögeleri üzerinden devam edeceğim. Ancak bu sefer kodlarımızı bildiğimiz CSS dosyası içinde yazacağız. Ve class’lar kullanarak, bu CSS kodlarını JSX içinde nasıl çağırıyoruz buna bakacağız.

Bir önceki yazı için aşağıdaki linke göz atınız.

Şimdi öncelikle Product klasörü içine ProductCard.css dosyasını oluşturalım.

Bir önceki yazımda bir JS objesi olarak yazdığım stillendirmeleri şimdi CSS koduna dönüştüreceğim. Aşağıdaki gibi olacak dosyamızın içeriği.

.container {
    text-align: center;
    margin-top: 50px;
  }
  
  .heading {
    color: #333;
  }
  
  .card-container {
    display: flex;
    justify-content: space-around;
  }
  
  .card {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    width: 200px;
  }
  
  .image {
    width: 100%;
    margin-bottom: 10px;
  }

ProductCard.jsx dosyası içine ProductCard.css dosyasını import edeceğiz.

import './ProductCard.css';

CSS içinde yazılmış class’ları kullanmak için elementlerin className attribute’u kullanılır.

Html’de hatırlarsınız CSS’leri kullanmak için class attribute’u kullanılırdı.

Neden burada farklı bir kullanıma gidiliyor kısaca bahsedeceğim.

React’te className kullanma sebepleri, JavaScript dilinde class kelimesinin bir anahtar kelime olarak kullanılması ve React’in JSX sözdizimi ile uyumsuzluğundan kaynaklanır. JSX, JavaScript XML olarak adlandırılan bir sözdizimidir ve HTML benzeri bir yapı sunar.

JavaScript’de class kelimesi, sınıfları (class) tanımlamak için kullanılan bir anahtar kelimedir. Ancak, React, JSX içinde bu kelimenin kullanılmasının uyumsuzluk yaratabileceğini fark ettiler. Bu nedenle, HTML’deki class özelliğine karşılık gelen JSX özelliğini className olarak adlandırdılar.

Örneğin, HTML’de bir div elementine class eklemek için şu şekilde yaparsınız:

<div class="my-class">Hello, World!</div>

Ancak, JSX içinde aynı şeyi yapmak için className kullanmalısınız:

<div className="my-class">Hello, World!</div>

Bu, JavaScript ve JSX’in uyum sorununu çözmek ve HTML ile JavaScript arasındaki dil uyumsuzluğunu azaltmak için yapılmış bir seçimdir.

Şimdi bu bilgi ışığında ProductCard.jsx içinde elementlerimizdeki style ifadelerini kaldıralım. Bunun yerine className yazarak ilgili class’ları yazalım.

Kodlarımız son noktada aşağıdaki gibi olacaktı.

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;

Projemizin çıktısına baktığımda aşağıdaki gibi görünüyor olmalı.

Bir Elemente Birden Fazla Class Uygulamak

Bir elemente birden fazla class uygulamak istersek, class isimleri arasına boşluk bırakıp yazmak yeterli olacaktır.

Aklımıza şöyle bir soru gelebilir.

Bir elemente 10 tane class uygulasam, bu aynı diğer style gibi kod kalabalığı yapacaktır. Bunu okunaklı bir şekilde yazıp çözmenin bir yolu var mıdır?

Ever var. Bunu şöyle yaparız. className’ler aslında bir List objesi gibi davranır. Verilecek class isimlerini dışarıda bir dizi olarak tanımlarsak, sonrada className={değişkenİsmi} şeklinde kullanırsak çözümü sağlamış oluruz.

Şöyle bir değişken oluştursam.

const styleList = ["container", "card-container"];

Sonra bunu şu şekilde kullansam hiçbir sorun yaşamam.

<div className={styleList}>

Bu konuda anlatacaklarım bu kadardı.

Bir sonraki yazımda görüşmek üzere.