React JS İçerisine Yorum Satırı Nasıl Eklenir?

React JS ile uygulama geliştirirken farklı alanlar içerisinde yorum satırkları eklemek gerekli olabilir. Yorumlar kodun okunması açısından önemlidir.

ReactJS içerisinde farklı alanlarda farklı şekillerde yorum eklemek mümkündür. Şimdi bu alanları ve nasıl yorum satırı ekleyeceğimizi görelim.

React Kompenentinin Dışarısındaki Alana Yorum Satırı Ekleme

React JS ile geliştirdiğimiz komponentler sonuç olarak bir JavaScript dosyasıdır ve .js uzantılı olarak bulunurlar. Bu nedenle eğer komponentin tanımından önce veya sonra bir kod varsa burada normal bir Javascript kodundaki gibi yorum satırı ekleyebiliriz.

// Gerekli modülleri import edelim
import React from 'react';

/* App kompenentini tanımlayalım */
function App() {
    return(
        <div>
            ...
        </div>
    );
}

export default App;

Yukarıdaki örnekte görüldüğü gibi yorum yazarken

// Yorum satırı

şeklinde tek satırlık Javascript yorumlarını burada kullanabiliriz. Ayrıca

/* Çok satırlı
Javascript yorumları */

şeklinde de çok satırlı yorum satırı ekleyebiliriz.

Komponentin Üst Bölümünde Yorum Satırı Kullanma

Eğer komponent yazarken ilk bölümünde, return ifadesinden önce, yorum eklemek istiyorsak bu bölümde de normal Javascript yorum söz dizimini kullanıyoruz.

function App() {
    // Değişkenleri tanımlayalım
    const fiyat = 55;
    const adet = 11;

    /* handleClick fonksiyonu 
    tamam butununa tıklandığında çalışacaktır */
    const handleClick = (e) => {
        // ön tanımlı buton işlemini durduralım
        e.preventDefault();
        ...
    }
    return (
        ...
    )
}

Bu bölümde de yorum işlemlerini normal Javascript yorumlarını kullandığımız şekilde yaptık.

Tek satır yorumlarda

// Değişkenleri tanımlayalım

söz dizimini kullandık ki, // burası yorum satırıdır demektir. Çoklu yorumlarda ise /* … */ formatını kullandık.

/* handleClick fonksiyonu 
   tamam butununa tıklandığında çalışacaktır */

Komponent return İfasesi İçerisine Yorum Satırı Eklemek

Eğer bir komponentin return ifadesi içerisinde yorum satırı kullanıyorsak bu bölüm de daha dikkatli olmalıyız.

return ( ifadesinden sonra html etiketleri eklenmeden normal bir şekilde Javascript yorumu eklenebilir. Yukarıda bu örnekleri vermiştik. Fakat div etiketleri içerisinde bir yorum yazılacaksa süslü { } parantezler içerisinde yazılmalıdır.

return (
    // Tek satır yorum
    /* çok satı yorum */
    <div>
        { /* Bir başlık ekleyelim */}
        <h1>Merhaba Dünya</h1>
    </div>
)

Bu kod içerisinde üç farklıyorum ekledik. İlk iki yorum normal Javascript yorumu şeklinde kullanıldı.

// Tek satır yorum
/* çok satı yorum */

Üçüncü yorum ise etiketlerin içerisinde olduğu için süslü parantezler içerisine alınarak kullanıldı. Bu doğru olan yaklaşımdır.

<div>
    { /* Bir başlık ekleyelim */}
    <h1>Merhaba Dünya</h1>
</div>

React Yorum Satırı

React yorum satırı uygulama içerisinde bulunan yere göre farklı şekillerde eklenir. Çünkü bir React uygulaması hem Javascript ve hemde Html kodu içerir. return ifadesi içerisinde ise JSX formatı kullanılır. Bu nedenle yorum yazılacak yere dikkat edilerek yukarıda verdiğimiz örnekler ışığında işlem yapılabilir.

Sonuç

React JS ile geliştirdiğimiz komponentler içerisinde yorum eklemek istediğinizde, return ifadesi içerisindeki html bölümünde süslü parantezler içerisinde yorum eklemeliyiz. return ifadesinden önceki bölümlerde normal Javascript yorum yazım şeklini kullanabiliriz.

React JS ile ilgili öğrenmek istediklerinizi yorumlardan sorabilirsiniz.