JSX dosyası yazarken dikkat edilmesi gerekenler

JSX dosyaları, React bileşenlerini oluşturmak için kullanılan özelleştirilmiş bir JavaScript sözdizimi kullanır. (JS dosyası ile arasındaki farkları yazdığım makaleme bu bağlantı üzerinden ulaşılabilirsiniz.) Bu sözdizimine uygun, JSX dosyaları yazarken, aşağıdaki kurallara uyulması gerekir.

1. Tek bir kök eleman (Root Element) olmalı

Her JSX dosyasında, yalnızca bir adet ana öğe (root element) olmalıdır. Her bir bileşen return fonksiyonunda tek eleman dönmediği durumda dosya hata verecektir.

Yanlış kullanım:

return (
  <div>Hello</div>
  <div>World</div>
);

Yukarıdaki return fonksiyonunda kök eleman hizasında iki adet div elementi olduğu için hata verecektir.

Doğru kullanım:

return (
  <div>
    <div>Hello</div>
    <div>World</div>
  </div>
);

Yukarıdaki return fonksiyonunda kök eleman hizasında tek div elementi ve için de iki adet div elementi olduğu için hata vermeyecektir.

2. Componentler büyük harf ile başlamalı

JSX içindeki tüm bileşen adları, büyük harfle başlamalıdır. snake_case veya camelCase yerine PascalCase kullanmak doğru olacaktır. Örneğin, “myComponent” veya “my_component” yerine “MyComponent” yazmak gerekir.(Yazım stilleri ile ilgili makaleme bu bağlantı üzerinden ulaşılabilirsiniz.). Tüm bileşenler fonksiyon olmalıdır.

Örnek kullanım:

import React from 'react'

const MyComponent = () => {

  return (
    <div>
      <p>Example Component</p>
    </div>
  );
}

export default MyComponent;

3. HTML etiketleri küçük harf ile yazılmalı

JSX içindeki tüm HTML etiketleri, küçük harfle yazılmalıdır. PascalCase veya UPPER_CASE yerine lowercase kullanmak doğru olacaktır. Örneğin, “<span>”, “<div>”, “<h1>” vb.

4. Her etiket kapatılmalı

İster HTML etiketi ister özel React etiketi kullanın, JSX dosyasındaki tüm etiketleri kapatılmalıdır. Örneğin, “<br>” yerine “<br/>” kullanılmalıdır.

Yanlış kullanım:

return (
  <div>
    <br>
    <hr>
    <MyComponent>
  </div>
)

Doğru kullanım:

return (
  <div>
    <br/>
    <hr/>
    <MyComponent/>
  </div>
)

5. Değişkenler küçük harf ile başlamalı

JSX içindeki tüm değişken isimleri, küçük harfle başlamalıdır. PascalCase veya UPPER_CASE yerine camelCase kullanmak doğru olacaktır. Bu, JSX’deki bileşenler ile değişkelerin ayırt edilmesine yardımcı olur.

Örnek kullanım:

const firstName = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;

6. Değişkenler süslü parantezler içinde kullanılmalı

JSX içinde değişkenleri kullanmak için süslü parantezler “{}” kullanılır.

Örnek kullanım:

const fullName = 'John Doe';

return (
  <div>
    <p>{fullName}</p>
  </div>
)

7. Fonksiyonlar süslü parantezler içinde kullanılmalı

JSX içinde fonksiyonları kullanmak için süslü parantezler “{}” kullanılır.

Örnek kullanım:

const myFunction = (fullName) => {
  return fullName;
}

return (
  <div>
    <p>{myFunction('John Doe')}</p>
  </div>
)

8. Koşul ifadesi (if-else) kısa yazılışı ile kullanılmalı

JSX içinde if-else ifadeleri kullanmak için, ternary operatörü kullanılır.

Örnek kullanım:

const gender = 'male';

return (
  <div>
    {gender === 'female' ? (
      <p>Gender: female</p>
    ) : gender === 'male' ? (
      <p>Gender: male</p>
    ) : (
      <p>Gender: unknown</p>
    )}
  </div>
);

9. Yorumlar süslü parantezler arasında yazılmalı

JSX içine yorum eklemek istendiğinde, süslü parantezler içine yazılması gerekir.

Örnek kullanım:

return (
  <div>
    {/* This is a comment */}
    <p>Hello world</p>
  </div>
);

Yukarıdaki kurallara dikkat ederek JSX dosyalarını yazmak, daha okunaklı, hata ayıklaması kolay ve performanslı kodlar oluşturmanıza yardımcı olur.